<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '专家',
  },
}
</route>
<template>
  <view class="h-screen flex flex-col bg-[#F9F9F9] overflow-y-auto">
    <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'
import { formatTimeStr } from '@/utils/tools'

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

onShow(() => {
  if (!userStore.userInfo.openid) {
    getBusSpecialListGroup().then((res) => {
      if (res.code === 200) {
        list.value = res.result as any[]
      }
    })

    return
  }
  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,
) => {
  uni.showModal({
    title: '预约',
    content: item.isAppointment ? '是否取消预约' : '是否预约',
    success: (res) => {
      if (res.confirm) {
        if (item.isAppointment) {
          deleteMyAppointment({ id: item.appointId }).then((res) => {
            if (res.code === 200) {
              list.value[index].isAppointment = !item.isAppointment
              delete list.value[index].appointId
            }
          })
        } else {
          addSpecial({
            sId: item.id,
            openId: userStore.userInfo?.estimatedAchievement.wxId.toString(),
            appointmentTime: formatTimeStr(new Date(), 'YYYY-MM-DD'),
            isDelete: item.isAppointment,
          }).then((res) => {
            if (res.code === 200) {
              list.value[index].isAppointment = !item.isAppointment
              list.value[index].appointId = res.result
              uni.showModal({
                title: '预约成功',
                content: '稍后会有老师联系您',
                showCancel: false,
              })
            } else {
              uni.showToast({
                title: res.message,
                icon: 'none',
              })
            }
          })
        }
      } else if (res.cancel) {
      }
    },
  })
}
</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>
