<template>
  <div class="w-full bg-[#fff]">
    <div class="aspect-[375/211] h-211 overflow-hidden relative">
      <img class="h-full w-full object-cover" :src="visaData?.img" alt="" />

      <!-- <div
        class="absolute z-1 top-0 left-0 w-full h-full flex justify-center items-center text-white"
      >
        <div class="h-61 w-full flex justify-center flex-wrap">
          <h1 class="w-full h-31 text-center text-[31px] mb-6 leading-[31px] line-clamp-1">
            {{ visaData?.countryCodeIdDictMap?.name }}
          </h1>
          <div class="w-73 h-4 border-t-[1px] border-white mb-9"></div>
          <p class="w-full h-15 text-center text-sm leading-xl line-clamp-1">
            {{ visaData?.countryCodeIdDictMap?.name }}
          </p>
        </div>
      </div> -->
    </div>
    <div
      style="z-index: 10"
      class="w-full min-h-300 relative box-border pt-17 rounded-t-[20px] bg-[#fff] px-16 pb-30 -mt-15"
    >
      <h1
        :title="visaData?.visaTitle"
        class="w-full line-clamp-1 mb-19 text-xl leading-5xl font-medium"
      >
        {{ visaData?.visaTitle }}
      </h1>
      <p
        v-for="(item, index) in subList"
        :key="'sub' + index"
        class="w-full text-base font-normal leading-6xl line-clamp-1"
      >
        <span class="text-black-6">{{ item }}:</span>
        <span class="pl-8 text-black-3">
          {{ subListValues[index] }}
        </span>
      </p>
      <div
        class="mt-8 box-border h-115 w-full rounded-lg border p-11 mb-16"
        style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
      >
        <div class="box-border flex h-16 w-full items-center justify-start mb-18">
          <div class="w-16 h-16">
            <img class="h-full w-full object-cover" src="@/assets/img/visa/visa_logo.svg" alt="" />
          </div>
          <span class="mx-4 text-sm font-normal text-black">出签成功率</span>
          <span class="text-xl font-semibold leading-xl text-[#FA8446]">98.9%</span>
        </div>
        <div class="w-full flex flex-nowrap items-center justify-between">
          <div
            v-for="(item, index) in guaranteeList"
            :key="'guaranteeList' + index"
            :class="`box-border  h-68 ${index == 2 ? 'w-[31%]' : 'w-[30%]'} `"
          >
            <div class="w-full flex items-center mb-8">
              <div class="w-16 h-16 shrink-0">
                <img class="h-full w-full object-cover" :src="item?.icon" alt="" />
              </div>
              <h1 class="ml-4 text-base text-base text-black">{{ item?.title }}</h1>
            </div>
            <p
              :title="item?.describe"
              class="line-clamp-2 mb-3 text-center text-sm font-normal leading-xl text-black-9"
            >
              {{ item?.describe }}
            </p>
          </div>
        </div>
      </div>

      <div class="flex h-40 px-20 box-border w-full justify-bewteen rounded-t-lg bg-[#F7F7F7]">
        <div
          v-for="(item, index) in navList"
          :key="'productNav' + index"
          @click="navIndex = index"
          :class="`mx-8 box-border flex h-full w-90 items-center justify-center text-xl   ${navIndex === index ? 'border-b-[2px] border-[#FA8446] font-semibold text-[#FA8446]' : 'font-normal text-black-6'}`"
        >
          {{ item }}
        </div>
      </div>

      <div
        v-if="navIndex === 0"
        v-html="visaData?.dataText"
        class="box-border w-full py-16 pb-100"
      ></div>
      <div v-if="navIndex == 1" class="box-border w-full py-16 pb-60">
        <div
          v-for="(item, index) in argumentList"
          :key="index + 'need'"
          class="border-b-[1px] mb-30"
        >
          <div class="box-border w-full pb-9 text-base font-semibold text-black">
            {{ item?.title }}
          </div>
          <p v-if="index === 3" class="mb-12 text-base font-normal leading-3xl text-black-9">
            {{ argumentListData[index] === 0 ? '需要' : item?.need }}
          </p>
          <p v-else class="mb-12 text-base font-normal leading-3xl text-black-9">
            {{
              isArgument(argumentListData[index])
                ? `${argumentListData[index]}${item.unit}`
                : item?.need
            }}
          </p>
        </div>
      </div>

      <div v-if="navIndex == 2" class="box-border w-full py-16 pb-80">
        <div
          v-if="!metarialsLists?.length"
          class="w-full flex items-center justify-center min-h-100"
        >
          <div class="text-[#BFC8DB]">暂无基础材料</div>
        </div>
        <div
          class="w-full pb-8 mb-15 border-b-[1px]"
          v-for="(item, index) in metarialsLists"
          :key="item.id"
        >
          <h1 class="line-clamp-1 w-full text-base pb-4 font-semibold text-black leading-5xl">
            {{ index + 1 }}.{{ item.title }}
          </h1>
          <p class="w-full text-sm text-black-6 leading-3xl font-normal">
            {{ item?.content ? item?.content : '无' }}
          </p>
        </div>
      </div>
    </div>

    <div
      class="fixed bottom-0 left-0 z-50 bg-white box-brder w-full h-100 border-t-[1px] p-15 pb-38 flex justify-bewteen items-center"
      style="box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.1)"
    >
      <p class="w-full line-clamp-1">
        <span class="truncate whitespace-nowrap text-nowrap text-base font-normal text-black/[0.9]">
          合计费用:
        </span>
        <span class="text-sm font-normal text-[#FF476A]">
          ¥
          <span class="text-3xl font-semibold">
            {{ visaData?.floorPrice ? visaData?.floorPrice : '????' }}.00
          </span>
          起
        </span>
      </p>

      <van-button
        @click="showVisaModal = !showVisaModal"
        type="warring"
        color="#FA8446"
        round
        class="box-border w-160 h-46 text-white shrink-0 rounded-full text-xl font-semibold"
      >
        联系顾问
      </van-button>
    </div>

    <van-back-top
      bottom="30vh"
      right="12px"
      style="background-color: white; color: #ff9300"
      class="w-56 h-56 text-[10px] font-semibold"
    >
      <div class="w-full border border-[#000]/[0] flex justify-center flex-wrap">
        <van-icon name="back-top" size="19" color="#FF9300" />
        <div>TOP</div>
      </div>
    </van-back-top>

    <van-dialog
      :keyboard-enabled="false"
      v-model:show="showVisaModal"
      style="width: 80%; border-radius: 12px"
    >
      <template #title>
        <div class="flex justify-between items-center border-b-[1px] px-15 pb-10">
          <h1 class="text-[16px] font-semibold text-[#333]">顾问信息</h1>
          <div class="w-31 h-31 shrink-0" @click="showVisaModal = false">
            <img
              class="w-full h-full object-cover"
              src="~/assets/img/note-create/close.svg"
              alt=""
            />
          </div>
        </div>
      </template>
      <div class="box-border w-full h-256">
        <div class="flex items-start justify-start pt-34 pl-24 pr-15 mb-22">
          <div
            class="box-border h-64 w-64 overflow-hidden rounded-full border-[2px] border-[#E2E2E2]"
          >
            <img class="h-full w-full object-cover" :src="consultantInfo?.counselorAvatar" alt="" />
          </div>

          <div class="ml-21 w-160 text-left">
            <p class="line-clamp-1 text-base font-normal leading-5xl text-[#333]/[0.9]">
              {{ consultantInfo?.counselorName }} ({{ consultantInfo?.levelDictMap?.name }})
            </p>
            <p class="line-clamp-1 text-sm font-normal leading-5xl text-black-9">
              工作时间 {{ consultantInfo?.workingTime }}
            </p>
            <p
              :title="phoneSection(consultantInfo?.countryCodeId, consultantInfo?.counselorPhone)"
              class="line-clamp-1 text-xl font-semibold text-black"
            >
              {{ phoneSection(consultantInfo?.countryCodeId, consultantInfo?.counselorPhone) }}
            </p>
          </div>
        </div>

        <div>
          <div class="ml-109">
            <div class="h-94 w-94 overflow-hidden">
              <img
                class="h-full w-full object-cover"
                :src="consultantInfo?.counselorWechat"
                alt=""
              />
            </div>

            <p class="text-sm pt-8 font-normal leading-base text-black-9">扫码添加 企业微信</p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="w-full flex justify-center mb-19">
          <van-button
            @click="showVisaModal = false"
            style="width: 120px; height: 40px"
            color="#FF9300"
            round
            type="warning"
          >
            确认
          </van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>
