<template>
  <div class="w-full pt-11 bg-[#fff]">
    <div
      v-if="visaTypeList?.length > 0"
      class="flex px-15 w-full flex-wrap items-center justify-between"
    >
      <div
        v-for="(item, index) in visaTypeList"
        :key="item?.id"
        @click="goToDetailsPage(item)"
        :class="`${visaArticleParmas?.id == item?.id ? 'border-[1px] border-[#FD9A00] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]' : ''} relative mb-12 box-border h-60 w-165 mb-12 rounded-xl  active:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]`"
        style="background: linear-gradient(90deg, #fff5eb 0%, #f9e5cd 100%)"
      >
        <h1 class="my-18 ml-16 h-24 text-xl font-semibold leading-24 text-[#FD9A00]">
          {{ item?.title }}
        </h1>

        <img
          :src="visaTypeImageList[index]"
          alt=""
          class="absolute left-0 top-0 z-[10] h-full w-full"
        />
      </div>
    </div>
    <!-- 右边文章的区域 -->

    <Empty v-if="!visaArticleParmas && !loading" />
    <div v-else class="box-border px-15 pb-29 w-full">
      <div
        v-if="visaArticleParmas?.title"
        :title="`${visaArticleParmas?.title}的介绍`"
        class="w-full cursor-pointer truncate text-ellipsis whitespace-nowrap text-nowrap text-[15px] font-[600] leading-[23px] text-black-3"
      >
        {{ visaArticleParmas?.title }}的介绍
      </div>
      <div class="h-31 w-full flex items-center border-b-[1px] text-sm font-[400] text-black-6">
        发布于{{ visaArticleParmas?.updateTime }}
      </div>

      <div
        class="box-border w-full text-[12px] pt-11"
        id="content"
        v-html="visaArticleParmas?.recommand"
      ></div>
    </div>
    <Footer />

    <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>
  </div>
</template>
<script setup>
// 签证分类的图片
import small_banner_icon1 from '@/assets/img/visa/small_banner1.png'
import small_banner_icon2 from '@/assets/img/visa/small_banner2.png'
import small_banner_icon3 from '@/assets/img/visa/small_banner3.png'
import small_banner_icon4 from '@/assets/img/visa/small_banner4.png'

const id = useRouteParam('id')
const loading = ref(true)
// 签证分类的图片数组
const visaTypeImageList = [
  small_banner_icon1,
  small_banner_icon2,
  small_banner_icon3,
  small_banner_icon4
]

// 文章的参数
let visaArticleParmas = ref(null)

// // 获取签证的类型列表
const visaTypeList = ref([])
async function getVisaTypeList() {
  loading.value = true
  const { data } = await request(`/website/tourism/visa/getTypeList`)

  if (Array.isArray(data)) {
    visaTypeList.value = data
    visaArticleParmas.value = data.filter((el) => el.id == id.value)[0]
    document.title = `${visaArticleParmas.value?.title}详情`
    loading.value = false
  }
}

// 跳转签证详情页
const goToDetailsPage = (parmas) => {
  visaArticleParmas.value = parmas
  document.title = `${parmas.title}详情`
}

onMounted(async () => {
  getVisaTypeList()
})
</script>

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