<template>
  <div class="container w-full border-box border-ff overflow-hidden rounded-24 flex flex-col">
    <!-- 占位撑开 -->
    <div class="w-vw"></div>
    <div class="content flex flex-col m-4 border-box rounded-24">
      <div class="flex flex-col p-6 border-box flex-items-center justify-center">
        <img class="w-full rounded-20" :src="props.toolCall.componentNameParams.background" mode="widthFix" />

        <!-- 左上角标签 -->
        <div class="tag">
          <div class="dot"></div>
          <span class="tag-text">{{ props.toolCall.componentNameParams.superscript }}</span>
        </div>

        <img class="g_title mt-20" :src="props.toolCall.componentNameParams.title" />

        <span class="font-size-14 font-400 color-white my-12 text-center">
          {{ props.toolCall.componentNameParams.description }}
        </span>

        <div class="w-full border-box px-12 pb-8 flex flex-row" @click="jumpClick">
          <div class="btn-bg w-full border-box p-4 rounded-24 flex flex-row">
            <div
              class="btn-bg-sub w-full border-box p-16 rounded-20 flex flex-row flex-items-center flex-justify-center color-white text-center font-size-18 font-800">
              {{ props.toolCall.componentNameParams.buttonName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import { defineProps, nextTick, onMounted, computed } from "vue";
import {
  SCROLL_TO_BOTTOM,
} from "@/constants/constant";
import { getAccessToken } from "@/constants/token";
// import { navigateTo } from "@/router";


const props = defineProps({
  toolCall: {
    type: Object,
    default: {},
  },
});

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      uni.$emit(SCROLL_TO_BOTTOM, true);
    }, 300);
  });
});

const jumpClick = () => {
  const token = getAccessToken();
  if (props.toolCall.componentNameParams.jumpUrl) {
    router.push({
      path: props.toolCall.componentNameParams.jumpUrl,
      query: {
        token: token,
      },
    });
  }
};

</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>