<template>
  <u-navbar title="问诊记录" :autoBack="true" bgColor="#ffffff" placeholder safeAreaInsetTop :titleStyle="{ color: Event?.isRecords === 'success' ? '#000' : '#fff' }"></u-navbar>
  <u-sticky bgColor="#fff" v-show="Event?.isRecords !== 'success'">
    <view class="flexA topmain">
      <view class="title" v-for="(_, index) in orderStateList" :key="index" @click="toggleOrderHandler(_, index)" :class="{ activeTitle: orderState === index }">{{ _.title }}</view>
    </view>
    <u-tabs
      :list="orderStateList[orderState].data"
      @click="clickOrderStateHandler"
      lineColor="#05B8D2"
      lineWidt="18"
      lineHeight="3"
      :current="subOrderState"
      :scrollable="false"
      :activeStyle="{ fontSize: '26rpx', color: '#323233', fontWeight: 700 }"
      :inactiveStyle="{ fontSize: '26rpx', color: '#666666' }"
    ></u-tabs>
  </u-sticky>
  <view class="order">
    <template v-if="orderList.length">
      <template v-for="_ in orderList">
        <OrderCard
          :isPrescriptionDrug="Boolean(orderState)"
          :isRecords="Event?.isRecords"
          :bg="Event?.isRecords === 'success' ? 'linear-gradient(188deg, #E0FFF4 5.54%, #FFF 24.89%)' : '#fff'"
          :isRecord="false"
          :item="_"
          @editIsJumpHandler="e => (isJump = e)"
          @fetchOrderListHandler="orderStore.getOrderListHandler(true, orderState, subOrderState)"
        />
      </template>
    </template>
    <template v-else>
      <Empty :text="Event?.isRecords !== 'success' ? '暂无订单信息' : '暂无问诊记录'" />
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onLoad, onReachBottom, onUnload, onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useOrderStore } from '../../store/order'
import type { SubOrderTabsType } from '@/types'
import OrderCard from './com/OrderCard.vue'
import Empty from '@/components/Empty.vue'
import { imlogin } from '../../hooks/imLogin'

interface EventType {
  orderState: string
  subOrderState?: string
  isRecords?: string
  isJump?: string
}

const Event = ref<EventType>()

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const orderStore = useOrderStore()

const { orderStateList, orderState, subOrderState, page, orderList } = storeToRefs(orderStore)

const isJump = ref<string | undefined>('err')

const toggleOrderHandler = (item: any, index: number) => {
  console.log(item, index)

  orderState.value = index

  subOrderState.value = 0

  orderStore.getOrderListHandler(true, orderState.value, subOrderState.value)
}

const clickOrderStateHandler = (e: SubOrderTabsType) => {
  page.value = 1

  subOrderState.value = e.index

  orderStore.getOrderListHandler(true, orderState.value, e.index)
}

onLoad((e: EventType) => {
  console.log(e)
  Event.value = e

  isJump.value = e.isJump

  orderState.value = Number(e.orderState)

  subOrderState.value = Number(e.subOrderState) || 0
})

onShow(() => {
  console.log(uni.$TIM.EVENT.SDK_READY, '什么数据')

  setTimeout(() => {
    uni.$TUIKit.getUserStatus({ userIDList: [uni.getStorageSync('ImUserId')] }).catch(err => imlogin())
  }, 800)

  if (subOrderState.value == 2 && orderState.value == 0 && isJump.value === 'err') return

  orderStore.getOrderListHandler(true, orderState.value, subOrderState.value)
})

onReachBottom(() => {
  orderStore.getOrderListHandler(false, orderState.value, subOrderState.value)
})
</script>

<style>
page {
  background: #f7f8fa !important;
}
</style>

<style lang="scss" scoped>
.topmain {
  box-sizing: border-box;
  padding: 8rpx 24rpx;
}
.title {
  font-weight: 700;
  color: #999999;
  font-size: 32rpx;
  margin-right: 62rpx;
}
.activeTitle {
  font-size: 52rpx;
  color: #26292c;
}
.order {
  box-sizing: border-box;
  padding: 20rpx 24rpx;
}
</style>