<template>
  <page-layer>
    <template #header>
      <el-input size="small" clearable prefix-icon="Search" v-model="mzTuiFei.patientId" style="width: 300px">
        <template #prepend>门诊号</template>
      </el-input>
      <el-input size="small" clearable prefix-icon="Search" v-model="mzTuiFei.times" oninput="value=value.replace(/[^\d]/g,'')" style="width: 300px">
        <template #prepend>次数</template>
      </el-input>
      <el-input size="small" clearable prefix-icon="Search" v-model="mzTuiFei.chargeItemCode" style="width: 300px">
        <template #prepend>收费编码</template>
      </el-input>
      <el-button type="success" style="margin-left: 20px" @click="querySubmit">查询</el-button>
    </template>
    <template #aside>
      <el-table :data="mzChargeDateilData" :height="tableHeight" @row-click="dianJiDanYuanGe" stripe highlight-current-row>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="tcName" label="项目名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="chargeItemCode" label="编码"></el-table-column>
        <el-table-column prop="itemNo" label="编码"></el-table-column>
      </el-table>
      <el-pagination
          :pager-count="5"
          small
          :total="mzTuiFei.total"
          layout="prev, pager, next,total"
          :current-page="mzTuiFei.currentPage"
          :page-size="mzTuiFei.pageSize"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </template>
    <template #main>
      <div style="margin-right: 20px">
        <el-descriptions title="基本信息" border :column="4">
          <template #extra>
            <el-button type="primary" @click="tuiFeiClick">修改二次退费</el-button>
          </template>
          <el-descriptions-item>
            <template #label> 患者姓名 </template>
            {{ mzChargeDateil.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 收费编码 </template>
            {{ mzChargeDateil.chargeItemCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 门诊号 </template>
            {{ mzChargeDateil.patientId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 次数 </template>
            {{ mzChargeDateil.times }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 药房确认标志 </template>
            {{ confirmFlagToString(mzChargeDateil.confirmFlag) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 最大退药量 </template>
            {{ mzChargeDateil.quantity }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 药品名称 </template>
            {{ mzChargeDateil.tcName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 收据编号 </template>
            {{ mzChargeDateil.receiptNo }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-dialog v-model="tuiFeiDialog" title="退费操作" width="500px">
        <el-tag>患者姓名：{{ mzChargeDateil.name }} </el-tag>
        <el-tag type="info">门诊号：{{ mzChargeDateil.patientId }} </el-tag>
        <el-tag>次数：{{ mzChargeDateil.times }} </el-tag>
        <el-tag type="info">收费编码：{{ mzChargeDateil.chargeItemCode }} </el-tag>
        <el-tag>最大退药量：{{ mzChargeDateil.quantity }} </el-tag>
        <br /><br />
        <span>选择退费数量 ：</span>
        <el-select v-model="quantity" placeholder="请选择最大退药量">
          <el-option v-for="item in mzChargeDateil.quantity" :key="item" :label="item" :value="item"></el-option> </el-select
        ><br /><br />
        <el-button type="warning" @click="xiuGaiClick">修改</el-button>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { ref } from '@vue/reactivity'
import { getMzTuiFei, xiuGaiTuiFei } from '@/api/yz-data-mod/second-fefund'
import { ElMessage, ElMessageBox } from 'element-plus'
import store from '@/store'
import { clone } from '@/utils/clone'
import PageLayer from "@/layout/PageLayer";
export default {
  name: 'SecondFefund',
  components: {PageLayer},
  setup() {
    ////////////////////////////// 获取屏幕高度 /////////////////////////////////////////

    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 70

    const mzTuiFei = ref({
      patientId: '',
      times: '',
      chargeItemCode: '',
      currentPage: 1,
      pageSize: 20,
      total: 0,
    })

    const mzChargeDateil = ref({})

    ///////////////////////////////// 点击查询按钮 ////////////////////////////////////////////////

    const mzChargeDateilData = ref([])

    const querySubmit = () => {
      if (!mzTuiFei.value.patientId || !mzTuiFei.value.times) {
        ElMessage({
          type: 'warning',
          message: '门诊号和次数不能为空',
          showClose: true,
          duration: 2000,
        })
        return
      }
      getMzTuiFei(mzTuiFei.value).then((res) => {
        mzChargeDateilData.value = res.records
        mzTuiFei.value.total = res.total
      })
    }

    ///////////////////////////// 点击下一页 ///////////////////////////////////////////////
    const handleCurrentChange = (val) => {
      mzTuiFei.value.currentPage = val
      getMzTuiFei(mzTuiFei.value).then((res) => {
        mzChargeDateilData.value = res.data
      })
    }

    //////////////////////////////// 点击 el-table 表格 //////////////////////////////////////////////////////
    const dianJiDanYuanGe = (val) => {
      mzChargeDateil.value = val
      quantity.value = val.quantity
    }

    const quantity = ref()

    const tuiFeiDialog = ref(false)
    const tuiFeiClick = () => {
      if (!mzChargeDateil.value.patientId) {
        ElMessage({
          type: 'warning',
          message: '请先选择退药编码',
          showClose: true,
          duration: 2500,
        })
        return
      }
      tuiFeiDialog.value = true
    }

    /**
     * 点击修改 退药量
     */

    const xiuGaiClick = () => {
      if (!quantity.value) {
        ElMessage({
          type: 'warning',
          message: '未选择退药数量',
          showClose: true,
          duration: 2500,
        })
        return
      }
      ElMessageBox.confirm('是否修改', '提示', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
        .then(() => {
          let linShi = clone(mzChargeDateil.value.quantity)
          mzChargeDateil.value.quantity = quantity.value
          xiuGaiTuiFei(mzChargeDateil.value).then((res) => {
            mzChargeDateil.value = {}
            getMzTuiFei(mzTuiFei.value).then((res) => {
              mzChargeDateilData.value = res.records
              mzTuiFei.value.total = res.total
            })
          })
          mzChargeDateil.value.quantity = linShi
        })
        .catch(() => {})
    }
    return {
      querySubmit,
      mzChargeDateil,
      confirmFlagToString,
      tuiFeiClick,
      tuiFeiDialog,
      quantity,
      xiuGaiClick,
      mzTuiFei,
      mzChargeDateilData,
      handleCurrentChange,
      tableHeight,
      dianJiDanYuanGe,
    }
  },
}
function confirmFlagToString(val) {
  switch (val) {
    case 0:
      return '待确认'
    case 1:
      return '已确认'
    case 2:
      return '打印药品清单'
    case 3:
      return '已取消'
    case 4:
      return '已退费'
  }
}
</script>

<style></style>
