<template>
  <view class="orderCard">
    <view class="flexJ" style="margin-bottom: 50rpx" @click="clickOrderItemHandler">
      <view class="flexA">
        <image :src="proxy.$h.downFile(props.item?.user?.avatar) || '/static/images/mAvatar.png'" mode="aspectFill" />
        <view>
          <view class="flexA" style="margin-bottom: 8rpx">
            <view class="username">{{ props.item?.nickName || '' }}</view>
            <view class="blueTag tag">{{ proxy.$h.optObjectValue('consultationWay', props.item?.consultationWay) || '未设置' }}</view>
          </view>
          <view class="graytext">{{ props.item?.time || '' }}</view>
        </view>
      </view>
      <view class="blueSText" v-if="!props.isPrescriptionDrug" :style="{ color: [40, '40'].includes(props.item?.orderState) ? '#999' : '#05b8d2' }">{{ proxy.$h.optObjectValue('orderState', props.item?.orderState) || '未知' }}</view>
      <view class="blueSText" v-else>{{ proxy.$h.optObjectValue('state', props.item?.orderState) || '未知' }}</view>
    </view>

    <view style="margin-bottom: 16rpx; display: flex" @click="clickOrderItemHandler">
      <view class="messagetext flex1">
        <text class="graytext">就诊宠物：</text>
        <!-- 蓝猫/2岁/女绝/育/1kg -->
        {{ props.item?.petName || '姓名未知' }}/{{ props.item?.petClass || '姓名未知' }}/{{ props.item?.age || '年龄未知' }}/ {{ proxy.$h.optObjectValue('petSex', props.item?.petSex) || '性别未知' }} /
        {{ proxy.$h.optObjectValue('isSterilization', props.item?.isSterilization) || '是否绝育未知' }}/
        {{ props.item?.weight ? props.item?.weight + 'kg' : '体重未知' }}
      </view>
      <view class="repeatPay flexC" v-if="props.item?.isAgainInformation === 1">复诊</view>
      <view class="repeatPay flexC" v-if="props.item?.isAgain === 1">续方</view>
    </view>
    <view class="flexA" v-if="!props.isPrescriptionDrug" @click="clickOrderItemHandler">
      <view class="messagetext">
        <text class="graytext">病情描述：</text>
        {{ props.item?.supplement || '暂无' }}
      </view>
    </view>
    <view v-if="props.isPrescriptionDrug" class="flexA PrescriptionDrug" @click.stop="showPrescriptionDetailHandler">
      <view>已开具处方药({{ props.item?.drugList.length }}个)</view>
      <u-icon name="arrow-right" size="16" color="#05B8D2"></u-icon>
    </view>
    <u-line margin="32rpx 0 22rpx 0"></u-line>
    <view class="moneytext flexD" v-if="!props.isPrescriptionDrug && !props.isRecord">¥{{ props.item?.award || 0 }}/预计收入</view>
    <view class="flexD">
      <view class="flexW" v-if="!props.isPrescriptionDrug">
        <up-button type="info" v-if="props.item?.orderId !== null" shape="circle" text="处方单" throttleTime="1500" :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx' }" @click="showPrHandler"></up-button>
        <up-button type="info" @click="clickOrderItemHandler" shape="circle" text="查看症状" throttleTime="1500" :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx' }"></up-button>
        <up-button type="info" v-if="props.isRecords === 'success'" @click="AcceptHandler('success')" shape="circle" text="问诊记录" throttleTime="1500" :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx' }"></up-button>
        <up-button color="#05B8D2" v-if="[20, '20'].includes(props.item?.orderState)" @click="AcceptHandler('err')" shape="circle" text="接诊" throttleTime="1500" :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx' }"></up-button>
        <up-button
          color="#05B8D2"
          v-if="[30, '30'].includes(props.item?.orderState) && [null, undefined, ''].includes(props.item?.orderId)"
          @click="
            () => {
              sendPrescriptionState = true
              isOneP = 1
              emit('editIsJumpHandler', 'err')
            }
          "
          shape="circle"
          text="填写处方单"
          throttleTime="1500"
          :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx' }"
        ></up-button>
        <up-button
          color="#05B8D2"
          v-if="[30, '30'].includes(props.item?.orderState)"
          @click="getEndInformationHandler"
          plain
          shape="circle"
          text="结束问诊"
          throttleTime="1500"
          :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx', fontWeight: 700 }"
        ></up-button>
      </view>
      <view class="flexA" v-else>
        <up-button
          type="info"
          shape="circle"
          v-if="[null, '', undefined].includes(props.item?.expressNo) && [1, '1', 2, '2'].includes(props.item?.orderState)"
          text="上传单号"
          throttleTime="1500"
          :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx' }"
          @click="proxy.$h.jumpUrl(`/pages2/order/PrescriptionDetail?id=${props.item.id}&isShowUpload=success&orderRenewId=${props.item.orderRenewId}&isRenew=${props.item?.isAgain == 1 ? 'success' : 'err'}&order=Prescription`)"
        ></up-button>
        <up-button type="info" shape="circle" text="查看详情" throttleTime="1500" :customStyle="{ width: '170rpx', height: '64rpx', marginRight: '20rpx' }" @click="clickOrderItemHandler"></up-button>
      </view>
    </view>
  </view>

  <u-modal :show="showPrescriptionDetailState" :title="`处方单详情`" @confirm="showPrescriptionDetailState = false">
    <ViewPrescription :orderId="props.item?.id" @click="showPrescriptionDetailState = false" />
  </u-modal>
  <u-popup :show="sendPrescriptionState" @close="sendPrescriptionState = false" mode="bottom" closeIconPos="top-right" closeable round="20">
    <SendPrescription :orderId="props.item?.id" @closeSendPrescriptionHandler="closeSendPrescriptionHandler" />
  </u-popup>
  <u-popup :show="showPrescriptionState" @close="showPrescriptionState = false" mode="bottom" closeIconPos="top-right" closeable round="20">
    <Prescription
      :showTopState="false"
      :PrescriptionDetail="PrescriptionDetail"
      bg="linear-gradient(188deg, #E0FFF4 5.54%, #FFF 24.89%)"
      :title="`${PrescriptionDetail?.user?.nickname}的处方单`"
      :isRenew="props.item.isAgain == 1 ? 'success' : 'err'"
      :showStep="`err`"
      :isAgainInformation="props.item?.isAgainInformation"
    />
  </u-popup>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useOrderStore } from '@/store/order'