<script setup>
import lock from '@/assets/img/visa/lock.svg'
import professional_customer_service from '@/assets/img/visa/professional_customer_service.svg'
import refund from '@/assets/img/visa/refund.svg'

const id = useRouteParam('id')

// 被选中的下标
let navIndex = ref(0)

// 签证的信息
let visaData = ref({})

// 顾问的模态框
let showVisaModal = ref(false)

// 顾问信息
let consultantInfo = ref({})

// 基础材料的信息
const metarialsLists = ref([])

// 签证的信息列表
const subListValues = ref([])

// 签证的副列表
const subList = reactive(['签证类型', '有效期', '可停留期', '入境次数', '办理时长'])

const isValue = (parmas) => {
  if (parmas !== null || parmas !== undefined || parmas !== '') {
    return parmas
  } else {
    return ''
  }
}

// 电话分段
const phoneSection = (codeId, phone) => {
  if (codeId && phone) {
    return `+${codeId} ${phone?.slice(0, 3)} ${phone?.slice(3, 7)} ${phone?.slice(7, 11)}`
  } else {
    return ''
  }
}

// 签证保障列表项
const guaranteeList = reactive([
  {
    icon: lock,
    title: '隐私保护',
    describe: '全程独立操作，安全可靠'
  },

  {
    icon: professional_customer_service,
    title: '专业客服',
    describe: '一对一客服帮您制定送签方案'
  },
  {
    icon: refund,
    title: '退款保证',
    describe: '材料制作完成前，均可申请退款'
  }
])

