<template>
  <view class="flexA topbg" v-if="props.showTopState">
    <image src="/static/images/pic.png" mode="scaleToFill" />
    <view>{{ proxy.$h.optObjectValue(props.order === 'Prescription' ? 'state' : 'renewExamineState', props.order === 'Prescription' ? PrescriptionDetail?.formOrderState : PrescriptionDetail?.state) }}</view>
  </view>
  <view class="Prescription">
    <view class="Prescription-title flexC" v-if="props.title">{{ props.title }}</view>

    <template v-if="!props.showX && props.isRenew != 'success'">
      <view class="text mb24">问诊病情：</view>
      <view class="text mb24">{{ PrescriptionDetail?.prescriptionForm || '病情描述' }}</view>
    </template>
    <template v-if="!['success'].includes(props.isRenew) && ![null, undefined, ''].includes(PrescriptionDetail?.supplement) && props.showX">
      <view class="text mb24">{{ props.showX ? '续方原因' : '问诊病情' }}：</view>
      <view class="text mb24">{{ props.showX ? PrescriptionDetail?.renewRemark : PrescriptionDetail?.supplement }}</view>
    </template>
    <template v-if="![null, undefined, ''].includes(PrescriptionDetail?.renewRemark) && ['success'].includes(props.isRenew)">
      <view class="text mb24">续方原因：</view>
      <view class="text mb24">{{ PrescriptionDetail?.renewRemark }}</view>
    </template>
    <view class="text mb24">处方药:</view>
    <view class="list br24">
      <view
        class="flexJ"
        v-for="(_, index) in props.isRenew === 'err' ? PrescriptionDetail?.drugList : PrescriptionDetail?.renewDrugList"
        :key="index"
        :style="index === (props.isRenew === 'err' ? PrescriptionDetail?.drugList : PrescriptionDetail?.renewDrugList)?.length as number - 1 ? 'margin-bottom: 0rpx' : 'margin-bottom: 42rpx'"
      >
        <view>
          <view class="blacktext" style="margin-bottom: 8rpx">{{ _.name || '' }}</view>
          <view class="graytext">{{ _.des || '' }}</view>
        </view>
        <view>
          <view class="blacktext" style="margin-bottom: 8rpx">¥{{ parseFloat(_.amount).toFixed(2) || 0 }}</view>
          <view class="graytext">x{{ _.num || 0 }}</view>
        </view>
      </view>
    </view>
    <view>
      <view class="text" style="margin-bottom: 12rpx">处方单证明：</view>
      <view class="flexW">
        <template v-if="typeof PrescriptionDetail?.prescriptionFile === 'string'">
          <template v-for="_ in PrescriptionDetail?.prescriptionFile.split(',')">
            <image :src="proxy.$h.downFile(_)" mode="aspectFill" @click="proxy.$h.previewImage(proxy.$h.downFile(_))" class="zmimg" />
          </template>
        </template>
      </view>
    </view>
    <view class="flexJ mb24" style="margin-top: 24rpx">
      <view class="text">总金额</view>
      <view class="blacktext">¥{{ parseFloat(PrescriptionDetail?.amount).toFixed(2) || '0.00' }}</view>
    </view>

    <!-- <view class="flexJ mb24">
        <view class="text">运费</view>
        <view class="blacktext">¥0</view>
      </view> -->
    <view class="flexJ mb24" v-if="![null, undefined, '0', ''].includes(PrescriptionDetail?.pid) && ![null, undefined, '', 0, '0'].includes(props.isAgainInformation)">
      <view class="text">复诊时间</view>
      <view class="graytext">{{ PrescriptionDetail?.createTime }}</view>
    </view>
    <view class="flexJ mb24">
      <view class="text">开具时间</view>
      <view class="graytext">{{ PrescriptionDetail?.prescriptionFormDate }}</view>
    </view>
    <template v-if="props.showStep !== 'err' && ![0, '0', 4, '4'].includes(PrescriptionDetail?.formOrderState)">
      <view class="flexJ mb24">
        <view class="text">快递单号</view>
        <view class="graytext">
          {{ ![null, undefined, ''].includes(PrescriptionDetail?.expressNo as any) ? PrescriptionDetail?.expressNo : '未填写快递号' }}
          <text class="text" v-if="![null, undefined, ''].includes(PrescriptionDetail?.expressNo as any)" @click="proxy.$h.copyText(PrescriptionDetail?.expressNo)">复制</text>
        </view>
      </view>
      <view class="flexJ mb24">
        <view class="text">物流状态</view>
        <view class="graytext">{{ proxy.$h.optObjectValue('state', props.PrescriptionDetail?.formOrderState) }}</view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import type { PrescriptionDetailType } from '../../../types'
import { ref, getCurrentInstance, ComponentPublicInstance, computed } from 'vue'
const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

interface IProps {
  bg: string
  title?: string
  PrescriptionDetail?: PrescriptionDetailType
  isRenew: string
  showTopState: boolean
  showStep?: string
  order?: string
  showX?: boolean
  isAgainInformation?: string | number
}
const props = withDefaults(defineProps<IProps>(), {
  bg: '#fff',
  isRenew: 'err',
  showTopState: true,
  showStep: 'success',
  order: 'xf',
  showX: false,
  isAgainInformation: 0
})

const amount = computed(() => {
  const list = props.isRenew === 'err' ? props.PrescriptionDetail?.drugList : props.PrescriptionDetail?.renewDrugList

  return Array.isArray(list) && list.length && list.reduce((acc, item) => acc + parseFloat(item.amount) * item.num, 0)
})

const CustomBackground = ref(props.bg)
</script>

<style lang="scss" scoped>
.topbg {
  box-sizing: border-box;
  padding: 38rpx 32rpx;
  background: #0cb9d3;
  color: #ffffff;
  font-size: 40rpx;
  font-weight: 700;
  image {
    width: 52rpx;
    height: 52rpx;
    margin-right: 16rpx;
  }
}
.Prescription {
  box-sizing: border-box;
  padding: 72rpx 32rpx 0;
  background: v-bind(CustomBackground);
  border-radius: 24rpx 24rpx 0 0;
  &-title {
    color: #323233;
    font-size: 34rpx;
    font-weight: 700;
    margin-bottom: 48rpx;
    margin-top: -40rpx;
  }
  .zmimg {
    width: 210rpx;
    height: 210rpx;
    border-radius: 24rpx;
    margin-right: 16rpx;
  }
  .mb24 {
    margin-bottom: 24rpx;
  }
  .text {
    color: #323233;
    font-size: 28rpx;
  }
  .blacktext {
    color: #323233;
    font-size: 30rpx;
  }
  .graytext {
    color: #999999;
    font-size: 24rpx;
    font-weight: 700;
  }
  .list {
    box-sizing: border-box;
    padding: 34rpx 28rpx;
    background: #f8f8fa;
    margin-bottom: 32rpx;
  }
}
</style>