<template>
  <div
    class="w-full border border-white overflow-hidden rounded-[24px] flex flex-col bg-white/20 [box-shadow:0_9px_34px_0_rgba(27,9,91,0.07)]">
    <!-- 占位撑开 -->
    <div class="w-full"></div>
    <div
      class="relative bg-gradient-to-b from-[#e8fff1] to-[#0ccd58] rounded-3xl border border-white flex flex-col m-4  rounded-[24px]">
      <div class="flex flex-col p-6  items-center justify-center">
        <img class="w-full rounded-[20px]" :src="props.toolCall.componentNameParams.background" mode="widthFix" />

        <!-- 左上角标签 -->
        <div
          class="absolute top-[20px] left-[20px] flex items-center px-[8px] py-[4px] rounded-full [backdrop-filter:blur(3px)] bg-white/80 [box-shadow:inset_0_1px_2px_0_rgba(255,255,255,0.46)]">
          <div class="inline-block w-[15px] h-[15px] rounded-full bg-[#0ccd58] mr-2"></div>
          <span class="text-xs text-[#0ccd58] font-semibold">{{ props.toolCall.componentNameParams.superscript }}</span>
        </div>

        <img class="w-[197px] h-[42px] mt-20" :src="props.toolCall.componentNameParams.title" />

        <span class="text-[14px] font-normal text-white my-[12px] text-center">
          {{ props.toolCall.componentNameParams.description }}
        </span>

        <div class="w-full  px-12 pb-8 flex flex-row" @click="jumpClick">
          <div class="bg-white/[0.32] border-[0.66px] border-white/[0.32] w-full  p-4 rounded-[24px] flex flex-row">
            <div
              class="w-full p-[16px] rounded-[20px] flex flex-row items-center justify-center text-white text-center text-[18px] font-bold bg-[#0ccd58] [box-shadow:inset_0_0_41px_0_#f0f8f3,inset_0_0_15px_0_#e8fff1]">
              {{ props.toolCall.componentNameParams.buttonName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import { defineProps, nextTick, onMounted, computed } from "vue";
import { emitter } from '@/utils/events'
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(() => {
      emitter.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>
