<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我的预约',
  },
}
</route>

<template>
  <scroll-view scroll-y class="pb-safe 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] items-end"
        v-for="(item, index) in appointList"
        :key="index"
      >
        <view class="flex flex-col gap-[14rpx]">
          <text class="text-[#303030] text-[32rpx] font-semibold">
            {{ item.sIdName }}
          </text>
          <text class="text-[22rpx] text-[#303030]">
            {{ item.appointmentTime || '时间消失了' }}
          </text>
        </view>
        <view class="flex flex-col justify-between items-center">
          <button class="download-btn" @click="handleDelete(item, index)">取消预约</button>
        </view>
      </view>
    </view>

    <view
      class="flex flex-col items-center justify-center mt-[40%]"
      v-if="appointList.length === 0"
    >
      <image
        src="data:image/png;base64,[encoded data, 7048 characters]"
        mode="scaleToFill"
        class="w-[240rpx] h-[240rpx]"
      />
      <text class="text-[28rpx] text-[#aaa]">没有数据哦~</text>
    </view>
  </scroll-view>
</template>

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

const userStore = useUserStore()

const appointList = ref([])

onLoad(() => {
  getMySpecialList({ openId: userStore.userInfo?.estimatedAchievement.wxId.toString() }).then(
    (res) => {
      if (res.code === 200) {
        appointList.value = res.result as any[]
      }
    },
  )
})

const handleDelete = (item, index) => {
  deleteMyAppointment({
    id: item.id,
  }).then((res) => {
    if (res.code === 200) {
      appointList.value.splice(index, 1)
      uni.showToast({ title: '删除成功' })
    }
  })
}
</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>
