<template>
  <window-size>
    <van-cell title="就诊人" :value="params.patName"></van-cell>
    <van-cell title="医院名称" value="长沙泰和医院"></van-cell>
    <van-cell title="开方科室" :value="params.deptName"></van-cell>
    <van-cell title="开方医生" :value="params.doctorName"></van-cell>
    <van-cell title="总金额">
      <template #default>
        <span style="color: orangered">{{ makeMoney(params.totalAmt) }}</span>
      </template>
    </van-cell>
    <div v-if="params.fundPay && params.fundPay !== 'undefined'">
      <van-cell title="医保统筹支付">
        <template #default>
          <span style="color: orangered">{{ makeMoney(params.fundPay) }}</span>
        </template>
      </van-cell>
      <van-cell v-if="params.acctPay" title="个人账户支付">
        <template #default>
          <span style="color: orangered">{{ makeMoney(params.acctPay) }}</span>
        </template>
      </van-cell>
      <van-cell title="个人现金支付">
        <template #default>
          <span style="color: orangered">{{ makeMoney(params.selfAmt) }}</span>
        </template>
      </van-cell>
    </div>
    <div style="height: 5px"></div>
    <div style="background: white; text-align: center; font-size: 12px">
      <div style="height: 5px"></div>
      <van-row>
        <van-col span="10">项目名称</van-col>
        <van-col span="5">单价（元）</van-col>
        <van-col span="4">数量</van-col>
        <van-col span="5">金额（元）</van-col>
      </van-row>
      <div style="height: 5px"></div>
      <div v-for="(fee, index) in fees" :key="index">
        <div style="height: 5px"></div>
        <van-row>
          <van-col span="10">{{ fee.itemName }}</van-col>
          <van-col span="5">{{ makePrice(fee.itemPrice) }}</van-col>
          <van-col span="4">{{ fee.itemNumber }}</van-col>
          <van-col span="5">{{ makePrice(fee.itemTotalFee) }}</van-col>
        </van-row>
        <div style="height: 5px"></div>
      </div>
    </div>
    <div style="height: 10px"></div>
    <van-button block type="primary" @click="wechatPay">微信支付（￥ {{ makePrice(params.selfAmt) }}）</van-button>

    <van-dialog
        v-model:show="showRate"
        title="您的评价是我们前进的动力"
        show-confirm-button
        show-cancel-button
        confirm-button-text="提交"
        @cancel="router.push('/hospitalService')"
        @confirm="submitComment">
      <div style="font-size: 12px; color: rgb(128, 128, 128); padding: 8px 0 0 20px">请您对医生作出评价：</div>
      <div style="padding: 8px 0 20px 20px">
        <div>
          评分：
          <van-rate
              v-model="comment.commentLevel"
              :size="20"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
          />
          <span style="margin-left: 12px; font-size: 12px; color: rgb(128, 128, 128)">({{rateLevelExplain}})</span>
        </div>
        <van-field
            v-model="comment.commentContent"
            rows="5"
            autosize
            type="textarea"
            placeholder="请在此输入评价内容..."
            style="border: 1px solid lightgray; border-radius: 5px; margin-top: 12px"
        />
      </div>
    </van-dialog>
  </window-size>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {getUnPaidDetail} from '../../../api/pay-mz-fee'
import {computed, onMounted, reactive, ref} from 'vue'
import {wxPay} from '../../../utils/wx-pay'
import store from '../../../store'
import {showToast} from 'vant';
import {commitNewComment} from "../../../api/comment";

const router = useRouter()
const params = router.currentRoute.value.params
const fees = ref([])
const showRate = ref(false)
const comment = reactive({
  commentLevel: 5,
  commentContent: '',
  doctorName: '',
  hisOrdNum: '',
  patientName: '',
  patientId: ''
})
const rateLevelExplain = computed(() => {
  switch (comment.commentLevel) {
    case 5:
      return '很满意'
    case 4:
      return '满意'
    case 3:
      return '一般'
    case 2:
      return '不满意'
    case 1:
      return '很不满意'
  }
})
const submitComment = () => {
  comment.doctorCode = params.doctorCode
  comment.doctorName = params.doctorName
  comment.hisOrdNum = params.hisOrdNum
  comment.patientId = params.patientId
  comment.patientName = params.patName
  commitNewComment(comment).then(res => {
    showToast({
      message: res,
      position: 'top',
    });
    router.push('/hospitalService')
  })
}
const wechatPay = () => {
  let bodyText = '门诊缴费'
  if (fees.value.length === 1) {
    bodyText = fees.value[0].itemName || '门诊缴费'
  }
  const param = {
    body: bodyText,
    orderType: 2,
    totalFee: makePrice(params.selfAmt),
    patientId: params.patientId,
    hisOrdNum: params.hisOrdNum,
    yjReqNo: store.state.yjReqNo,
  }
  wxPay(param).then((result) => {
    showToast({
      message: result,
      position: 'top',
    });
    if (params.doctorCode === '99999') {
      router.push('/hospitalService')
    } else {
      showRate.value = true
    }
  })
}
onMounted(() => {
  getUnPaidDetail(params.patientId, params.hisOrdNum).then((res) => {
    fees.value = res
  })
})

function makePrice(num) {
  return (num / 100).toFixed(2)
}

function makeMoney(money) {
  const m = money / 100
  return '￥ ' + m.toFixed(2)
}
</script>
