<template>
  <el-container>
    <el-header style="margin-top: 10px">
      <el-button @click="queryTermDialog = true" type="primary" icon="el-icon-search">检索条件</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button icon="el-icon-upload" type="success" @click="upldAllList" :disabled="queryTerm.list.length === 0"
                 v-if="shenHeQuanXian()">
        选中上传
      </el-button>
      <el-button icon="el-icon-upload" type="warning" @click="upldSelections" :disabled="queryTerm.list.length === 0"
                 v-if="shenHeQuanXian()">
        全部上传
      </el-button>
      <el-button icon="el-icon-download" type="success" @click="exportExcel" :disabled="queryTerm.list.length === 0"
                 v-if="shenHeQuanXian()">导出
        Execl
      </el-button>
      <el-button type="primary" icon="el-icon-refresh-left" @click="shuaXin">刷新数据
      </el-button>
      <el-button type="success" @click="xianZhiShiJianClick" v-if="shenHeQuanXian()">设置限制时间</el-button>
      <xian-zhi-shi-jian ref="xianZhiShiJian"></xian-zhi-shi-jian>
    </el-header>
    <el-main>
      <el-table :height="store.state.app.windowSize.h / 1.2" :data="queryTerm.list" border highlight-current-row stripe
                @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="35"></el-table-column>
        <el-table-column fixed prop="psnName" label="姓名">
          <template #default="scope">
            <el-button type="text" @click="jieSuanDanXinXi(scope.row)">
              <span v-html="auditName(scope.row)"></span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="outDeptName" label="出院科室">
          <template #default="scope">
            <el-button v-if="scope.row.outDept === dept || shenHeQuanXian" type="text"
                       @click="huoQuXiuGaiYiShen(scope.row.referPhysician,scope.row.referPhysicianName,scope.row.patNo,scope.row.times)">
              {{
                scope.row.outDeptName
              }}
            </el-button>
            <span v-else>{{ scope.row.outDeptName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="patNo" label="住院号/门诊号"></el-table-column>
        <el-table-column prop="gendName" label="性别" width="40"></el-table-column>
        <el-table-column prop="actIptDays" label="住院天数"></el-table-column>
        <el-table-column prop="disDiag" label="诊断编码"></el-table-column>
        <el-table-column prop="disDiagComment" label="诊断名称"></el-table-column>
        <el-table-column prop="operationName" label="治疗方式"></el-table-column>
        <el-table-column prop="medfeeSumamt" label="总费用"></el-table-column>
        <el-table-column prop="fundPaySumamt" label="报销金额"></el-table-column>
        <el-table-column prop="insutypeName" label="险种类型"></el-table-column>
        <el-table-column prop="psnTypeName" label="人员类别"></el-table-column>
        <el-table-column prop="setlTime" label="结算时间"></el-table-column>
        <el-table-column prop="medTypeName" label="医疗类别"></el-table-column>
        <el-table-column prop="clrOptinsName" label="清算机构"></el-table-column>
        <el-table-column prop="referPhysicianName" label="管床医生"></el-table-column>
        <el-table-column prop="zhuanKeName" label="转科室"></el-table-column>
        <el-table-column label="结算单" v-if="shenHeQuanXian()">
          <template #default="scope">
            <el-button>查看结算单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <jie-suan-dan-da-ying></jie-suan-dan-da-ying>
      <el-pagination
          :page-sizes="[10, 20, 30, 40, 50 , 100]"
          :page-size="queryTerm.pageSize"
          :current-page="queryTerm.currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryTerm.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-main>
    <el-dialog v-model="queryTermDialog" width="60%" title="数据筛选">
      <el-form ref="queryTermRef" label-width="120px" size="mini" :model="queryTerm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="日期范围" prop="dateRange">
              <el-date-picker
                  type="daterange"
                  v-model="queryTerm.dateRange"
                  placeholder="选择日期"
                  size="mini"
                  style="width: 280px"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :shortcuts="clockinShortcuts"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="结算类型" prop="clrType">
              <el-select v-model="queryTerm.clrType" placeholder="结算类别" style="width: 100px">
                <el-option v-for="item in clrTypes" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="住院号" prop="patNo">
              <el-input v-model="queryTerm.patNo" style="width: 120px" @blur="patNo=$event.target.value.trim()"
                        @keyup.enter="query"
                        placeholder="住院号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="出院科室" prop="disDept">
              <el-select v-model="queryTerm.outDept" placeholder="出院科室" filterable clearable multiple
                         :collapse-tags="zheDieXianShi"
              >
                <el-option v-for="item in disDepts" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="spanWidth">
            <el-form-item label="医疗类别" prop="medType">
              <el-select v-model="queryTerm.medType" placeholder="医疗类别" filterable clearable multiple
                         :collapse-tags="zheDieXianShi"
              >
                <el-option v-for="item in medTypes" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="上传类型" prop="psnType">
              <el-select v-model="queryTerm.flag">
                <el-option v-for="item in flags" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="管床医生" prop="referPhysician">
              <el-select v-model="queryTerm.referPhysician" placeholder="管床医生" filterable clearable remote
                         reserve-keyword
                         :remote-method="remoteMethod"
              >
                <el-option v-for="item in referPhysicians" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="险种类型" prop="insutype">
              <el-select v-model="queryTerm.insutype" placeholder="险种类型" filterable clearable multiple
                         :collapse-tags="zheDieXianShi"
              >
                <el-option v-for="item in insutypes" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="人员类别" prop="psnType">
              <el-select v-model="queryTerm.psnType" placeholder="人员类别" filterable clearable multiple
                         :collapse-tags="zheDieXianShi"
              >
                <el-option v-for="item in getPsnType" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="结算机构" prop="psnType">
              <el-select v-model="queryTerm.clrOptins" placeholder="结算机构" filterable clearable multiple
                         :collapse-tags="zheDieXianShi"
              >
                <el-option v-for="item in clrOptins" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="审核类型" prop="auditFlag">
              <el-select v-model="queryTerm.auditFlag"
              >
                <el-option v-for="item in auditFlags" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="spanWidth">
            <el-form-item label="申报类型" prop="auditFlag">
              <el-select v-model="queryTerm.decTypes" filterable clearable multiple
                         :collapse-tags="zheDieXianShi"
              >
                <el-option v-for="item in decTypes" :key="item.code" :value="item.code" :label="item.name">
                  <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" size="small" icon="el-icon-search" @click="query">查询</el-button>
      <el-button type="warning" size="small" icon="el-icon-refresh-right" @click="chongZhi">重置</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-switch
          v-model="zheDieXianShi"
          active-color="#13ce66"
          inactive-color="#409eff"
          active-text="折叠"
          inactive-text="展开"
          :active-value="true"
          :inactive-value="false"
      >
      </el-switch>
    </el-dialog>
    <el-dialog v-model="xiuGaiYiShen" title="管床医生">
      <el-select v-model="guanChuangYiShen.yiShenCode" filterable clearable remote
                 reserve-keyword
                 :remote-method="remoteMethod">
        <el-option v-for="item in referPhysicians" :key="item.code" :value="item.code" :label="item.name">
          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button @click="xiuGaiGuanChuangYiShenClick">修改</el-button>
    </el-dialog>
    <jie-suan-dan-xiang-qing @shuaXin="shuaXin" ref="jieSuanDanDataDialog"
                             :data="jieSuanDanData"></jie-suan-dan-xiang-qing>
    <Progress/>
  </el-container>
</template>

<script>
import {clockinShortcuts} from '../../../data/shortcuts'
import {ref, unref, watch, onMounted} from "vue"
import store from '@/store'
import {getClrTypes, getInsutypes} from "../../../api/medical-insurance/si-dict"
import {getDateRangeFormatDate} from "../../../utils/date"
import {
  getMedType,
  huoQuJieSuanRenYuan,
  jieSuanDanKeXiuGaiXinXi,
  upldSetlList,
  upldSetlListTimes,
  xiuGaiGuanChuangYiShen
} from "../../../api/medical-insurance/si-setl-upload"
import {clrOptinsData, decTypes, getPsnType} from "../../../data"
import {getDept} from "../../../api/yibao/xiang-mu-lu-ru"
import JieSuanDanXiangQing from "../../../components/si-sheet-upload/JieSuanDanXiangQing.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import Progress from '../../../components/progress/Index.vue'
import {downloadExcel} from "../../../utils/excel";
import {getRenYuan} from "../../../api/public-api";
import {
  auditFlags,
  auditName,
  shenHeQuanXian,
  xianZhongChuQu
} from "../../../components/si-sheet-upload/jieSuanDanXiuGai";
import XianZhiShiJian from "../../../components/si-sheet-upload/XianZhiShiJian.vue";
import {stringNotBlank} from "../../../utils/blank-utils";
import JieSuanDanDaYing from "../../../components/si-sheet-upload/jieSuanDanDaYing.vue";

export default {
  name: "SetSheetUpload",
  components: {JieSuanDanDaYing, XianZhiShiJian, JieSuanDanXiangQing, Progress},
  setup: function () {
    const queryTerm = ref({
      startTime: '',
      endTime: '',
      patNo: '',
      referPhysician: shenHeQuanXian() ? '' : store.state.user.info.code,
      insutype: [],
      dateRange: [clockinShortcuts[0].value[0], clockinShortcuts[0].value[1]],
      outDept: [],
      clrType: '21',
      medType: [],
      clrOptins: [],
      decTypes: [],
      flag: 0,
      auditFlag: 4,
      psnType: '',
      currentPage: 1,
      pageSize: 40,
      total: 0,
      list: []
    })
    const dept = store.state.user.info.deptCode
    // 表单
    const queryTermRef = ref(null)
    // 表格的宽度
    const spanWidth = ref(8)
    // 查询的 对话框
    const queryTermDialog = ref(true)
    //  折叠显示
    const zheDieXianShi = ref(true)
    // 结算单信息
    const jieSuanDanData = ref({})
    // 险种类型
    const insutypes = ref([])
    // 出院科室
    const disDepts = ref([])
    // 结算类别
    const clrTypes = ref([])
    // 医疗类别
    const medTypes = ref([])
    // 结算机构
    const clrOptins = ref([])
    // 管床医生
    const referPhysicians = ref([])

    const selections = ref([])

    const jieSuanDanDataDialog = ref(null)

    const handleSelectionChange = (val) => {
      selections.value = val
    }

    const query = async () => {
      let form = unref(queryTermRef)
      if (!form) return
      try {
        await form.validate()
        let dates = getDateRangeFormatDate(queryTerm.value.dateRange)
        queryTerm.value.startTime = dates.startTime
        queryTerm.value.endTime = dates.endTime
        queryTerm.value.total = 0
        queryTerm.value.currentPage = 1
        huoQuJieSuanRenYuan(queryTerm.value).then((res) => {
          queryTerm.value.list = res === null ? [] : res.records
          queryTerm.value.total = res.total
          queryTermDialog.value = false
        })
      } catch (error) {
      }
    }

    const queryCurrentPage = async () => {
      let form = unref(queryTermRef)
      if (!form) return
      try {
        await form.validate()
        let dates = getDateRangeFormatDate(queryTerm.value.dateRange)
        queryTerm.value.startTime = dates.startTime
        queryTerm.value.endTime = dates.endTime
        huoQuJieSuanRenYuan(queryTerm.value).then((res) => {
          queryTerm.value.list = res.records
        })
      } catch (error) {
      }
    }

    watch(() => store.state.app.windowSize.w,
        () => {
          const w = store.state.app.windowSize.w
          if (w >= 1500) {
            spanWidth.value = 8
          } else if (w >= 1300) {
            spanWidth.value = 12
          } else {
            spanWidth.value = 24
          }
        })

    const upldAllList = () => {
      if (queryTerm.value.clrType !== '21') {
        ElMessage({
          message: '结算类别请选择为【住院】！',
          type: 'warning',
          showClose: true,
        })
        return
      }
      upldSetlList(selections.value)
    }

    const upldSelections = () => {
      if (queryTerm.value.clrType !== '21') {
        ElMessage({
          message: '结算类别请选择为【住院】！',
          type: 'warning',
          showClose: true,
        })
        return
      }
      if (queryTerm.value.list.length === 0) {
        ElMessage({
          message: '请先查询出数据',
          type: 'warning',
          showClose: true,
        })
        return
      }
      upldSetlListTimes(queryTerm.value)
    }

    const handleSizeChange = (val) => {
      queryTerm.value.pageSize = val
      query()
    }

    const handleCurrentChange = (val) => {
      queryTerm.value.currentPage = val
      queryCurrentPage()
    }

    const chongZhi = () => {
      unref(queryTermRef).resetFields()
    }

    const jieSuanDanXinXi = (val) => {
      if (queryTerm.value.clrType !== '21') {
        ElMessage({
          message: '结算类别请选择为【住院】！',
          type: 'warning',
          showClose: true,
        })
        return
      }
      jieSuanDanKeXiuGaiXinXi(val.patNo, val.times, val.ledgerSn).then((res) => {
        jieSuanDanData.value = res
        jieSuanDanData.value.medType = val.medType
        jieSuanDanData.value.actIptDays = val.actIptDays
        jieSuanDanData.value.outDeptName = val.outDeptName
        jieSuanDanData.value.medTypeName = val.medTypeName
        jieSuanDanData.value.disDiag = val.disDiag
        jieSuanDanData.value.disDiagComment = val.disDiagComment
        jieSuanDanData.value.medfeeSumamt = val.medfeeSumamt
        jieSuanDanData.value.fundPaySumamt = val.fundPaySumamt
        jieSuanDanData.value.decType = val.decType
        jieSuanDanData.value.upload = val
        jieSuanDanData.value.shenHeXinXi = {
          id: val.id,
          reqOpId: val.reqOpId,
          reqOpName: val.reqOpName,
          reqOpDate: val.reqOpDate,
          reqRemark: val.reqRemark,
          auditStaff: val.auditStaff,
          auditName: val.auditName,
          auditTime: val.auditTime,
          auditRemark: val.auditRemark,
          auditFlag: val.auditFlag
        }
        jieSuanDanDataDialog.value.openDialog(true)
      })
    }

    const exportExcel = () => {
      if (queryTerm.value.total > 0) {
        ElMessageBox.prompt('导出文件名字', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '文件名不能为空 (∩•̀ω•́)⊃-*⋆',
        }).then(({value}) => {
          const data = {
            param: queryTerm.value,
            url: '/setlListUpld/exportExcel',
            fileName: `${value}.xlsx`,
          }
          setTimeout(() => {
            downloadExcel(data)
          }, 500)
        }).catch((e) => {
        })
      } else {
        ElMessage.error('请先查询出数据')
      }
    }

    const remoteMethod = (val) => {
      if (val.length > 1) {
        getRenYuan(val).then((res) => {
          referPhysicians.value = res
        })
      }
    }

    const shuaXin = () => {
      queryCurrentPage()
    }

    /* 限制时间 */
    const xianZhiShiJian = ref(null)
    const xianZhiShiJianClick = () => {
      xianZhiShiJian.value.xianZhiShiJianDialog = true
    }

    /* 修改管床医生 */
    const guanChuangYiShen = ref({
      yiShenCode: '',
      patNo: '',
      times: 0,
    })
    const xiuGaiYiShen = ref(false)
    const huoQuXiuGaiYiShen = (code, name, patNo, times) => {
      if (stringNotBlank(code)) {
        referPhysicians.value = [{code: code, name: name}]
        guanChuangYiShen.value.yiShenCode = code
      }
      xiuGaiYiShen.value = true
      guanChuangYiShen.value.patNo = patNo
      guanChuangYiShen.value.times = times
    }

    const xiuGaiGuanChuangYiShenClick = () => {
      xiuGaiGuanChuangYiShen(guanChuangYiShen.value.patNo, guanChuangYiShen.value.times, guanChuangYiShen.value.yiShenCode).then((res) => {
        xiuGaiYiShen.value = false
      })
    }

    onMounted(() => {
      getInsutypes().then((res) => {
        insutypes.value = res
        getClrTypes().then((res2) => {
          clrTypes.value = res2
        })
      })
      getMedType().then((res) => {
        medTypes.value = res
      })
      getDept().then((res) => {
        disDepts.value = res
      })
      clrOptins.value = clrOptinsData
      setTimeout(() => {
        if (!shenHeQuanXian()) {
          referPhysicians.value = [{code: store.state.user.info.code, name: store.state.user.info.name}]
          queryTerm.value.medType = ['22', '2101']
          queryTerm.value.insutype = xianZhongChuQu(insutypes.value, ['340', '350', '360', '510', '410'])
          queryTerm.value.psnType = xianZhongChuQu(getPsnType, ["13"])
          queryTerm.value.clrOptins = xianZhongChuQu(clrOptins.value, ["439900", "430121 "])
        }
        // queryTermDialog.value = true
      }, 1000)
    })
    return {
      queryTerm,
      clockinShortcuts,
      handleSizeChange,
      handleCurrentChange,
      insutypes,
      query,
      upldAllList,
      upldSelections,
      disDepts,
      clrTypes,
      medTypes,
      getPsnType,
      queryTermDialog,
      chongZhi,
      queryTermRef,
      store,
      spanWidth,
      zheDieXianShi,
      jieSuanDanXinXi,
      jieSuanDanData,
      handleSelectionChange,
      exportExcel,
      referPhysicians,
      clrOptins,
      jieSuanDanDataDialog,
      remoteMethod,
      auditFlags,
      shuaXin,
      xianZhiShiJian,
      xianZhiShiJianClick,
      shenHeQuanXian,
      guanChuangYiShen,
      huoQuXiuGaiYiShen,
      xiuGaiGuanChuangYiShenClick,
      xiuGaiYiShen,
      auditName,
      dept,
      decTypes,
      flags: ref([
        {code: 0, name: '全部'},
        {code: 1, name: '未传'},
        {code: 2, name: '已传'}
      ])
    }
  }
}


</script>

<style scoped>

</style>
