<template>
  <u-navbar title="处方详情" :autoBack="true" bgColor="#0cb9d3" placeholder safeAreaInsetTop :titleStyle="{ color: '#ffffff00' }" leftIconColor="#fff" leftIcon="close"></u-navbar>

  <Prescription :PrescriptionDetail="PrescriptionDetail" :isRenew="Event.isRenew" :order="Event.order" />
  <!-- 录入快递单号 待发货 -->
  <view class="fixed-bottom" v-if="[null, undefined, ''].includes(PrescriptionDetail?.expressNo as string)&&[1,'1',2,'2'].includes(PrescriptionDetail?.formOrderState)">
    <view class="form-btns">
      <up-button color="#05B8D2" shape="circle" text="上传快递单号" throttleTime="1500" @click="showEnterState = true"></up-button>
    </view>
    <u-safe-bottom></u-safe-bottom>
  </view>
  <u-popup :show="showEnterState" @close="showEnterState = false" mode="bottom" closeIconPos="top-right" closeable round="20">
    <view class="enter">
      <view class="enter-title flexC">录入快递号</view>
      <view class="enter-input">
        <up-input placeholder="请输入快递公司" border="bottom" inputAlign="center" v-model="params.express"></up-input>
      </view>
      <view class="enter-input">
        <up-input placeholder="请输入快递号" border="bottom" inputAlign="center" v-model="params.expressNo"></up-input>
      </view>
      <up-button color="#05B8D2" shape="circle" text="保存" throttleTime="1500" @click="confirmuUpdataPrescription_expressHandler"></up-button>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { getPrescription_detail, updataPrescription_express, getPrescription_detail_information_renew, updatePrescription_renew_express } from '../../api'
import { Prescription_expressType, PrescriptionDetailType } from '../../types'
import Prescription from './com/Prescription.vue'

interface EventType {
  id: string
  isShowUpload?: string
  isRenew?: string
  orderRenewId?: string
  order?: string
}

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

const Event = ref<EventType>({ id: '', isShowUpload: '' })

const params = ref<Prescription_expressType>({
  id: '',
  express: '',
  expressNo: ''
})

const PrescriptionDetail = ref<PrescriptionDetailType>()

const showEnterState = ref(false)

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

  PrescriptionDetail.value = result
}

const getRenewDetailHandler = async () => {
  const { result } = await getPrescription_detail_information_renew({ orderRenewId: Event.value.orderRenewId as string })

  PrescriptionDetail.value = result
}

const confirmuUpdataPrescription_expressHandler = async () => {
  if (!params.value.express.length || !params.value.expressNo.length) return uni.$u.toast('请完成填写快递信息')

  if (Event.value?.isRenew === 'success') {
    await updatePrescription_renew_express({ ...params.value, id: PrescriptionDetail.value?.orderRenewId })
  } else {
    await updataPrescription_express({ ...params.value, id: Event.value?.id })
  }

  uni.$u.toast('录入成功')

  showEnterState.value = false

  // if (typeof Event.value.isShowUpload === 'string') {
  Event.value.isShowUpload = ''

  if (Event.value.isRenew === 'success' && Event.value.orderRenewId?.length) {
    getRenewDetailHandler()

    return
  }
  getDetailHandler()
  // }
}

onLoad((e: EventType) => {
  Event.value = e
  // isRenew success => 续方
  if (e.isRenew === 'success' && e.orderRenewId?.length) {
    getRenewDetailHandler()

    return
  }
  getDetailHandler()
})
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}
:deep(.u-input__content__field-wrapper__field) {
  color: #323233;
  font-size: 50rpx !important;
  font-weight: 700;
}

.enter {
  box-sizing: border-box;
  padding: 32rpx;
  &-input {
    margin-bottom: 90rpx;
  }
  &-title {
    color: #323233;
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 68rpx;
  }
}
</style>