<template>
  <div class="w-full bg-white">
    <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 rounded-t-[20px] bg-[#fff] -mt-15"
    >
      <div
        class="flex justify-between box-border mb-15 py-10 px-16 items-center bg-[#FD9A00]/[0.08]"
      >
        <div class="flex text-xl text-black-3 font-semibold shrink-0 justify-between items-center">
          <div class="w-3 h-22 bg-[#FA8446] rounded-r-[15px] mr-8"></div>
          订单详情
        </div>
        <div class="text-base shrink-0 flex justify-start items-center">
          <span class="text-black-6">订单编号</span>
          <span class="mx-4 font-semibold text-black/[0.9]">
            {{ orderData?.id }}
          </span>
          <div class="w-16 h-16 shrink-0" @click="copy(orderData?.id)">
            <img class="w-full h-full object-cover" src="@/assets/img/visa/copy.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="box-border w-full px-16 pb-20">
        <!-- 签证办理流程 -->
        <VisaPayProcess :isFlag="true" :payState="orderState"></VisaPayProcess>
        <h1
          :title="visaData?.visaTitle"
          class="mb-20 mt-15 line-clamp-1 w-full text-4xl font-semibold leading-4xl text-[#444]"
        >
          {{ visaData?.visaTitle }}
        </h1>
        <div class="mb-19 flex items-center justify-start">
          <div class="w-16 h-16 shrink-0">
            <img
              class="w-full h-full object-cover"
              src="@/assets/img/visa/Calendar-thirty.svg"
              alt=""
            />
          </div>
          <span class="pl-8 text-sm font-normal leading-xl text-black-6">下单时间：</span>
          <span class="text-base font-semibold leading-3xl text-black">
            {{ orderData.createTime }}
          </span>
        </div>
        <div class="mb-19 flex items-center justify-start">
          <div class="w-16 h-16 shrink-0">
            <img class="w-full h-full object-cover" src="@/assets/img/visa/people.svg" alt="" />
          </div>
          <span class="pl-8 text-sm font-normal leading-xl text-black-6">客服顾问</span>
          <span class="pl-12 text-base font-semibold leading-3xl text-black">
            {{ orderData?.counselorIdDictMap?.name }}
          </span>
        </div>
        <div class="mb-21 flex items-center justify-start">
          <div class="w-16 h-16 shrink-0">
            <img class="w-full h-full object-cover" src="@/assets/img/visa/consume.svg" alt="" />
          </div>
          <span class="px-8 text-sm font-normal leading-xl text-black-6">支付状态：</span>
          <div
            :class="`w-53 h-20 text-center text-sm leading-3xl rounded-full text-[${colorList[orderData?.payState]}] bg-[${colorList[orderData?.payState]}]/[0.1]`"
          >
            {{ formatStatus(orderData?.payState) }}
          </div>
        </div>

        <ul class="w-full">
          <li
            v-for="(item, index) in severList"
            :key="index + 'severList'"
            class="mb-12 box-border flex h-20 w-full items-center justify-between pr-6"
          >
            <span class="text-sm font-normal leading-3xl text-black-6">{{ item }}</span>
            <span
              v-if="severPrice.length > 0"
              class="text-base font-semibold leading-3xl text-[#FF476A]"
            >
              ￥{{ severPrice[index] }}
            </span>
          </li>
          <li
            class="mb-12 box-border flex h-20 w-full items-center justify-between border-t-[1px] border-dashed pr-6 pt-26"
          >
            <span class="text-xl font-normal leading-3xl text-black">合计费用</span>
            <span class="text-sm font-semibold leading-3xl font-semibold text-[#FF476A]">
              ￥
              <span class="text-5xl">{{ totalPrice ? totalPrice.toFixed(2) : '0.00' }}</span>
            </span>
          </li>
        </ul>
      </div>

      <div class="box-border w-full bg-[#FAFAFA] px-16 pt-20">
        <h1 class="text-xl mb-15 font-semibold text-black">基本信息</h1>
        <p
          v-for="(item, index) in infoList"
          :key="index + 'infoListOne'"
          class="mb-11 w-full shrink-0   text-base leading-4xl"
        >
          <span class="inline-block w-65 font-normal text-black-6">{{ item }}</span>
          <span class="font-semibold text-black/[0.9]">
            {{ infoDataList[index] }}
          </span>
        </p>

        <h1 class="text-xl pt-7 mb-15 font-semibold text-black">说明</h1>
        <div class="text-sm font-normal leading-5xl text-black-6 pb-34">
          1、 所有签证产品办理时间从商家收齐资料后开始计算，法定节假日及使馆休息日不算入办理时间；
          <br />
          2、 签证价格随使馆规定或汇率变化浮动，送签前遇使馆调整签证价格，商家将采取多退少补措施；
          <br />
          3、签证属于特殊商品，商家会按照使领馆的要求为客人准备最合适的送签材料，确保您的材料有最高出签可能，但是您所申请的签证是否成功，取决于使领馆对您资料的审核，若发生拒签，请申请人自然接受结果，同时放弃追究商家
          任何责任；
          <br />
          4、 办理三天后不支持退款。
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useClipboard } from '@vueuse/core'

