<template>
  <div class="survey-questionnaire w-[calc(100%-24px)]">
    <div class="bg-white  border-ff overflow-hidden rounded-[20px]">
      <div class=" flex items-center justify-between bg-[#f0f8f3]">
        <span class="text-[18px] font-medium text-[#171717] text-left ml-[12px]">
          {{ t("home.survey.title") }}
        </span>
        <img class="w-102 h-72" :src="surveyData.logoUrl" mode="widthFix" />
      </div>

      <img class="w-full" :src="surveyData.bannerUrl" mode="widthFix" />

      <div class="h-44 m-[12px] rounded-[5px] bg-button text-white flex items-center justify-center"
        @click="handleCall">
        {{ t("home.survey.fillIn") }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { getAccessToken } from "@/constants/token";
import { defineProps, computed } from "vue";
import { useI18n } from "vue-i18n";
// import { navigateTo } from "../../router";

const { t } = useI18n();

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

const surveyData = computed(() => {
  if (props.toolCall?.data) {
    return JSON.parse(props.toolCall?.data);
  } else {
    return {};
  }
});

const handleCall = () => {
  const token = getAccessToken();
  router.push({
    path: surveyData.value.jumpUrl,
    query: {
      token: token,
    },
  });
};
</script>

<style lang="scss" scoped></style>
