<template>
  <el-container>
    <el-header style="margin-top: 10px">
      <el-date-picker
        v-model="queryTerm.dateRange"
        :shortcuts="clockinShortcuts"
        end-placeholder="结束日期"
        placeholder="选择日期"
        range-separator="至"
        start-placeholder="开始日期"
        style="width: 280px"
        type="daterange"
      ></el-date-picker>
      <el-select v-model="queryTerm.laiYuan" style="width: 70px">
        <el-option :value="0" label="住院"></el-option>
        <el-option :value="1" label="门诊"></el-option>
      </el-select>
      <span v-if="quanXian.indexOf(1) > -1 || quanXian.indexOf(34) > -1">
        录入人
        <el-select v-model="queryTerm.opId" :remote-method="remoteMethodRenYuan" clearable filterable remote style="width: 100px">
          <el-option v-for="item in renYuanList" :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>
      </span>
      申请科室
      <el-select v-model="queryTerm.reqDeptCode" clearable filterable remote style="width: 120px">
        <el-option v-for="item in deptList" :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.chargeCodeMx" :remote-method="remoteMethodChargeCode" clearable filterable remote style="width: 150px">
        <el-option v-for="item in chargeCodeList" :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.fenLei" style="width: 90px" @change="getKeShouFeiClick">
        <el-option v-for="item in fenLeiDate" :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>
      <br />
      <span v-if="quanXian.indexOf(1) > -1">
        执行科室
        <el-select v-model="queryTerm.execUnitList" clearable collapse-tags filterable multiple remote>
          <el-option v-for="item in deptList" :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>
      </span>
      <el-button icon="Search" type="success" @click="getKeShouFeiClick">查询</el-button>
      <el-button icon="Download" type="primary" @click="exportExcel"> 导出excel</el-button>
      <el-tag>总金额：{{ queryTerm.chargeFee }}</el-tag>
    </el-header>
    <el-main style="margin-top: 15px">
      <el-table :data="keShiFeiYongData" :height="windowHeigth / 1.15 - 10" highlight-current-row stripe>
        <el-table-column v-if="queryTerm.fenLei === 3" label="患者姓名" prop="patientName"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 3" label="住院号" prop="patient"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 3" label="次数" prop="times"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 2 || queryTerm.fenLei === 3" label="项目编码" prop="chargeCodeMx"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 2 || queryTerm.fenLei === 3" label="项目名称" prop="chargeCodeName"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 3" label="执行日期" prop="chargeDate" width="80"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 0" label="收费日期" prop="chargeDateString" width="80"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 3 || queryTerm.fenLei === 1" label="录入人" prop="opName"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 3" label="执行科室" prop="execUnitName"></el-table-column>
        <el-table-column v-if="queryTerm.fenLei === 3" label="申请科室" prop="wardCodeName"></el-table-column>
        <el-table-column label="金额" prop="chargeFee"></el-table-column>
        <el-table-column label="数量" prop="chargeAmount"></el-table-column>
        <el-table-column label="来源" prop="source"></el-table-column>
      </el-table>
      <el-pagination
        :current-page="fenYeQueryTerm.currentPage"
        :page-size="fenYeQueryTerm.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        :total="fenYeQueryTerm.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 5px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { clockinShortcuts } from '@/data/shortcuts'
import { onMounted, ref } from 'vue'
import { getKeShouFei } from '@/api/querydata/keshishourutongji'
import { getChargeCode, getDept, getRenYuan } from '@/api/public-api'
import { getDateRangeFormatDate } from '@/utils/date'
import store from '@/store'
import { clone } from '@/utils/clone'
import { ElMessage, ElMessageBox } from 'element-plus'
import { downloadExcel } from '@/utils/excel'

