<template>
  <el-container>
    <el-header style="height: 35px; margin-top: 10px">
      <el-input v-model="patientId" style="width: 200px; margin-left: 2px" clearable placeholder="请输入">
        <template #prepend>门诊id</template>
      </el-input>
      <el-select v-model="medType" style="width: 120px">
        <el-option v-for="item in medTypes" :key="item.code" :value="item.code" :label="item.name"></el-option>
      </el-select>
      <el-dropdown trigger="click" @command="receiptsOpts" style="margin-left: 8px">
        <el-button type="primary">处方<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-document" command="require">获取门诊处方</el-dropdown-item>
            <el-dropdown-item icon="el-icon-delete" command="delete">删除所有处方</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown trigger="click" @command="registor" style="margin-left: 8px">
        <el-button type="primary">登记<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-bank-card" command="execute">医保登记</el-dropdown-item>
            <el-dropdown-item icon="el-icon-refresh-left" command="revoke">取消登记</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown trigger="click" @command="receiptsOpts" style="margin-left: 8px">
        <el-button type="primary">上传<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-upload" command="upload">医保处方上传</el-dropdown-item>
            <el-dropdown-item icon="el-icon-refresh-left" command="retract">撤销处方上传</el-dropdown-item>
            <el-dropdown-item divided icon="el-icon-edit" command="diags">普门诊断补录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button type="primary" icon="el-icon-edit-outline" @click="mzPreSetl" style="margin-left: 8px"> 试算 </el-button>
      <el-button type="danger" icon="el-icon-refresh" @click="clearinfo" style="margin-left: 8px"> 重置 </el-button>
    </el-header>
    <el-main>
      <el-row :gutter="5">
        <el-col :span="2">
          <el-table ref="timesTable" :data="data" highlight-current-row :height="tableHeight" @row-click="clickTimes">
            <el-table-column label="就诊次数">
              <template #default="scope"> 第 {{ scope.row.times }} 次 </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="5">
          <el-table ref="ordersTable" :data="orderNos" highlight-current-row :height="tableHeight" @row-click="clickOrderNo">
            <el-table-column label="处方" width="60">
              <template #default="scope">
                <span v-html="colorStatus(scope.row)"></span>
              </template>
            </el-table-column>
            <el-table-column label="金额" width="60">
              <template #default="scope">
                {{ scope.row.totalFee.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" icon="el-icon-check" @click="markMzFees" :disabled="scope.row.status"> 生成 </el-button>
                <el-button type="text" icon="el-icon-delete" @click="unmarkMzFees(scope.row)" :disabled="!scope.row.status"> 撤销 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="15">
          <div style="margin-left: 30px">
            <div class="receipt-title">湖南泰和医院处方笺</div>
            <el-divider></el-divider>
            <div class="receipt-head">
              <div>姓名：{{ mzVisit.name }}</div>
              <div>性别：{{ mzVisit.sex }}</div>
              <div>年龄：{{ mzVisit.age }} 岁</div>
            </div>
            <div class="receipt-head">
              <div>门诊号：{{ mzVisit.patientId }}</div>
              <div>科别：{{ mzVisit.visitDeptName }}</div>
              <div class="ellipsis-text" :title="mzVisit.icdText">临床诊断：{{ mzVisit.icdText }}</div>
            </div>
            <div class="receipt-head">
              <div>开具日期：{{ mzVisit.opDay }}</div>
              <div class="ellipsis-text">
                地址：<span :title="mzVisit.address">{{ mzVisit.address }}</span>
              </div>
              <div>电话：{{ mzVisit.phoneNo }}</div>
            </div>
            <el-divider></el-divider>
            <div :style="receiptBoxStyle">
              <div v-for="(item, index) in currentReceipts" :key="index">
                <div class="receipt-item">
                  <div class="w75">
                    <el-checkbox v-model="item.checked"></el-checkbox>
                    {{ index + 1 }}）{{ item.drugName }}&nbsp; （
                    <span v-if="item.specification">{{ item.specification }}</span>
                    <span v-else>{{ item.drugUnit }}</span>
                    ）
                  </div>
                  <div class="w25">&times;&nbsp;&nbsp;&nbsp;{{ item.quantity }}</div>
                </div>
                <div class="receipt-tips">
                  <span v-if="item.drugQuan"> 用法：{{ item.drugQuan }}{{ item.drugUnit }}/次 </span>
                  <span v-if="item.frequency"> {{ item.frequency }} </span>
                  <span v-if="item.orderDays"> {{ item.orderDays }}天 </span>
                  <span v-if="item.supplyCode"> {{ item.supplyCode }} </span>
                  <span v-if="item.instructionText"> 备注：{{ item.instructionText }} </span>
                </div>
                <div :style="{ color: item.nationalCode ? 'green' : 'red', fontWeight: 'bold', padding: '0 0 12px 64px' }">医保码：{{ item.nationalCode || '未匹配' }}</div>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="receipt-head">
              <div style="font-size: 15px">医师：{{ mzVisit.doctorName }} / {{ mzVisit.doctorCode }}</div>
              <div style="font-size: 15px">
                总金额：<span style="font-size: 18px; font-weight: bold">￥{{ totalFee }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>

    <el-dialog title="个人信息" v-model="showInsuinfo" width="65%">
      <el-tag>参保信息</el-tag>
      <el-table :data="psnBaseinfo.insuinfo" @row-click="handleClickInsuinfo">
        <el-table-column property="balc" label="余额"></el-table-column>
        <el-table-column label="险种类型" prop="insutypeName"></el-table-column>
        <el-table-column label="人员类别" prop="psnTypeName"></el-table-column>
        <el-table-column label="参保状态" prop="psnInsuStasName"></el-table-column>
        <el-table-column property="psnInsuDate" label="个人参保日期"></el-table-column>
        <el-table-column property="pausInsuDate" label="暂停参保日期"></el-table-column>
        <el-table-column property="cvlservFlagName" label="公务员标志"></el-table-column>
        <el-table-column property="insuplcAdmdvs" label="参保地医保区划"></el-table-column>
        <el-table-column property="insuplcAdmdvsName" label="参保地名称"></el-table-column>
        <el-table-column property="empName" label="单位名称"></el-table-column>
      </el-table>
      <div style="height: 16px"></div>
      <el-tag>身份信息</el-tag>
      <el-table :data="psnBaseinfo.idetinfo" stripe height="180">
        <el-table-column label="人员身份类别" prop="psnIdetTypeName"></el-table-column>
        <el-table-column label="人员类别等级" prop="psnTypeLv"></el-table-column>
        <el-table-column label="备注" prop="memo"></el-table-column>
        <el-table-column label="开始时间" prop="begntime"></el-table-column>
        <el-table-column label="结束时间" prop="endtime"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="请选择（慢特病备案信息）" v-model="showSpcChrAccts" width="40%">
      <el-table :data="spcChrDiseAccts" @row-click="uploadFees">
        <el-table-column property="opspDiseCode" label="病种编码"></el-table-column>
        <el-table-column property="opspDiseName" label="病种名称"></el-table-column>
        <el-table-column property="begndate" label="生效日期"></el-table-column>
        <el-table-column property="enddate" label="失效日期"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="请选择生育诊断" v-model="showMatnDises" width="60%">
      <el-table :data="matnDises" @row-click="uploadFees" stripe height="360">
        <el-table-column property="code" label="病种编码"></el-table-column>
        <el-table-column property="name" label="病种名称"></el-table-column>
        <el-table-column property="insutype" label="险种类型"></el-table-column>
        <el-table-column property="limitAmt" label="疾病限额"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="普门诊断补录" v-model="showInputDiags" width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div style="margin-top: -20px; margin-bottom: 16px; background: lightgray; padding: 8px 4px; color: black">临床诊断参考：{{ mzVisit.icdText }}</div>
      检索方法：<el-select v-model="searchMethod" style="width: 80px">
        <el-option v-for="item in searchMethods" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select
      >&nbsp;
      <el-autocomplete v-model="diagItem.diagName" :fetch-suggestions="searchDiag" placeholder="请输入内容" clearable @select="handleSelectDiag" style="width: 220px">
        <template #default="{ item }">
          <div style="height: 40px">
            <div style="height: 16px; margin-top: 4px; font-size: 12px; color: #8492a6">
              {{ item.code }}
            </div>
            <div style="height: 16px">{{ item.name }}</div>
          </div>
        </template>
      </el-autocomplete>
      <el-select v-model="diagItem.diagType" placeholder="诊断类别" style="width: 120px">
        <el-option v-for="item in diagTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="el-icon-plus" @click="addDiag">添加到诊断列表</el-button>
      <el-button type="success" icon="el-icon-check" @click="saveDiag">保存诊断</el-button>
      <el-table :data="diags" stripe>
        <el-table-column prop="diagSrtNo" label="序号" width="40"></el-table-column>
        <el-table-column prop="diagType" label="诊断类别" width="60"></el-table-column>
        <el-table-column prop="diagCode" label="诊断编码"></el-table-column>
        <el-table-column prop="diagName" label="诊断名称"></el-table-column>
        <el-table-column prop="diagDept" label="诊断科室"></el-table-column>
        <el-table-column prop="diseDorNo" label="医生编码" width="80"></el-table-column>
        <el-table-column prop="diseDorName" label="医生姓名" width="80"></el-table-column>
        <el-table-column prop="diagTime" label="诊断时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button icon="el-icon-delete" type="text" @click="deleteDiag(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-container>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import {
  deleteAllMzReceipts,
  deleteMzReceipt,
  getMzReceipts,
  insertSiMzFees,
  outpatientPreSettlement,
  outpatientRegistration,
  revokeOutpatientFeeDetails,
  revokeOutpatientRegistration,
  uploadOutpatientFeeDetails,
  saveSiMzDiags,
} from '@/api/medical-insurance/si-outpatient'
import { cptInsutype, cptPersType, cptYbState } from '@/utils/computed'
import { ElMessage, ElMessageBox } from 'element-plus'
import store from '@/store'
import { obtainBasicPersonInfo, querySpecialChronicDiseasesAccreditation, queryMzMatnDises } from '@/api/medical-insurance/si-query'
import { getMedTypesByFlag } from '@/api/medical-insurance/si-dict'
import { searchData } from '@/api/yibao/dictionary'
import { clone } from '../../../utils/clone'
export default {
  setup() {
    const medType = ref(null)
    const medTypes = ref([])
    const patientId = ref('')
    const times = ref(null)
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 45
    const receiptBoxStyle = {
      height: tableHeight - 200 + 'px',
      overflowY: 'auto',
    }

    const data = ref([])
    const showInsuinfo = ref(false)
    const psnBaseinfo = ref({})
    const mzVisit = ref({})
    const receipts = ref({})
    const orderNos = ref([])
    const currentReceipts = ref([])
    const totalFee = ref(null)
    const timesTable = ref(null)
    const ordersTable = ref(null)
    const currentOrder = ref({})
    const spcChrDiseAccts = ref([])
    const showSpcChrAccts = ref(false)
    const matnDises = ref([])
    const showMatnDises = ref(false)
    const showInputDiags = ref(false)
    const searchMethods = [
      { code: 'alpha', name: '首拼' },
      { code: 'code', name: '编码' },
      { code: 'name', name: '名称' },
    ]
    const searchMethod = ref('alpha')
    const diagItem = reactive({})
    const searchDiag = (queryString, cb) => {
      if (queryString && queryString.length > 1) {
        const param = {
          method: searchMethod.value,
          content: queryString,
          target: 'diag',
          medType: medType.value,
        }
        searchData(param).then((res) => {
          cb(res)
        })
      }
    }
    const handleSelectDiag = (item) => {
      diagItem.diagCode = item.code
      diagItem.diagName = item.name
    }
    const diagTypes = [
      { code: '1', name: '西医诊断' },
      { code: '2', name: '中医主病诊断' },
      { code: '3', name: '中医主证诊断' },
    ]
    const diags = ref([])
    const addDiag = () => {
      if (!diagItem.diagCode) {
        ElMessage({
          message: '请选择诊断！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      if (!diagItem.diagType) {
        ElMessage({
          message: '请选择诊断类别！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      diagItem.patNo = patientId.value
      diagItem.times = times.value
      diagItem.diagSrtNo = diags.value.length + 1
      diagItem.diagDept = mzVisit.value.visitDeptName
      diagItem.diseDorNo = mzVisit.value.doctorCode
      diagItem.diseDorName = mzVisit.value.doctorName
      diagItem.diagTime = mzVisit.value.opDay
      diagItem.valiFlag = '1'
      diags.value.push(clone(diagItem))
      diagItem.diagCode = ''
      diagItem.diagName = ''
      diagItem.diagType = ''
    }
    const deleteDiag = (index) => {
      diags.value.splice(index, 1)
      for (let i = 0; i < diags.value.length; i++) {
        const element = diags.value[i]
        element.diagSrtNo = i + 1
      }
    }
    const saveDiag = () => {
      if (diags.value.length === 0) {
        ElMessage({
          message: '没有要保存的诊断！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      saveSiMzDiags(diags.value).then((res) => {
        ElMessageBox.alert(res, '提示', {
          type: 'success',
          showCancelButton: false,
        }).then(() => {
          diags.value = []
          showInputDiags.value = false
        })
      })
    }

    const nullPatientId = () => {
      if (!patientId.value) {
        ElMessage({
          message: '请输入门诊id号！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return true
      }
      return false
    }

    const registor = (command) => {
      if (nullPatientId()) {
        return
      }
      if (nullTimes()) {
        return
      }
      const param = {
        patNo: patientId.value,
        medType: medType.value,
        times: times.value,
        needSaving: 1,
      }
      if (command === 'execute') {
        if (!medType.value) {
          ElMessage({
            message: '请先选择医疗类别！',
            type: 'warning',
            duration: 2500,
            showClose: true,
          })
          return
        }
        obtainBasicPersonInfo(param).then((res) => {
          times.value = res.times
          psnBaseinfo.value = res
          showInsuinfo.value = true
        })
      } else {
        revokeOutpatientRegistration(param).then((res) => {
          ElMessage({
            message: res,
            type: 'success',
            duration: 2000,
            showClose: true,
          })
        })
      }
    }

    const nullTimes = () => {
      if (!times.value) {
        ElMessage({
          message: '请先获取门诊处方！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return true
      }
      return false
    }

    const receiptsOpts = (command) => {
      if (nullPatientId()) {
        return
      }
      if (command !== 'require') {
        if (nullTimes()) {
          return
        }
      }
      const param = {
        patNo: patientId.value,
        times: times.value,
      }
      switch (command) {
        case 'require':
          fetchReceipts(param)
          break
        case 'delete':
          deleteAllMzReceipts(param).then((res) => {
            ElMessage({
              message: res,
              type: 'success',
              duration: 2000,
              showClose: true,
            })
            fetchReceipts(param)
          })
          break
        case 'upload':
          qrySpcChrDiseAcct(param)
          break
        case 'retract':
          revokeOutpatientFeeDetails(param).then((res) => {
            ElMessage({
              message: res,
              type: 'success',
              duration: 2000,
              showClose: true,
            })
          })
          break
        case 'diags':
          showInputDiags.value = true
          break
      }
    }

    const fetchReceipts = (param) => {
      getMzReceipts(param)
        .then((res) => {
          console.log(res)
          data.value = res
          setTimeout(() => {
            timesTable.value.setCurrentRow(res[0])
            clickTimes(res[0])
          }, 100)
        })
        .catch(() => {
          data.value = []
          orderNos.value = []
          currentReceipts.value = []
        })
    }

    const markMzFees = () => {
      if (currentReceipts.value.length === 0) {
        ElMessage({
          message: '请先选择要保存的处方！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      ElMessageBox.confirm('是否将选中处方生成医保处方？', '提示', {
        type: 'warning',
        confirmButtonText: '生成',
        cancelButtonText: '取消',
      })
        .then(() => {
          insertSiMzFees(currentReceipts.value).then(() => {
            currentOrder.value.status = true
            ElMessage({
              message: '已成功生成医保处方。',
              type: 'success',
              duration: 2500,
              showClose: true,
            })
          })
        })
        .catch(() => {})
    }

    const qrySpcChrDiseAcct = (param) => {
      if (medType.value === '51') {
        queryMzMatnDises().then((res) => {
          matnDises.value = res
          showMatnDises.value = true
        })
      } else if (medType.value === '14') {
        querySpecialChronicDiseasesAccreditation(param).then((res) => {
          spcChrDiseAccts.value = res
          showSpcChrAccts.value = true
        })
      } else {
        uploadFees(param)
      }
    }

    const uploadFees = (row) => {
      if (medType.value === '51') {
        row.patNo = patientId.value
        row.times = times.value
        row.opspDiseCode = row.code
        row.opspDiseName = row.name
      }
      uploadOutpatientFeeDetails(row).then((res) => {
        times.value = res.times
        showSpcChrAccts.value = false
        showMatnDises.value = false
        mzPreSetl()
      })
    }

    const handleClickInsuinfo = (row) => {
      const param = {
        patNo: patientId.value,
        times: times.value,
        insutype: row.insutype,
        psnType: row.psnType,
        insuplcAdmdvs: row.insuplcAdmdvs,
        empName: row.empName,
      }
      outpatientRegistration(param).then((res) => {
        showInsuinfo.value = false
        ElMessage({
          message: res,
          type: 'success',
          duration: 2000,
          showClose: true,
        })
      })
    }

    const clickOrderNo = (row) => {
      currentOrder.value = row
      currentReceipts.value = receipts.value[row.orderNo]
      totalFee.value = row.totalFee.toFixed(2)
    }

    const clickTimes = (row) => {
      mzVisit.value = row.mzVisit
      receipts.value = row.mzReceipts
      orderNos.value = row.orderNos
      times.value = row.times
      currentReceipts.value = []
      setTimeout(() => {
        ordersTable.value.setCurrentRow(orderNos.value[0])
        clickOrderNo(orderNos.value[0])
      }, 100)
    }

    const colorStatus = (row) => {
      return row.status ? `<span style="color: green">第${row.orderNo}张</span>` : `<span style="color: red">第${row.orderNo}张</span>`
    }

    const unmarkMzFees = (row) => {
      ElMessageBox.confirm('是否将选中处方从医保处方中删除？', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          deleteMzReceipt(row).then(() => {
            currentOrder.value.status = false
            ElMessage({
              message: '已成功删除医保处方。',
              type: 'success',
              duration: 2500,
              showClose: true,
            })
          })
        })
        .catch(() => {})
    }

    const mzPreSetl = () => {
      const param = {
        staffId: store.state.user.info.code,
        patNo: patientId.value,
        times: times.value,
      }
      outpatientPreSettlement(param).then((res) => {
        const message = '医保处方总费用：' + res.totalCost + '，医保报销金额：' + res.fundPay + '。'
        ElMessageBox.alert(message, '试算成功', {
          type: 'success',
          showCancelButton: false,
        }).then(() => {})
      })
    }

    const clearinfo = () => {
      patientId.value = ''
      times.value = null
      data.value = []
      psnBaseinfo.value = {}
      mzVisit.value = {}
      receipts.value = {}
      orderNos.value = []
      currentReceipts.value = []
      totalFee.value = null
      timesTable.value = null
      ordersTable.value = null
      currentOrder.value = {}
      spcChrDiseAccts.value = []
    }

    onMounted(() => {
      getMedTypesByFlag('clinic').then((res) => {
        medTypes.value = res
      })
    })

    return {
      medType,
      medTypes,
      patientId,
      cptYbState,
      cptInsutype,
      cptPersType,
      receiptBoxStyle,
      tableHeight,
      showInsuinfo,
      psnBaseinfo,
      mzVisit,
      receipts,
      orderNos,
      currentReceipts,
      totalFee,
      ordersTable,
      timesTable,
      data,
      spcChrDiseAccts,
      showSpcChrAccts,
      matnDises,
      showMatnDises,
      showInputDiags,
      searchMethod,
      searchMethods,
      diagTypes,
      diagItem,
      diags,
      addDiag,
      deleteDiag,
      saveDiag,
      searchDiag,
      handleSelectDiag,
      mzPreSetl,
      clickTimes,
      colorStatus,
      clickOrderNo,
      handleClickInsuinfo,
      uploadFees,
      clearinfo,
      markMzFees,
      unmarkMzFees,
      registor,
      receiptsOpts,
    }
  },
}
</script>

<style scoped>
.receipt-title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  height: 32px;
  line-height: 32px;
}
.receipt-head {
  display: flex;
  height: 22px;
  line-height: 22px;
}
.receipt-head > div {
  width: 33%;
  padding-right: 20px;
}
.receipt-item {
  display: flex;
}
.receipt-tips {
  margin: 0 0 0 64px;
}
.receipt-tips > span {
  margin-right: 15px;
}
.w75 {
  width: 70%;
  font-size: 15px;
}
.w75 * {
  font-size: 15px;
}
.w25 {
  width: 25%;
  font-size: 15px;
  color: #0f5e0f;
  font-weight: bold;
}
</style>
