<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '专家',
  },
  needLogin: true,
}
</route>
<template>
  <view class="h-screen flex flex-col bg-[#F9F9F9]">
    <view class="flex-1 m-[32rpx] rounded-t-[32rpx] gap-[30rpx] flex flex-col">
      <view
        class="flex items-start gap-[24rpx] pl-[24rpx] pr-[38rpx] pt-[24rpx] pb-[12rpx] bg-[#fff]"
        v-for="(item, index) in list"
        :key="item.id"
      >
        <view class="flex flex-col gap-[24rpx]">
          <image :src="item.pic" mode="aspectFit" class="w-[112rpx] h-[112rpx] rounded-full" />
          <button
            :class="`appointment-btn ${item.isAppointment ? 'bg-[#1580ff]!' : ''}`"
            @click="handleAppointment(item, index)"
          >
            <text v-if="!item.isAppointment">预约</text>
            <view class="i-carbon-checkmark text-[#fff] font-semibold" v-else></view>
          </button>
        </view>

        <view class="flex flex-col">
          <text class="text-[36rpx] font-semibold text-[#333]">{{ item.name }}</text>

          <view class="flex gap-[8rpx] mt-[14rpx]">
            <view
              v-for="(major, majorIndex) in item.majorTags.slice(0, 3)"
              :key="majorIndex"
              class="bg-[#f8f8f8] rounded-[4rpx] px-[16rpx] py-[4rpx] text-[#999] text-[20rpx]"
            >
              {{ major }}
            </view>
          </view>

          <view class="text-[22rpx] text-[#999] mt-[16rpx]">{{ item.summary }}</view>
        </view>
      </view>
    </view>

    <TabBar :current-page="1"></TabBar>
    <FabButton :initial-x="0" :initial-y="100" />
  </view>
</template>

<script lang="ts" setup>
import TabBar from '@/components/bar/TabBar.vue'
import FabButton from '@/components/fab/FabButton.vue'
import {
  addSpecial,
  deleteMyAppointment,
  getBusSpecialListGroup,
  getMySpecialList,
} from '@/service/index/api'
import { useUserStore } from '@/store/user'

const list = ref<any[]>([])
const userStore = useUserStore()
const show = ref(true)

onLoad(() => {
  getMySpecialList({
    openId: userStore.userInfo?.estimatedAchievement.wxId.toString(),
  }).then((_res) => {
    if (_res.code === 200) {
      let _mySpecialList = _res.result as any[]
      getBusSpecialListGroup().then((res) => {
        if (res.code === 200) {
          list.value = res.result as any[]
          list.value = list.value.map((item) => {
            let _mySpecial = _mySpecialList.find((_item) => _item.sId === item.id)
            return {
              ...item,
              isAppointment: !!_mySpecial,
              appointId: _mySpecial?.id,
            }
          })
        }
      })
    }
  })
})

const handleAppointment = (
  item: { id: number; isAppointment: boolean; appointId: number },
  index: number,
) => {
  if (item.isAppointment) {
    deleteMyAppointment({ id: item.appointId }).then((res) => {
      if (res.code === 200) {
        list.value[index].isAppointment = !item.isAppointment
      }
    })
  } else {
    addSpecial({
      sId: item.id,
      openId: userStore.userInfo?.estimatedAchievement.wxId.toString(),
      appointmentTime: '2025-07-31',
      isDelete: item.isAppointment,
    }).then((res) => {
      if (res.code === 200) {
        list.value[index].isAppointment = !item.isAppointment
        uni.showToast({
          title: item.isAppointment ? '预约成功' : '取消预约成功',
        })
      } else {
        uni.showToast({
          title: res.message,
          icon: 'none',
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.appointment-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 70rpx;
  border: 2rpx solid #1580ff;
  line-height: 1;
  font-size: 24rpx;
  color: #1580ff;
  width: 96rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
</style>
