<template>
  <div class="w-full h-[100vh] bg-[#fff] box-border px-16 pt-11 pb-23">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-if="orderList.length"
        v-model:loading="loading"
        v-model:error="error"
        :finished="finished"
        :immediate-check="false"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="handleCurrentChange"
      >
        <div
          style="scrollbar-width: none"
          v-for="item in orderList"
          :key="item?.id"
          class="scroll-box scrollbar-hide mb-16 box-border h-140 w-full overflow-hidden overflow-y-auto rounded-lg border bg-[#fff]"
        >
          <div
            class="box-border flex h-32 w-full shrink-0 cursor-pointer items-center justify-between bg-[#F7F7F7] px-11"
          >
            <div class="flex justify-start shrink-0 items-center">
              <span class="text-sm font-normal  leading-xl text-black-3/[0.9]">
                订单号:{{ item?.id }}
              </span>
              <div class="w-16 h-16 shrink-0 ml-8" @click="copyId(item?.id)">
                <img
                  @click="copyId(item?.id)"
                  class="w-full h-full object-cover"
                  src="@/assets/img/visa/copy.svg"
                  alt=""
                />
              </div>
            </div>
            <div class="flex justify-start items-center">
              <span class="mr-9 text-sm font-normal shrink-0 leading-xl text-black-9/[0.9]">
                {{ item?.createTime?.split(' ')[0] }}
              </span>
              <div class="w-16 h-16 shrink-0" @click="doDeleteVisaOrder(item?.id)">
                <img class="w-full h-full object-cover" src="@/assets/img/visa/delete.svg" alt="" />
              </div>
            </div>
          </div>
          <NuxtLink
            class="h-105 w-full p-11 block box-border"
            :to="'/profile/visa-order-details/' + item?.id"
          >
            <div class="flex items-center justify-between mb-13">
              <div class="h-full shrink-0 w-60 overflow-hidden rounded-[4px]">
                <img class="h-44 w-full object-cover" :src="item?.tourVisaVo?.img" alt="" />
              </div>

              <div
                class="line-clamp-2 h-46 w-250 shrink-0 text-base font-normal leading-4xl text-black"
              >
                {{ item?.orderName }}
              </div>
            </div>

            <div class="w-full flex justify-between items-center">
              <div class="flex items-center">
                <span class="text-sm pt-6 pr-8 font-[500] leading-3xl text-[#FF476A]">
                  ￥
                  <span class="text-3xl">{{ Number(item?.orderPrice).toFixed(2) }}</span>
                </span>
                <div
                  :class="`w-53 line-clamp-1 h-20 text-center shrink-0 text-sm leading-3xl rounded-full ${colorLists[item?.payState].color} ${colorLists[item?.payState].textColor}`"
                >
                  {{ formatStatus(item?.payState) }}
                </div>
              </div>

             <button  class=" text-sm shrink-0 px-10  line-clamp-1 flex-nowarp h-24 border-[0.5px] border-[#FF9300] rounded-full text-[#FF9300] bg-white flex justify-center items-center box-border active:bg-[#FF9300]/[0.1] " >
              订单详情  <div class="w-13 h-13 shrink-0 ml-4">
                <img class="w-full h-full  object-cover "  src="~/assets/img/visa/chevron-down.svg" alt="">
              </div>

             </button>

             
            </div>
          </NuxtLink>
        </div>
      </van-list>
      <Empty v-if="!orderList.length && loading" title="暂无订单" top="100" />
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { useClipboard } from '@vueuse/core'
const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)

onMounted(async () => {
  await userInfoStore?.getUserInfo().catch((err) => {
    if (err.status == 401) {
      showToast({
        message: '请先登录',
        forbidClick: true,
        duration: 0
      })
      // location.href = '/login'
    }
  })

  if (userInfo.value.mobile) getVisaOrderList()
})

useSeoMeta({
  title: `签证订单列表`
})

const finished = ref(false)
const error = ref(false)
const loading = ref(false)
const refreshing = ref(false)
watch(userInfo, () => {})

// copy
const { copy, isSupported } = useClipboard()
// 订单的付款状态

const pageNum = ref(1)

const orderList = ref([])

// const colorList = ['warning', 'success', 'danger']
const colorLists = [
  {
    color: 'bg-[#FF9300]/[0.1]',
    textColor: 'text-[#FF9300]'
  },
  {
    color: 'bg-[#1BC467]/[0.1]',
    textColor: 'text-[#1BC467]'
  },
  {
    color: 'bg-[#FF476A]/[0.1]',
    textColor: 'text-[#FF476A]'
  }
]

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

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

// 复制订单号
function copyId(itemId) {
  if (itemId) {
    copy(itemId)
    showNotify({ type: 'success', message: '订单号已复制' })
  } else {
    showNotify({ message: '订单号复制失败' })
  }
}

// 获取订单列表
async function getVisaOrderList() {
  try {
    loading.value = true
    let {
      data: { dataList, totalCount }
    } = await request(`/website/tourism/visa/findOrderPage`, {
      query: {
        pageNum: pageNum.value,
        pageSize: 10,
        phone: userInfo.value.mobile
      }
    })

    if (dataList.length == 0) orderList.value = []

    // 去重处理
    if (Array.isArray(dataList) && orderList.value.length > totalCount)
      orderList.value = Array.from(new Set([...orderList.value, ...dataList]))
    // 去重处理合并处理
    if (orderList.value.length < totalCount) orderList.value = orderList.value.concat(dataList)

    loading.value = false
    refreshing.value = false
    if (orderList.value.length >= totalCount) {
      finished.value = true
    } else {
      finished.value = false
    }
  } finally {
    refreshing.value = false
    loading.value = false
  }
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  getVisaOrderList()
}

// 改变页数
const handleCurrentChange = () => {
  pageNum.value += 1
  getVisaOrderList()
}

// 删除订单
async function doDeleteVisaOrder(id) {
  showConfirmDialog({
    title: '提示',
    message: '确认是否删除该订单?',
    confirmButtonColor: '#FF9300'
  })
    .then(async () => {
      try {
        let url = `/website/tourism/visa/deleteOrderById?id=${id}`
        let { success } = await request(url)

        if (success) {
          orderList.value = orderList.value.filter((note) => note.id !== id)
          showSuccessToast('订单删除成功')
          getVisaOrderList()
        }
      } finally {
        return
      }
    })
    .catch(() => {})
}
</script>

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