<template>
  <el-container>
    <el-main style="margin-top: 10px">
      <el-row>
        <el-col>
          <el-tag effect="dark" size="small">住院号: {{ patient.inpatientNo }}</el-tag>
          <el-tag effect="dark" size="small" type="warning">患者姓名: {{ patient.name }}</el-tag>
          <el-tag effect="dark" size="small"> 床号: {{ patient.bedNo }}</el-tag>
          <el-tag effect="dark" size="small" type="warning">住院次数: {{ patient.admissTimes }}</el-tag>
          <el-tag effect="dark" size="small">性别: {{ cptSex(patient.sex) }}</el-tag>
          <el-tag effect="dark" size="small" type="warning">病房: {{ patient.wardName }}</el-tag>
          <el-tag effect="dark" size="small">入院日期: {{ patient.admissDate }}</el-tag>
          <el-tag effect="dark" size="small" type="warning">医保身份: {{ patient.responceTypeName }}</el-tag>
          <el-tag effect="dark" size="small">总费用: {{ patient.totalCharge }}</el-tag>
        </el-col>
        <el-col>
          住院号：
          <el-input style="width: 80px" v-model="queryTerm.inpatientNo" @keyup.enter="getHuanZheXinXiClick"></el-input>
          <span v-show="queryTerm.zaiHuanChuYuan === 1">
        住院次数：<el-input-number :min="0" :precision="0" style="width: 60px" v-model="queryTerm.admissTimes"
                              :controls="false"></el-input-number>
      </span>
          <el-divider direction="vertical"></el-divider>
          <el-switch active-color="#ff4949" inactive-color="#13ce66" active-text="出院" inactive-text="在院"
                     :active-value="1"
                     :inactive-value="0" v-model="queryTerm.zaiHuanChuYuan">
          </el-switch>
          <el-divider direction="vertical"></el-divider>
          项目名称：
          <el-select v-model="queryTerm.chargeCode" remote filterable clearable :remote-method="remoteMethodChargeCode">
            <el-option v-for="item in chargeCodeNameData" :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>{{ item.name }}</span>
            </el-option>
          </el-select>
          录入日期：
          <el-date-picker
              type="daterange"
              v-model="queryTerm.dateRange"
              placeholder="选择日期"
              style="width: 200px"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
          ></el-date-picker>
          <el-button
              @click="queryTerm.riQiPaiXu === 'DESC' ? (queryTerm.riQiPaiXu = 'ASC') : (queryTerm.riQiPaiXu = 'DESC')"
              type="success"
              :icon="queryTerm.riQiPaiXu === 'DESC' ? 'CaretBottom' : 'CaretTop'"
          >{{ queryTerm.riQiPaiXu === 'DESC' ? '降序' : '升序' }}
          </el-button>
          <el-select style="width: 70px" v-model="queryTerm.feiYongLeiXingCode">
            <el-option v-for="item in feiYongLeiXing" :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>{{ item.name }}</span>
            </el-option>
          </el-select>
          <el-select v-model="queryTerm.orderNo" style="width: 70px" @change="queryHuanZheFeiYong">
            <el-option v-for="item in yiZhuTuiFeiLeiXing" :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>{{ item.name }}</span>
            </el-option>
          </el-select>
          <el-select v-model="queryTerm.tuiFeiFlag" style="width: 70px" @change="queryHuanZheFeiYong">
            <el-option v-for="item in tuiFeiLeiXin" :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>{{ item.name }}</span>
            </el-option>
          </el-select>
          <el-button type="primary" @click="getHuanZheXinXiClick">查询</el-button>
        </el-col>
      </el-row>

      <el-tabs v-model="elTabPane">
        <el-tab-pane label="已录入费用" name="ylrfy">
          <huan-zhe-fei-yong
              :init="tableDataHuanZheFeiYong"
              :patient="patient"
              @queryFeiYong="getHuanZheXinXiClick"
              @size="handleSizeChange"
              @current="handleCurrentChange"
              @execl="exportExecl"
          ></huan-zhe-fei-yong>
        </el-tab-pane>
        <el-tab-pane label="费用录入" name="fylr">
          <xiang-mu-lu-ru :patient="patient"></xiang-mu-lu-ru>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import {ref} from 'vue'