import { getPrescription_detail_information, getEndInformation, getReceive_diagnosis, getPrescription_detail, getPrescription_detail_information_renew, getOrder_chat } from '../../../api'
import { PrescriptionDetailType } from '../../../types'
import SendPrescription from '@/components/SendPrescription'
import ViewPrescription from '@/components/ViewPrescription'
import Prescription from './prescription.vue'
import { imlogin } from '../../../hooks/imLogin'

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

const emit = defineEmits(['showPrescription', 'fetchOrderListHandler', 'editIsJumpHandler'])

const orderStore = useOrderStore()

const showPrescriptionDetailState = ref<boolean>(false)

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

interface IProps {
  isPrescriptionDrug: boolean
  isRecord: boolean
  bg: string
  item: any
  isRecords?: string
}

const props = withDefaults(defineProps<IProps>(), {
  isPrescriptionDrug: false,
  isRecord: false,
  bg: '#fff',
  item: {},
  isRecords: 'err'
})

const isOneP = ref<number>(0)

const sendPrescriptionState = ref<boolean>(isOneP.value === 0 ? false : true)

const CustomBackground = ref(props.bg)

const showPrescriptionState = ref<boolean>(false)

const PrescriptionDetail = ref<PrescriptionDetailType>()

const showPrescriptionDetailHandler = async () => {
  if (props.item?.isAgain == 1) {
    getRenewDetailHandler()
  } else {
    getDetailHandler()
  }

  showPrescriptionState.value = true
}

const showPrHandler = async () => {
  const { result } = await getPrescription_detail_information({ id: props.item?.id })

  PrescriptionDetail.value = result

  showPrescriptionState.value = true
}

