<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col>
          <el-date-picker
              v-model="dateRange"
              :shortcuts="shortcuts"
              end-placeholder="结束日期"
              placeholder="选择日期"
              range-separator="至"
              start-placeholder="开始日期"
              style="width: 280px"
              type="daterange"
          ></el-date-picker>
          患者ID：
          <el-input v-model="patientId" clearable style="width: 120px" @blur="patientId = $event.target.value.trim()"
                    @keyup.enter="getMzPatientClick"></el-input>
          <el-select v-model="xiangMuZhuangTai" style="width: 90px">
            <el-option v-for="item in xiangMuZhuangTaiData" :key="item.code" :label="item.name" :value="item.code">
              <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
              <el-divider direction="vertical"></el-divider>
              <span :style="{ color: item.color }">{{ item.name }}</span>
            </el-option>
          </el-select>
          <el-button icon="Search" type="primary" @click="getMzPatientClick"> 查询</el-button>
          <el-button icon="Search" type="primary" @click="kuaiSuChaZhaoClick"> 快速查找</el-button>
          <el-button icon="Search" type="warning" @click="chaoZuoZhiNanDialog = true"> 操作指南</el-button>
          <el-button icon="Upload" type="success" @click="baoCunClick"> 保存</el-button>
          <el-col>
            <el-tag effect="dark" size="large">患者姓名: {{ patient.name }}</el-tag>
            <el-tag effect="dark" size="large" type="warning">性别:{{ cptSex(patient.sex) }}</el-tag>
            <el-tag effect="dark" size="large">出生日期: {{ patient.birthDay }}</el-tag>
            <el-tag effect="dark" size="large" type="warning">诊疗卡: {{ patient.icCardNo }}</el-tag>
          </el-col>
        </el-col>
        <el-col :span="4">
          <el-table :data="shouFeiData" :height="windowsHeight / 1.1" highlight-current-row stripe
                    @cell-click="getFeiYongXinXiClick">
            <el-table-column label="收费信息">
              <el-table-column label="缴费日期" prop="chargeDate" width="80"></el-table-column>
              <el-table-column label="流水号">
                <template #default="scope">
                  <el-popover :width="800" placement="right" trigger="click">
                    <template #reference>
                      <el-button type="success" @click="getFeiYongXinXiClick(scope.row)">{{
                          scope.row.realNo
                        }}
                      </el-button>
                    </template>
                    <el-table :data="feiYongData" :height="windowsHeight / 2" highlight-current-row stripe>
                      <el-table-column label="缴费明细信息">
                        <el-table-column label="待确认标志" prop="confirmFlag">
                          <template #default="scope">
                            <span v-html="confirmFlag(scope.row.confirmFlag)"></span>
                          </template>
                        </el-table-column>
                        <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
                        <el-table-column label="项目" prop="chargeName"></el-table-column>
                        <el-table-column label="金额" prop="chargeFee"></el-table-column>
                        <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
                        <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
                        <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
                        <el-table-column label="申请号" prop="reqNo"></el-table-column>
                      </el-table-column>
                    </el-table>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="20">
          <el-table :data="keQueRenData" :height="windowsHeight / 1.1" highlight-current-row stripe>
            <el-table-column label="本科室">
              <el-table-column label="待确认标志" prop="confirmFlag" width="250">
                <template #default="scope">
                  <el-radio-group v-model="scope.row.confirmFlag">
                    <el-radio-button :disabled="scope.row.xiangMuZhuangTai === 1 || scope.row.xiangMuZhuangTai === 3"
                                     :label="0"> 未确认
                    </el-radio-button>
                    <el-radio-button :label="1">确认</el-radio-button>
                    <el-radio-button :label="3">取消</el-radio-button>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
              <el-table-column label="项目" prop="chargeName"></el-table-column>
              <el-table-column label="金额" prop="chargeFee"></el-table-column>
              <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
              <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
              <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
              <el-table-column label="申请号" prop="reqNo">
                <template #default="scope">
                  <el-popover :width="800" placement="left" trigger="click">
                    <template #reference>
                      <el-button type="success" @click="getMingXiClick(scope.row)">{{ scope.row.reqNo }}</el-button>
                    </template>
                    <el-table :data="danGeXingXi" highlight-current-row stripe>
                      <el-table-column label="明细">
                        <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
                        <el-table-column label="项目" prop="chargeName"></el-table-column>
                        <el-table-column label="金额" prop="chargeFee"></el-table-column>
                      </el-table-column>
                    </el-table>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <el-dialog v-model="kuaiSuChaZhaoDialog" title="点击表格中的姓名即可">
    <el-table
        :data="kuaiSuChaZhaoData.list.slice((kuaiSuChaZhaoData.currentPage - 1) * kuaiSuChaZhaoData.pageSize, kuaiSuChaZhaoData.pageSize * kuaiSuChaZhaoData.currentPage)"
        :height="windowsHeight / 2"
        highlight-current-row
        stripe
        @cell-click="chaZhaoTable"
    >
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="门诊号" prop="patientId"></el-table-column>
    </el-table>
    <el-pagination
        :current-page="kuaiSuChaZhaoData.currentPage"
        :page-size="kuaiSuChaZhaoData.pageSize"
        :total="kuaiSuChaZhaoData.list.length"
        background
        layout="total,  prev, pager, next, jumper"
        @current-change="kuaiSuChaZhaoCurrent"
    >
    </el-pagination>
  </el-dialog>
  <el-dialog v-model="chaoZuoZhiNanDialog" title="操作指南">
    一、查询<br/><br/>
    1、选择好时间以及患者的门诊号（门诊号或者诊疗卡号），在选择是否查看已经确认的还是未确认的 点击查询即可。<br/>
    2、快速查询，只针对医生开了执行科室为本科室的才有用，没有带执行科室的请手动输入门诊号查询，是根据日期来查询的。<br/>
    3、如果感觉有点卡的话那么就日期范围选择短一些<br/><br/>
    二、数据<br/><br/>
    1、点击右边侧边栏的表格，开在本科室的项目就会显示在左边，点击流水号，能看到这个费用的明细<br/>
    2、点击中间的表格，选择您需要进行的操作。<br/>
    3、点击申请号，可也看见套餐的明细。<br/><br/>
    三、保存<br/><br/>
    1、在选择完数据后点击保存即可。 <br/>
  </el-dialog>
