<template>
  <view class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
    <!-- 占位撑开 -->
    <view class="w-vw"></view>
    <view class="content flex flex-col m-[4px] rounded-[24px]">
      <view class="flex flex-col p-[6px] flex-items-center justify-center">
        <image class="w-full rounded-[20px]" :src="componentDataMap.background" mode="widthFix" />

        <!-- 左上角标签 -->
        <view class="tag">
          <view class="dot"></view>
          <text class="tag-text">{{ componentDataMap.superscript }}</text>
        </view>

        <image class="g_title mt-[20px]" :src="componentDataMap.title" />

        <text class="text-[14px] font-[400] text-white my-[12px] text-center">
          {{ componentDataMap.description }}
        </text>

        <view class="w-full px-[12px] pb-[8px] flex flex-row" @click="jumpClick">
          <view class="btn-bg w-full p-[4px] rounded-[24px] flex flex-row">
            <view
              class="btn-bg-sub w-full p-[16px] rounded-[20px] flex flex-row flex-items-center flex-justify-center text-white text-center text-[18px] font-bold">
              {{ componentDataMap.buttonName }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

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


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

const componentDataMap = computed(() => {
  return {
    background: props.toolCall.componentNameParams?.background || props.toolCall.aigc?.background,
    title: props.toolCall.componentNameParams?.title || props.toolCall.aigc?.title,
    description: props.toolCall.componentNameParams?.description || props.toolCall.aigc?.description,
    buttonName: props.toolCall.componentNameParams?.buttonName || props.toolCall.aigc?.buttonName,
    superscript: props.toolCall.componentNameParams?.superscript || props.toolCall.aigc?.superscript,
    jumpUrl: props.toolCall.componentNameParams?.jumpUrl || props.toolCall.aigc?.jumpUrl,
  }
})

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

const jumpClick = () => {
  const token = getAccessToken();
  if (componentDataMap.value.jumpUrl) {
    navigateTo(componentDataMap.value.jumpUrl, { token: token });
  }
};

</script>

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