import store from '@/store'
import {getHuanZheXinXi} from '../../api/zhu-yuan-yi-ji/yi-ji-fei-yong-lu-ru'
import {cptSex} from '@/utils/computed'
import {getChargeCode} from '@/api/inpatient/xiang-mu-lu-ru'
import {getHuanZheFeiYong} from '@/api/inpatient/xiang-mu-lu-ru'
import HuanZheFeiYong from '@/components/med-tec-mod/HuanZheFeiYong.vue'
import XiangMuLuRu from '@/components/med-tec-mod/YiJiXiangMuLuRu.vue'
import {yiZhuTuiFeiLeiXing, feiYongLeiXing, tuiFeiLeiXin} from '@/data/index'
import {shortcuts} from '@/data/shortcuts'
import {getDateRangeFormatDate} from '@/utils/date'
import {ElMessage, ElMessageBox} from 'element-plus'
import {downloadExcel} from '../../utils/excel'

export default {
  components: {HuanZheFeiYong, XiangMuLuRu},
  name: 'yiJiFeiYongLuRu',
  setup() {
    const windowSize = store.state.app.windowSize
    const windowHeigth = windowSize.h
    const dangQianShiJian = new Date()

    const queryTerm = ref({
      inpatientNo: '',
      admissTimes: 0,
      zaiHuanChuYuan: '',
      dateRange: [dangQianShiJian, dangQianShiJian],
      riQiPaiXu: 'DESC',
      chargeCode: '',
      orderNo: 2,
      feiYongLeiXingCode: 0,
      dept: store.state.user.info.deptCode === '3100000' ? '' : store.state.user.info.deptCode,
      currentPage: 1,
      pageSize: 30,
      total: 0,
      tuiFeiFlag: 0,
    })

    const total = ref(0)

    const elTabPane = ref('ylrfy')
    const patient = ref({})

    const tableDataHuanZheFeiYong = ref([])

    const getHuanZheXinXiClick = () => {
      if (queryTerm.value.zaiHuanChuYuan === 0) {
        queryTerm.value.admissTimes = 0
      }
      if (patient.inpatientNo === queryTerm.value.inpatientNo) {
        queryHuanZheFeiYong()
      } else {
        getHuanZheXinXi(queryTerm.value.inpatientNo, queryTerm.value.zaiHuanChuYuan, queryTerm.value.admissTimes)
            .then((res) => {
              patient.value = res
              patient.value.feiYongLeiXingCode = queryTerm.value.feiYongLeiXingCode
              queryTerm.value.admissTimes = res.admissTimes
              queryHuanZheFeiYong()
            })
            .catch(() => {
              patient.value = {}
              tableDataHuanZheFeiYong.value = []
            })
      }
    }

    const queryHuanZheFeiYong = () => {
      if (elTabPane.value !== 'ylrfy') return
      let dateRangeS = getDateRangeFormatDate(queryTerm.value.dateRange)
      queryTerm.value.startTime = dateRangeS.startTime
      queryTerm.value.endTime = dateRangeS.endTime
      queryTerm.value.currentPage = 1
      queryTerm.value.total = 0
      getHuanZheFeiYong(queryTerm.value)
          .then((res) => {
            total.value = res.total
            patient.value.total = total.value
            tableDataHuanZheFeiYong.value = res
          })
          .catch(() => {
            tableDataHuanZheFeiYong.value = []
          })
    }

    const handleHuanZheFeiYong = () => {
      if (elTabPane.value !== 'ylrfy') return
      let dateRangeS = getDateRangeFormatDate(queryTerm.value.dateRange)
      queryTerm.value.startTime = dateRangeS.startTime
      queryTerm.value.endTime = dateRangeS.endTime
      queryTerm.value.total = total.value
      getHuanZheFeiYong(queryTerm.value)
          .then((res) => {
            res.total = total.value
            tableDataHuanZheFeiYong.value = res
          })
          .catch(() => {
            tableDataHuanZheFeiYong.value = []
          })
    }

    // 根据项目名称来查询
    const chargeCodeNameData = ref([])

    /**
     * 远程搜索
     */
    const remoteMethodChargeCode = (val) => {
      if (val.length >= 2) {
        getChargeCode(val).then((res) => {
          chargeCodeNameData.value = res
        })
      }
    }

    // 分页
    const handleSizeChange = (val) => {
      queryTerm.value.pageSize = val.val
      patient.value.pageSize = val.val
      queryHuanZheFeiYong()
    }

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

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

    return {
      windowHeigth,
      queryTerm,
      getHuanZheXinXiClick,
      tableDataHuanZheFeiYong,
      patient,
      cptSex,
      queryHuanZheFeiYong,
      chargeCodeNameData,
      remoteMethodChargeCode,
      elTabPane,
      yiZhuTuiFeiLeiXing,
      tuiFeiLeiXin,
      shortcuts,
      feiYongLeiXing,
      handleSizeChange,
      handleCurrentChange,
      exportExecl,
    }
  },
}
</script>

<style></style>
