<template>
  <view class="main1" :style="props.isRenew === 'success' ? 'transform: scale(0.9);' : ''">
    <template v-if="props.isRenew !== 'success'">
      <view class="formTitle">{{ props.detailData?.user.nickname || props.detailData?.user?.nickName || '' }}开处方单</view>
      <view class="formSubTitle">认证用户 未接诊可退出 不满意可申诉</view>
      <view class="main1-title">问诊病情</view>
      <view style="width: 94%">
        <u-textarea v-model="form.prescriptionForm" placeholder="请输入问诊病情(200字以内)" border="none" maxlength="200" count></u-textarea>
      </view>
    </template>
    <template v-else>
      <view class="formTitle">申请续方原因</view>
      <view class="formSubTitle">{{ props?.renewRemark }}</view>
    </template>
    <view class="main1-title">处方药</view>

    <view v-for="(_, index) in form.drugList">
      <view class="flexC grayinput1" style="width: 90%; margin-left: 50rpx">
        <up-input placeholder="输入药物名称" v-model="form.drugList[index].name" border="none"></up-input>
      </view>
      <view class="flexA" style="margin-bottom: 18rpx">
        <view style="margin-right: 18rpx">
          <u-icon name="minus-circle-fill" size="18" color="#CDCDCD" @click="form.drugList.length > 1 && form.drugList.splice(index, 1)"></u-icon>
        </view>

        <view class="flexC grayinput">
          <up-input @change="computedTotalHandler" placeholder="价格" type="number" border="none" v-model="form.drugList[index].amount">
            <template #prefix>
              <text>¥</text>
            </template>
          </up-input>
        </view>
        <view class="flexC grayinput">
          <up-input @change="computedTotalHandler" placeholder="输入药物数量" border="none" type="number" v-model="form.drugList[index].num"></up-input>
        </view>
      </view>
      <view style="width: 86%; margin-left: 50rpx">
        <u-textarea v-model="form.drugList[index].des" placeholder="输入说明" border="none" maxlength="200"></u-textarea>
      </view>
    </view>

    <view class="flexC addblueBtn" v-if="props.isRenew !== 'success'">
      <view class="flexA" @click="form.drugList.push({ name: '', des: '', amount: 0, num: 0 })">
        <u-icon name="plus-circle" size="18" color="#05B8D2"></u-icon>
        <view class="bluetext">添加处方药</view>
      </view>
    </view>

    <!-- 复诊时间 暂不开放 -->
    <!-- <view class="flexJ" style="margin: 32rpx 0">
        <view>复诊时间：</view>
        <view style="width: 30vw" class="flexD">
          <view style="color: #a6a6a6">选填</view>
          <u-icon name="arrow-right" size="18" color="#a6a6a6"></u-icon>
        </view>
      </view> -->
    <template v-if="props.isRenew !== 'success'">
      <view class="main1-title">处方单证明:</view>

      <view class="flexA">
        <view class="flexA fileImg" v-for="(_, index) in form.file">
          <image :src="proxy.$h.downFile(_)" class="fileimage" mode="aspectFill" />
          <image src="/static/images/close.png" class="closeimg" mode="scaleToFill" @click="form.file.splice(index, 1)" />
        </view>
        <view v-if="form.file.length < 3" class="uploadImg">
          <view class="flexCCol" @click="uploadFormImgHandler">
            <image src="/static/images/addImg.png" mode="aspectFill" />
            <view>添加图片</view>
          </view>
        </view>
      </view>
    </template>
    <view class="flexJ" style="margin-top: 32rpx">
      <view>处方金额：</view>
      <view style="width: 30vw">
        <view>¥{{ form.prescriptionAmount }}</view>
        <!-- <up-input placeholder="请输入金额" type="number" border="none" v-model="form.prescriptionAmount">
            <template #prefix>
              <view>¥</view>
            </template>
          </up-input> -->
      </view>
    </view>
    <template v-if="props.isRenew !== 'success'">
      <u-line margin="32rpx 0"></u-line>
      <view style="height: 270rpx"></view>
      <view class="fixed-bottom">
        <view class="form-btns">
          <up-button color="#05B8D2" shape="circle" text="发送" throttleTime="1500" @click="_updateSend_prescription_form"></up-button>
        </view>
        <u-safe-bottom></u-safe-bottom>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, ComponentPublicInstance, watch, onMounted, nextTick } from 'vue'
import { updateSend_prescription_form } from '../api'
import type { DrugList, Consultation_information_detailType } from '../types'

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

interface IProps {
  orderId: string | number
  isRenew?: string
  renewRemark?: string
  drugList?: DrugList[]
  detailData?: Consultation_information_detailType
}

const props = defineProps<IProps>()

watch(
  props.drugList,
  newValue => {
    nextTick(() => {
      if (![null, undefined, []].includes(newValue)) {
        if (!newValue.length) return
        form.value.drugList = newValue as any

        computedTotalHandler()
      }
    })
  },
  { immediate: true, deep: true }
)

onMounted(() => {
  console.log(props.drugList, '有')
})

const emit = defineEmits(['closeSendPrescriptionHandler'])

const form = ref({
  prescriptionForm: '', // 问诊病情描述
  prescriptionAmount: 0, // 处方单金额
  prescriptionFile: '', // 处方单文件
  drugList: [{ name: '', des: '', amount: 0, num: 0 }],
  file: [] as string[]
})

const computedTotalHandler = () => {
  form.value.prescriptionAmount = form.value.drugList.reduce((accumulator, item) => {
    // 将amount和num转换为数字，如果为空则转换为0
    const amount = item.amount ? item.amount : 0
    const num = item.num ? item.num : 0

    // 只有当amount和num都不为空时才加入计算
    if (amount !== 0 && num !== 0) {
      accumulator += amount * num
    }

    return accumulator
  }, 0)
}

const uploadFormImgHandler = () =>
  proxy.$h.upload('/sys/common/upload', (e: { upImg: string }) => {
    form.value.file.length < 3 && form.value.file.push(e.upImg)

    form.value.prescriptionFile = form.value.file.join()
  })

const _updateSend_prescription_form = async () => {
  if (!form.value.prescriptionForm.length) return uni.$u.toast('请填写问诊病情')

  if (form.value.prescriptionAmount === 0 || !form.value.drugList[0].name.length || !form.value.drugList[0].des.length || [form.value.drugList[0].amount, form.value.drugList[0].num].includes(0)) return uni.$u.toast('最少添加一种处方药')

  await updateSend_prescription_form({ ...form.value, id: props.orderId, drupList: JSON.stringify(form.value.drugList) })

  uni.$u.toast('发送成功')

  emit('closeSendPrescriptionHandler', false)
}

defineExpose({ form })
</script>

<style lang="scss" scoped>
:deep(.u-textarea) {
  background: #f8f8fa !important;
  margin: 0 auto;
  width: 100%;
  height: 196prx;
  border-radius: 24rpx;
  margin-bottom: 46rpx;
}
@import '../TUIKit/TUIPages/styles/TUIChat.scss';
</style>