// 产品的nav
const navList = reactive(['签证介绍', '签证参数', '基础材料'])

// 产品参数
const argumentList = reactive([
  {
    title: '签证有效期',
    need: '无限制',
    unit: '天'
  },
  {
    title: '停留期',
    need: '无限制',
    unit: '天'
  },
  {
    title: '入境次数',
    need: '无限制',
    unit: '次'
  },
  {
    title: '是否面签',
    need: '不需要',
    unit: ''
  }
])

const argumentListData = ref([])

const isArgument = (param) => {
  if (param > 0) {
    return true
  } else {
    return false
  }
}
// 获取签证详情
async function getVisaDetails() {
  try {
    let url = `/website/tourism/visa/findByById?id=${id?.value}`

    let {
      data: { visa, counselor, metarialsList }
    } = await request(url)

    if (visa) {
      subListValues.value = [
        visa?.visaTypeIdDictMap?.name,
        visa?.validity ? `${visa?.validity}天` : '无限制',
        visa?.idleDays ? `${visa?.idleDays}天，使馆根据行程批复` : '无限制',
        visa?.entriesNum ? `${visa?.entriesNum}次` : '无限制',
        visa?.processingDays ? `收齐材料后${visa?.processingDays}个工作日` : ''
      ]

      argumentListData.value = [
        visa?.validity,
        visa?.idleDays,
        visa?.entriesNum,
        visa?.interviewFlag
      ]
      visaData.value = visa
    }

    if (counselor) {
      consultantInfo.value = counselor
      if (visa.countryCodeId) {
        consultantInfo.value.countryCodeId = visa.countryCodeId
      } else {
        consultantInfo.value.countryCodeId = visa.countryCodeIdDictMap.id
      }

      consultantInfo.value.workingTime = `${isValue(counselor.start)}:00 - ${isValue(counselor.end)}:00`
    }

    if (Array.isArray(metarialsList)) {
      metarialsLists.value = metarialsList
    }
  } finally {
    return
  }
}

onMounted(() => {
  if (id?.value) getVisaDetails()
})

useSeoMeta({
  title: `签证详情`
})
</script>

<style lang="scss" scoped>
::v-deep .el-button {
  padding: 8px 26px;
}
</style>
