<template>
  <div style="display: flex; width: 100%">
    <div id="listPage" :style="pageStyle">
      <div style="width: 100%; text-align: center; font-size: 22px; font-weight: bold; margin-bottom: 8px">{{ listTitle }}</div>
      <div style="width: 100%; display: flex; margin-bottom: 4px; font-size: 12px">
        <div style="width: 25%; text-align: left">医疗机构名称：长沙泰和医院</div>
        <div style="width: 25%">医疗机构编码：H43010500370</div>
        <div style="width: 25%">医院等级：三级综合</div>
        <div style="width: 25%; text-align: right">金额单位：元</div>
      </div>
      <div style="width: 100%; display: flex; margin-bottom: 8px; font-size: 12px">
        <div style="width: 25%; text-align: left">统筹区划：{{ setlinfo.insuplcAdmdvsName }}</div>
        <div style="width: 25%">{{ patNoType }}：{{ setlinfo.patNo }}</div>
        <div style="width: 25%">就诊号：{{ setlinfo.mdtrtId }}</div>
        <div style="width: 25%; text-align: right">打印日期：{{ nowdate }}</div>
      </div>
      <InpatientSetlList v-if="outParam.type === 21" :setlinfo="setlinfo"/>
      <OtherOutpatientSetlList v-if="outParam.type === 11 && !isEmployeeOutpatient" :setlinfo="setlinfo"/>
      <EmployeeOutpatientSetlList v-if="outParam.type === 11 && isEmployeeOutpatient" :setlinfo="setlinfo"/>
      <div v-if="outParam.type !== 0" style="display: flex;margin-top: 16px;text-align: left;font-size: 13px">
        <div style="width: 30%">患者/家属签字：</div>
        <div style="width: 30%">联系电话：</div>
        <div style="width: 20%">经办人：{{ setlinfo.staffName }}</div>
        <div style="width: 20%">审核人：</div>
      </div>
    </div>
    <div v-if="showOperatePane" style="margin-left: 30px; padding: 20px 0">
      <div>
        <div style="display: inline-block; width: 70px">患者类别：</div>
        <el-radio v-model="outParam.type" :label="21" @change="setlTypeChange">住院</el-radio>
        <el-radio v-model="outParam.type" :label="11" @change="setlTypeChange">门诊</el-radio>
      </div>
      <div style="margin-top: 8px">
        <el-input v-model="outParam.patNo" clearable :placeholder="patNoType"></el-input>
      </div>
      <div style="margin-top: 8px">
        <el-select v-model="outParam.label" @focus="getTimesList" placeholder="结算条目" style="width: 230px">
          <el-option v-for="item in timesList" :key="item.setlId" :value="item.label">
            <span style="color: #8492a6; font-size: 12px">{{ item.times }}</span>
            <el-divider direction="vertical"></el-divider>
            <span v-show="outParam.type === 21">
              <span style="color: #8492a6; font-size: 12px">{{ item.ledgerSn }}</span>
              <el-divider direction="vertical"></el-divider>
            </span>
            <span>{{ item.endtime }}</span>
          </el-option>
        </el-select>
      </div>
      <div style="width: 100%; text-align: right; margin-top: 8px">
        <el-button icon="Printer" @click="siPrint">打印</el-button>
        <el-button type="primary" icon="Search" @click="executeQrySetlinfo"> 查找</el-button>
      </div>
      <div style="width: 100%; text-align: right; margin-top: 32px; text-decoration: underline">
        <a href="http://webhis.thyy.cn:8888/LODOP/Lodop.zip">下载打印控件</a>
      </div>
    </div>
    <div v-else style="position: fixed; top: 6px; right: 30px">
      <el-button type="danger" icon="Printer" @click="siPrint">打印</el-button>
    </div>
  </div>
</template>

<script>
import {initLodop, getLodop} from '@/utils/c-lodop'
import {computed, onMounted, reactive, ref} from 'vue'
import store from '@/store'
import {ElMessage} from 'element-plus'
import router from '@/router'
import {querySiSetlList, fetchSiTimesList} from '@/api/medical-insurance/si-query'
import {getDate} from '@/utils/date'
import InpatientSetlList from "@/components/medical-insurance/settle-detail-list/InpatientSetlList.vue";
import OtherOutpatientSetlList from "@/components/medical-insurance/settle-detail-list/OtherOutpatientSetlList.vue";
import EmployeeOutpatientSetlList
  from "@/components/medical-insurance/settle-detail-list/EmployeeOutpatientSetlList.vue";