</template>
<script>
import {shortcuts} from '@/data/shortcuts'
import {ref} from 'vue'
import {cptSex} from '@/utils/computed'
import {
  getFeiYongXinXi,
  getMzPatient,
  kuaiSuChaZhao,
  menZhenXiangMuQuXiaoHuoQueRen
} from '@/api/zhu-yuan-yi-ji/men-zhen-xiang-mu'
import {getDateRangeFormatDate} from '@/utils/date'
import store from '@/store'
import {clone} from '@/utils/clone.js'
import {ElMessage, ElMessageBox} from 'element-plus'
import {listIsBlank, stringIsBlank} from '@/utils/blank-utils'
import {needRule} from "@/utils/public";

export default {
  setup() {
    const windows = store.state.app.windowSize
    const windowsHeight = windows.h
    const dateRange = ref(shortcuts[0].value)
    const patientId = ref('') //12117-4
    const xiangMuZhuangTai = ref(0)
    const chargeDate = ref('')

    const rolesList = store.state.user.info.roles

    const patient = ref({})

    const shouFeiData = ref([])
    const feiYongData = ref([])
    const keQueRenData = ref([])
    const danGeXingXi = ref([])

    const getMzPatientClick = () => {
      lingShiBaoCunJiaoFeiMingXi.value = {}
      shouFeiData.value = []
      keQueRenData.value = []
      feiYongData.value = []
      danGeXingXi.value = []
      let dateR = getDateRangeFormatDate(dateRange.value)
      getMzPatient(patientId.value, xiangMuZhuangTai.value, dateR.startTime, dateR.endTime, store.state.user.info.deptCode)
          .then((res) => {
            patientId.value = res.patientId
            patient.value = res
            patient.value.birthDay = patient.value.birthDay.split(' ')[0]
            shouFeiData.value = res.list
          })
          .catch(() => {
            patient.value = {}
          })
    }

    const lingShiBaoCunJiaoFeiMingXi = ref({})

    const getFeiYongXinXiClick = (val) => {
      chargeDate.value = val.chargeDate
      getFeiYongXinXi(val.realNo, val.patientId, val.times, xiangMuZhuangTai.value).then((res) => {
        keQueRenData.value = []
        feiYongData.value = res
        lingShiBaoCunJiaoFeiMingXi.value = clone(val)
        let dept = store.state.user.info.deptCode
        if (needRule(1)) {
          keQueRenData.value = clone(feiYongData.value)
        } else {
          keQueRenData.value = feiYongData.value.filter((item) => {
            return item.execDept === dept || stringIsBlank(item.execDept)
          })
        }
      })
    }

    const lingShiHuoQuMingXi = ref({})

    const getMingXiClick = (val) => {
      lingShiHuoQuMingXi.value = val
      if (typeof val.list !== 'undefined') {
        danGeXingXi.value = val.list
        val.list.forEach((item) => {
          item.chargeFee = item.drugWin * item.quantity * item.unitPrice
        })
      }
    }

    const baoCunClick = () => {
      const list = keQueRenData.value.filter((item) => {
        return item.confirmFlag !== item.oldConfirmFlag && item.confirmFlag !== 0
      })
      if (listIsBlank(list)) {
        return ElMessage.error('数据没有变化请勿点击')
      }
      ElMessageBox.confirm('请确认数据', '提示', {
        type: 'warning',
      })
          .then(() => {
            let baoCun = {
              list: list,
              realNo: lingShiBaoCunJiaoFeiMingXi.value.realNo,
              patientId: lingShiBaoCunJiaoFeiMingXi.value.patientId,
              times: lingShiBaoCunJiaoFeiMingXi.value.times,
              execDept: store.state.user.info.deptCode,
            }
            menZhenXiangMuQuXiaoHuoQueRen(baoCun).then((res) => {
              keQueRenData.value = []
            })
          })
          .catch(() => {
          })
    }

    const kuaiSuChaZhaoDialog = ref(false)
    const kuaiSuChaZhaoData = ref({
      currentPage: 1,
      pageSize: 10,
      list: [],
    })
    const chaoZuoZhiNanDialog = ref(false)

    const kuaiSuChaZhaoClick = () => {
      let dateR = getDateRangeFormatDate(dateRange.value)
      kuaiSuChaZhao(dateR.startTime, dateR.endTime, store.state.user.info.deptCode).then((res) => {
        kuaiSuChaZhaoData.value.list = res
        kuaiSuChaZhaoDialog.value = true
      })
    }

    const kuaiSuChaZhaoCurrent = (val) => {
      kuaiSuChaZhaoData.value.currentPage = val
    }

    const chaZhaoTable = (val) => {
      patientId.value = val.patientId
      getMzPatientClick()
    }

    return {
      shortcuts,
      patientId,
      dateRange,
      cptSex,
      patient,
      getMzPatientClick,
      xiangMuZhuangTaiData: ref([
        {code: 0, name: '未确认'},
        {code: 1, name: '已确认'},
      ]),
      xiangMuZhuangTai,
      windowsHeight,
      shouFeiData,
      getFeiYongXinXiClick,
      feiYongData,
      keQueRenData,
      getMingXiClick,
      danGeXingXi,
      baoCunClick,
      confirmFlag,
      kuaiSuChaZhaoClick,
      kuaiSuChaZhaoDialog,
      chaoZuoZhiNanDialog,
      kuaiSuChaZhaoData,
      kuaiSuChaZhaoCurrent,
      chaZhaoTable,
    }
  },
}

function confirmFlag(val) {
  switch (val) {
    case 0:
      return '<span style="color:#E6A23C">未确认</span>'
    case 1:
      return '<span style="color:#67C23A">已确认</span>'
    case 3:
      return '<span style="color:#F56C6C">已取消</span>'
  }
}
</script>

<style></style>
