<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/commentEmpty.png'" mode="aspectFill" />
        <view>
          <view class="flexA" style="margin-bottom: 8rpx">
            <view class="username">{{ props.item?.user?.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">{{ proxy.$h.optObjectValue('renewExamineState', props.item?.renewExamineState) }}</view>
    </view>

    <view class="flexA" style="margin-bottom: 16rpx" @click="clickOrderItemHandler">
      <view class="messagetext">
        <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?.isAgain === 1">复购</view> -->
    </view>
    <view 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 v-if="[2, '2'].includes(props.item.renewExamineState as string)" style="font-size: 20rpx">驳回原因：{{ props.item.examineRemark }}</view>
    <view class="flexD">
      <view class="flexA">
        <!-- <up-button type="info" @click="clickOrderItemHandler" plain shape="circle" text="查看" throttleTime="1500" :customStyle="{ width: '170rpx', marginRight: '20rpx', fontWeight: 700 }"></up-button> -->
        <up-button
          v-if="['0', 0].includes(props.item?.renewExamineState as number)"
          color="#05B8D2"
          plain
          shape="circle"
          text="审核"
          throttleTime="1500"
          :customStyle="{ width: '170rpx', marginRight: '20rpx', fontWeight: 700 }"
          @click=";(showExamineState = true), (params.id = props.item?.id)"
        ></up-button>
      </view>
    </view>
  </view>
  <u-modal :show="showExamineState" title=" " showCancelButton @cancel="showExamineState = false" @confirm="confirmSubmitExamineHandler">
    <view class="slot-content flexACol" style="width: 100%">
      <view class="flexA">
        <u-radio-group v-model="params.state" placement="row">
          <u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.value"></u-radio>
        </u-radio-group>
      </view>
      <SendPrescription isRenew="success" v-if="params.state !== '2'" :drugList="props.item?.drugList" :renewRemark="props.item?.renewRemark" ref="sendPrescriptionRef" />
      <view style="width: 100%">
        <u-textarea v-model="params.reason" placeholder="请输入驳回原因" v-if="params.state === '2'"></u-textarea>
      </view>
    </view>
  </u-modal>
  <u-popup :show="showPrescriptionState" @close="showPrescriptionState = false" mode="bottom" closeIconPos="top-right" closeable round="20">
    <Prescription :showTopState="false" :PrescriptionDetail="PrescriptionDetail" :isRenew="isRenew" bg="linear-gradient(188deg, #E0FFF4 5.54%, #FFF 24.89%)" :title="`${props.item.user?.nickName}的处方单`" showStep="err" :showX="true" />
  </u-popup>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance, reactive } from 'vue'
import { RenewListType, ExamineRenewOrderType, PrescriptionDetailType } from '../../../types'
import { getOrder_renew_list, getOrder_renew_examine, getPrescription_detail_information_renew, getPrescription_detail } from '@/api'
import SendPrescription from '@/components/SendPrescription'
import Prescription from './Prescription.vue'

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

const emit = defineEmits(['showPrescription', 'confirmSubmitExamineOrderStateHandler'])

interface IProps {
  isPrescriptionDrug: boolean
  isRecord: boolean
  bg: string
  item: RenewListType
}

const sendPrescriptionRef = ref<InstanceType<typeof SendPrescription>>()

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

const CustomBackground = ref(props.bg)

const showExamineState = ref<boolean>(false)

const isRenew = ref<string>('err')

const radiolist1 = reactive([
  { name: '通过', value: '1' },
  { name: '驳回', value: '2' }
])

const params = ref<ExamineRenewOrderType>({ id: '', state: '', reason: '' })

const showPrescriptionState = ref<boolean>(false)

const PrescriptionDetail = ref<PrescriptionDetailType>()

const showPrescriptionDetailHandler = async () => {
  const renewExamineState = props.item?.renewExamineState as string | number
  if ([2, '2'].includes(renewExamineState)) {
    getPDetailHandler()
    isRenew.value = 'err'
  } else if ([0, '0', 1, '1'].includes(renewExamineState)) {
    getDetailHandler()
    isRenew.value = 'err'
  }

  showPrescriptionState.value = true
}

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

  PrescriptionDetail.value = result
}

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

  PrescriptionDetail.value = result
}

const confirmSubmitExamineHandler = async () => {
  if (params.value.state === '') return uni.$u.toast('请选择审核状态')

  if (params.value.state === '2' && params.value.reason.length === 0) return uni.$u.toast('驳回原因不能为空')

  let successData = {}

  if (params.value.state === '1') {
    const { drugList, prescriptionAmount } = sendPrescriptionRef.value?.form

    successData = { renewDrugList: drugList ?? null, prescriptionRenewAmount: prescriptionAmount ?? null }
  }

  const data = { ...params.value, ...successData, id: props.item?.orderRenewId }

  await getOrder_renew_examine(data)

  showExamineState.value = false

  uni.$u.toast(params.value.state === '2' ? '已驳回' : '审核成功')

  emit('confirmSubmitExamineOrderStateHandler')
}

const clickOrderItemHandler = () => {
  // const renewExamineState = props.item?.renewExamineState as string | number
  // const isRenew = [0, '0', 2, '2'].includes(renewExamineState) ? 'err' : 'success'
  // proxy.$h.jumpUrl(`/pages2/order/PrescriptionDetail?isRenew=success&orderRenewId=${props.item?.orderRenewId}`)
}
</script>

<style lang="scss" scoped>
.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;
  }
  .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;
    flex: 1;
  }
  .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>