<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我的志愿表',
  },
}
</route>

<template>
  <scroll-view scroll-y class="bg-[#f8f8f8] h-screen">
    <view class="px-[32rpx] mt-[32rpx] flex flex-col gap-[16rpx]">
      <view
        class="flex gap-[24rpx] wish-border justify-between p-[32rpx] rounded-[8rpx]"
        v-for="(item, index) in wishList"
        :key="index"
        @click="toWishPage(item)"
      >
        <view>
          <view class="flex gap-[18rpx] items-center">
            <text class="text-[#303030] text-[32rpx] font-semibold">{{ item.tableName }}</text>
            <view
              class="bg-[#F8F8F8] text-[20rpx] text-[#636363] px-[8rpx] py-[4rpx] rounded-[8rpx]"
            >
              {{ userStore.userInfo.estimatedAchievement.provinceName }}·{{ item.type }}
            </view>
          </view>
          <view class="text-[22rpx] text-[#303030] mt-[14rpx] mb-[22rpx]">
            <text>{{ item.score }}</text>
            <text class="ml-[24rpx]">{{ item.subjectClaim.split(',').join('/') }}</text>
          </view>
          <text class="text-[22rpx] text-[#303030]">{{ item.createTime || '时间消失了' }}</text>
        </view>
        <view class="flex flex-col justify-between items-end">
          <view class="i-carbon-trash-can" @click.stop="handleDelete(item, index)"></view>
          <button class="download-btn" @click.stop="handleDownload(item)">下载PDF</button>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { deleteWishList, getWishList } from '@/service/index/api'
import { useUserStore } from '@/store'
import { downloadPDF } from '@/service/index/api'

const userStore = useUserStore()

const wishList = ref([])

onLoad(() => {
  getWishList().then((res) => {
    if (res.code === 200) {
      wishList.value = res.result as any[]
    }
  })
})

const handleDelete = (item, index) => {
  deleteWishList({ id: item.vId }).then((res) => {
    if (res.code === 200) {
      wishList.value.splice(index, 1)
      uni.showToast({ title: '删除成功' })
    }
  })
}

const handleDownload = (item) => {
  downloadPDF({
    id: item.vId,
    location: userStore.userInfo.estimatedAchievement.provinceCode,
  }).then((res) => {
    if (res.code === 200) {
      uni.showToast({
        title: '下载中...',
      })
      uni.downloadFile({
        url: res.result as string,
        filePath: '',
        success: function (res) {
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: res.tempFilePath,
              showMenu: true,
              success: function () {
                console.log('打开文档成功')
                uni.hideLoading()
              },
              fail: function () {
                uni.showToast({
                  title: '暂不支持此类型',
                  duration: 2000,
                  icon: 'none',
                })
                uni.hideLoading()
              },
            })
          }
        },
        fail: function (res) {
          console.log(res) //失败
        },
      })
    }
  })
}

const toWishPage = (item: any) => {
  uni.navigateTo({
    url: `/pages-sub/home/wishesList/wishesList?typeName=${item.type}&editType=edit&id=${item.vId}`,
  })
}
</script>

<style lang="scss" scoped>
.download-btn {
  border-radius: 8rpx;
  border: 2rpx solid #1580ff;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  line-height: 1;
  padding: 12rpx 16rpx;
  height: max-content;
  color: #1580ff;
}

.wish-border {
  background-color: #ffffff;
  border-radius: 8rpx;
}
</style>