export default {
  components: {
    InpatientSetlList,
    OtherOutpatientSetlList,
    EmployeeOutpatientSetlList
  },
  setup() {
    const path = router.currentRoute.value.fullPath
    const showOperatePane = path === '/medins/qryManage/siSettleDetailList'
    const windowSize = store.state.app.windowSize
    const pageStyle = {
      height: windowSize.h + 'px',
      overflowY: 'scroll',
      width: '856px',
      textAlign: 'center',
      padding: '20px',
      background: 'white',
    }
    const outParam = reactive({
      type: 21,
      patNo: null,
      label: null,
    })
    const patNoType = computed(() => {
      return outParam.type === 21 ? '住院号' : '门诊ID'
    })
    const oldPatNo = ref(null)
    const timesList = ref([])
    const getTimesList = () => {
      if (!outParam.patNo) {
        return
      }
      if (oldPatNo.value === outParam.patNo) {
        return
      }
      oldPatNo.value = outParam.patNo
      fetchSiTimesList(outParam.patNo, outParam.type)
          .then((res) => {
            timesList.value = res
          })
          .catch(() => {
            timesList.value = []
            outParam.label = null
          })
    }

    const setlTypeChange = () => {
      timesList.value = []
      outParam.patNo = null
      outParam.label = null
      oldPatNo.value = null
      setlinfo.value = {
        mdtrtId: '',
        cuminfo: {},
        chrgItemLvInfo: {},
        polItemInfo: {},
      }
    }

    const listTitle = computed(() => {
      if (outParam.type === 0) {
        return '湖南省长沙市城乡居民医疗费用“一站式”结算单'
      } else if (outParam.type === 21) {
        return '湖南省长沙市住院费用结算单'
      }
      if (!isEmployeeOutpatient.value) {
        return '湖南省长沙市(普通、特殊)门诊费用结算单'
      }
      return isProvincial.value ? '湖南省省本级门诊统筹费用结算单' : '湖南省长沙市门诊统筹费用结算单';
    })
    const nowdate = getDate()
    const setlinfo = ref({
      mdtrtId: '',
      cuminfo: {},
      chrgItemLvInfo: {},
      polItemInfo: {}
    })
    const isEmployeeOutpatient = ref(false)
    const isProvincial = ref(false)
    const executeQrySetlinfo = () => {
      setlinfo.value = {
        mdtrtId: '',
        cuminfo: {},
        chrgItemLvInfo: {},
        polItemInfo: {},
      }
      querySiSetlList(outParam).then((res) => {
        setlinfo.value = res
        isEmployeeOutpatient.value = res.insutype === '310'
        isProvincial.value = res.insuplcAdmdvs === '439900'
      })
    }

    const siPrint = () => {
      if (!setlinfo.value.mdtrtId) {
        ElMessage({
          message: '无法打印空白的结算清单！',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return
      }
      const prntStyle =
          '<style>table {width: 100%;border-collapse: collapse; font-size: 13px;} td {border: 1px solid black;height: 20px;text-align:center; font-size: 13px;}</style>'
      const strFormHtml = prntStyle + '<body>' + document.getElementById('listPage').innerHTML + '</body>'
      let LODOP = getLodop()
      LODOP.PRINT_INIT('siSettleDetailList')
      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
      LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) // 整宽不变形
      LODOP.ADD_PRINT_HTM('2mm', '5mm', '100%', '100%', strFormHtml)
      LODOP.SET_PRINT_STYLE('ItemType', 3)
      if (outParam.type === 0) {
        LODOP.ADD_PRINT_TEXT('280mm', '190mm', '20mm', '2mm', '第#页/共&页')
      }
      LODOP.PREVIEW()
    }

    onMounted(() => {
      initLodop()
      if (!showOperatePane) {
        const params = router.currentRoute.value.params
        outParam.type = 11
        outParam.patNo = params.patientId
        outParam.times = params.times
        outParam.label = null
        executeQrySetlinfo()
      }
    })

    return {
      pageStyle,
      outParam,
      timesList,
      isEmployeeOutpatient,
      getTimesList,
      patNoType,
      nowdate,
      listTitle,
      setlinfo,
      showOperatePane,
      executeQrySetlinfo,
      siPrint,
      setlTypeChange,
    }
  },
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  height: 20px;
}
</style>