const id = useRouteParam('id')
// copy
const { copy, isSupported } = useClipboard()

// 订单数据
const orderData = ref({})

// 订单流程的状态
const orderState = ref(0)

// 订单数据
const totalPrice = ref(0)

// 签证数据
const visaData = ref({})

// 基本信息
const infoList = ref([
  '签证类型',
  '有效期',
  '入镜次数',
  '可停留期',
  '用户姓名',
  '联系方式',
  '身份证',
  '联系地址'
])

// 服务信息
const severList = ref(['订单', '服务费', '税务费'])

// 服务得价格
const severPrice = ref([])

// 基本信息列表
const infoDataList = ref([])

const colorList = ['#FF9300', '#1BC467', '#FF476A']

const orderStatusEnum = [
  {
    value: 0,
    label: '未付款'
  },
  {
    value: 1,
    label: '已付款'
  },
  {
    value: 2,
    label: '已退款'
  }
]

function formatStatus(status) {
  return orderStatusEnum.find((item) => item.value == status)?.label
}

const isValue = (parmas) => {
  return parmas ? parmas : ''
}

// 获取订单详情
async function getVisaOrderDetails() {
  try {
    let url = `/website/tourism/visa/findOrderById?id=${id?.value}`

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

    if (visa) visaData.value = visa

    if (order) {
      // order.createTime = order?.createTime?.split(' ')[0]
      severPrice.value.push(
        order?.orderPrice ? order?.orderPrice : '0.00',
        order?.servicePrice ? order?.servicePrice : '0.00',
        order?.price ? order?.price : '0.00'
      )

      totalPrice.value = order?.orderPrice * 1 + order?.servicePrice * 1 + order?.price * 1
      orderState.value = order?.state
      orderData.value = order
    }

    infoDataList.value = [
      isValue(visa?.visaTypeIdDictMap?.name),
      visa?.validity ? `${visa?.validity} 天` : '无限制',
      visa?.entriesNum ? `${visa?.entriesNum} 次` : '无限制',
      visa?.idleDays ? `${visa?.idleDays} 天` : '无限制',
      isValue(order?.orderName),
      isValue(order?.orderPhone),
      isValue(order?.orderIdCard),
      isValue(order?.orderAddress)
    ]
  } catch (error) {
    if (error.state == 401) {
      // location.href
    }
  } finally {
    return
  }
}

onMounted(() => {
  getVisaOrderDetails()
})
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions__body {
  background-color: #fafafa; /* 设置背景色为白色 */
}

::v-deep .el-descriptions__label {
  width: 100px; /* 设置背景色为白色 */
}

.orderHeader::before {
  width: 3px;
  height: 22px;
  content: '';
  background-color: #fa8446;
  border-radius: 0 50% 50% 0;
}
</style>