export default {
  setup() {
    const windowSize = store.state.app.windowSize
    const windowHeigth = windowSize.h

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

    const queryTerm = ref({
      dateRange: clockinShortcuts[0].value,
      laiYuan: 0,
      opId: '',
      chargeCodeMx: null,
      reqDeptCode: '',
      execUnitList: [store.state.user.info.deptCode],
      fenLei: 3,
      currentPage: 1,
      pageSize: 40,
      total: 0,
      chargeFee: 0,
    })

    const fenYeQueryTerm = ref({
      total: 0,
      currentPage: 1,
      pageSize: 40,
    })

    const renYuanList = ref([])
    const chargeCodeList = ref([])
    const deptList = ref([])

    const keShiFeiYongData = ref([])

    const remoteMethodRenYuan = (val) => {
      if (val.length >= 2)
        getRenYuan(val).then((res) => {
          renYuanList.value = res
        })
    }

    const remoteMethodChargeCode = (val) => {
      if (val.length >= 2) {
        getChargeCode(val).then((res) => {
          chargeCodeList.value = res
        })
      }
    }

    const getKeShouFeiClick = () => {
      let date = getDateRangeFormatDate(queryTerm.value.dateRange)
      queryTerm.value.startTime = date.startTime
      queryTerm.value.endTime = date.endTime
      queryTerm.value.currentPage = 1
      queryTerm.value.total = 0
      getKeShouFei(queryTerm.value).then((res) => {
        queryTerm.value.chargeFee = res.chargeFee
        queryTerm.value.total = res.total
        keShiFeiYongData.value = res.data
        fenYeQueryTerm.value = clone(queryTerm.value)
      })
    }

    const handleSizeChange = (val) => {
      fenYeQueryTerm.value.pageSize = val
      getKeShouFei(fenYeQueryTerm.value).then((res) => {
        keShiFeiYongData.value = res.data
      })
    }

    const handleCurrentChange = (val) => {
      fenYeQueryTerm.value.currentPage = val
      getKeShouFei(fenYeQueryTerm.value).then((res) => {
        keShiFeiYongData.value = res.data
      })
    }

    const exportExcel = () => {
      if (keShiFeiYongData.value.length <= 0) {
        return ElMessage.warning({ message: '请先查询出数据' })
      }
      ElMessageBox.prompt('导出文件名字', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '文件名不能为空 (∩•̀ω•́)⊃-*⋆',
      })
        .then(({ value }) => {
          const data = {
            param: {
              startTime: fenYeQueryTerm.value.startTime,
              endTime: fenYeQueryTerm.value.endTime,
              fenLei: fenYeQueryTerm.value.fenLei,
              chargeCodeMx: fenYeQueryTerm.value.chargeCodeMx,
              opId: fenYeQueryTerm.value.opId,
              currentPage: 1,
              pageSize: fenYeQueryTerm.value.total,
              total: fenYeQueryTerm.value.total,
              execUnitList: fenYeQueryTerm.value.execUnitList,
              reqDeptCode: fenYeQueryTerm.value.reqDeptCode,
              laiYuan: fenYeQueryTerm.value.laiYuan,
            },
            url: '/keShiTongJi/exportExcel',
            fileName: value + '.xlsx',
          }
          setTimeout(() => {
            downloadExcel(data)
          }, 500)
        })
        .catch(() => {})
    }

    onMounted(() => {
      getDept().then((res) => {
        deptList.value = res
      })
      if (!(quanXian.indexOf(1) > -1 || quanXian.indexOf(34) > -1)) {
        queryTerm.value.opId = store.state.user.info.code
      }
    })

    return {
      queryTerm,
      clockinShortcuts,
      remoteMethodRenYuan,
      renYuanList,
      chargeCodeList,
      remoteMethodChargeCode,
      deptList,
      fenLeiDate: ref([
        { code: 0, name: '日期' },
        { code: 1, name: '录入人' },
        { code: 2, name: '项目编码' },
        { code: 3, name: '不分类' },
      ]),
      getKeShouFeiClick,
      windowHeigth,
      keShiFeiYongData,
      handleSizeChange,
      handleCurrentChange,
      fenYeQueryTerm,
      exportExcel,
      quanXian,
    }
  },
}
</script>

<style></style>