const closeSendPrescriptionHandler = () => {
  sendPrescriptionState.value = false

  emit('fetchOrderListHandler')
}

const AcceptHandler = async (historyFlag: string) => {
  uni.setStorageSync('history', historyFlag)

  await getReceive_diagnosis({ id: props.item.id })

  uni.setStorageSync('inUserInfo', props.item?.user)

  const { consultationWay, imUserId, id } = props.item

  // imlogin(consultationWay, imUserId, id)
  uni.navigateTo({
    url: `/TUIKit/TUIPages/TUIConversation/index?imUserId=${imUserId}&consultationWay=${consultationWay}&orderId=${id}`
  })
}

const clickOrderItemHandler = () => {
  const isAgain = props.item?.isAgain == 1 ? 'success' : 'err'

  const orderRenewId = props.item?.orderRenewId

  const order = 'Prescription'

  const url = { 0: `/pages2/order/symptomDetail?id=${props.item.id}`, 1: `/pages2/order/PrescriptionDetail?id=${props.item.id}&orderRenewId=${orderRenewId}&isRenew=${isAgain}&order=${order}` }

  proxy.$h.jumpUrl(url[orderState.value])
}

const getRenewDetailHandler = async () => {
  const { result } = await getPrescription_detail_information_renew({ orderRenewId: props.item?.orderRenewId })

  PrescriptionDetail.value = result
}

const getDetailHandler = async () => {
  const { result }: { result: PrescriptionDetailType } = await getPrescription_detail({ id: props.item?.id })

  PrescriptionDetail.value = result
}

const getEndInformationHandler = async () => {
  uni.showModal({
    title: '提示',
    content: '您确定要结束问诊吗',
    success: async function (res: any) {
      if (res.confirm) {
        try {
          await getEndInformation({ id: props.item.id })
          emit('fetchOrderListHandler')
        } catch (error) {
          uni.$u.toast(error)
        }
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.mb24 {
  margin-bottom: 24rpx;
}
.text {
  color: #323233;
  font-size: 28rpx;
  font-weight: 700;
}
.blacktext {
  color: #323233;
  font-size: 30rpx;
  font-weight: 700;
}
.graytext {
  color: #999999;
  font-size: 24rpx;
  font-weight: 700;
}
.list {
  width: 460rpx;
  box-sizing: border-box;
  padding: 34rpx 28rpx;
  background: #f8f8fa;
  margin-bottom: 32rpx;
}
.orderCard {
  box-sizing: border-box;
  padding: 28rpx 24rpx 24rpx;
  background: v-bind(CustomBackground);
  border-radius: 24rpx;
  margin-bottom: 22rpx;
  .repeatPay {
    box-sizing: border-box;
    padding: 0 8rpx;
    border-radius: 6rpx;
    background: #faf4e9;
    color: #f4a712;
    font-size: 24rpx;
    font-weight: 700;
    margin-left: 16rpx;
    height: min-content;
  }
  .tag {
    color: #05b8d2;
    font-size: 22rpx;
    font-weight: 700;
  }
  .moneytext {
    color: #f33f2e;
    font-size: 28rpx;
    font-weight: 700;
    margin-bottom: 24rpx;
  }
  .PrescriptionDrug {
    color: #05b8d2;
    font-size: 26rpx;
    font-weight: 700;
  }
  .messagetext {
    color: #666666;
    font-size: 26rpx;
    font-weight: 700;
    @include oneLine(2);
  }
  .graytext {
    color: #999999;
    font-size: 26rpx;
  }
  .username {
    color: #323233;
    font-size: 30rpx;
    font-weight: 700;
    margin-right: 16rpx;
  }
  .blueSText {
    color: #05b8d2;
    font-size: 26rpx;
    font-weight: 700;
  }
  .graySText {
    color: #999999;
    font-size: 26rpx;
    font-weight: 700;
  }
  image {
    width: 92rpx;
    height: 92rpx;
    margin-right: 16rpx;
    border-radius: 50%;
  }
}
</style>