<template>
  <page-layer>
    <template #header>
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"></el-date-picker>
      <el-select style="width: 130px" v-model="queryTerm.kssFlag" filterable clearable placeholder="是否为抗生素">
        <el-option v-for="item in kssFlag" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-select v-model="queryTerm.categoriesFlag" filterable categoriesFlag placeholder="药品大类">
        <el-option v-for="item in categoriesFlag" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      名称搜索：
      <el-select filterable remote clearable :remote-method="remoteMethod" v-model="queryTerm.drugCode" placeholder="拼音首字母搜索">
        <el-option v-for="item in shouFeiBianMaData" :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" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
      <el-button type="primary" v-if="returnData.length > 0" icon="Download" @click="exportExcel">导出excel </el-button>
    </template>
    <template #main>
      <el-table :data="returnData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :height="tableHeight" stripe highlight-current-row>
        <el-table-column prop="chargeCode" label="院内编码"></el-table-column>
        <el-table-column prop="packageSpecification" label="包装规格"></el-table-column>
        <el-table-column prop="name" show-overflow-tooltip label="项目名称"></el-table-column>
        <el-table-column prop="classCode" label="费用类别"></el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column prop="number" label="用量" sortable></el-table-column>
        <el-table-column prop="amountOfMoney" label="金额" sortable></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button text @click="chaKanYaoPingClick(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="returnData.length"
          style="margin-top: 5px"
      ></el-pagination>
      <el-dialog title="详情信息" v-model="yaoPingDialog" width="1200px">
        <yuanNeiTongJiCKXQ :data="xiangQingData"></yuanNeiTongJiCKXQ>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { reactive, ref } from 'vue'
import { shortcuts } from '@/data/shortcuts'
import { onMounted } from 'vue'
import { clockinShortcuts } from '@/data/shortcuts'
import { chaKanXiangQing, queryDrugs, yaoPinHuoXiangMuCode } from '@/api/querydata/query-pay-service'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import store from '@/store'
import { writeExcelFile, createWorkSheet } from '@/utils/excel'
import { ElMessage } from 'element-plus'
import yuanNeiTongJiCKXQ from './YuanNeiTongJiCKXQ.vue'
import PageLayer from "@/layout/PageLayer";

export default {
  components: {PageLayer, yuanNeiTongJiCKXQ },
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h / 1.2

    const start = formatDate(clockinShortcuts[1].value[0])
    const end = formatDate(clockinShortcuts[1].value[1])
    onMounted(() => {
      queryTerm.startTime = start
      queryTerm.endTime = end + ' 23:59:59'
      dateRange.value = [start, end]
    })

    const dateRange = ref()
    const classCode = ref([])
    const ward = ref([])

    const kssFlag = [
      { code: 0, name: '否' },
      { code: 1, name: '是' },
    ]
    const categoriesFlag = [
      { code: 0, name: '口服' },
      { code: 1, name: '大输液' },
      { code: 2, name: '针剂' },
      { code: 3, name: '草药饮片' },
    ]

    const queryTerm = reactive({
      startTime: '',
      endTime: '',
      kssFlag: '',
      categoriesFlag: '',
      drugCode: '',
    })

    const query = () => {
      let getDateRange = getDateRangeFormatDate(dateRange.value)
      queryTerm.startTime = getDateRange.startTime
      queryTerm.endTime = getDateRange.endTime
      if (queryTerm.startTime === null && queryTerm.kssFlag === '' && queryTerm.categoriesFlag === '' && queryTerm.drugCode === '') {
        ElMessage({
          type: 'warning',
          message: '至少选择一项搜索条件',
          duration: 2500,
          showClose: true,
        })
        return
      }
      queryDrugs(queryTerm).then((res) => {
        returnData.value = res
      })
    }

    const returnData = ref([])

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

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

    const currentPage = ref(1)
    const pageSize = ref(30)

    const exportExcel = () => {
      store.commit('app/setLoading', true)
      setTimeout(() => {
        const title = {
          chargeCode: '收费编码',
          packageSpecification: '包装规格',
          name: '项目名称',
          classCode: '费用类别',
          source: '来源',
          amountOfMoney: '金额',
          number: '用量',
        }
        const fields = ['chargeCode', 'packageSpecification', 'name', 'classCode', 'source', 'amountOfMoney', 'number']
        const workSheet = createWorkSheet(returnData.value, fields, title)
        const fileName = '药品收费（' + queryTerm.startTime + ' - ' + queryTerm.endTime + '）.xlsx'
        writeExcelFile(workSheet, fileName)
      }, 50)
    }

    const xiangQingData = ref([])

    /** 查看药品的项目情况 */
    const chaKanYaoPingClick = (val) => {
      val.startTime = queryTerm.startTime
      val.endTime = queryTerm.endTime
      chaKanXiangQing(val).then((res) => {
        yaoPingDialog.value = true
        xiangQingData.value = res
      })
    }

    const yaoPingDialog = ref(false)

    const shouFeiBianMaData = ref([])

    const remoteMethod = (val) => {
      if (val.length > 1) {
        yaoPinHuoXiangMuCode(val, 2).then((res) => {
          shouFeiBianMaData.value = res
        })
      }
    }

    return {
      dateRange,
      query,
      exportExcel,
      shortcuts,
      classCode,
      queryTerm,
      ward,
      returnData,
      tableHeight,
      handleSizeChange,
      handleCurrentChange,
      pageSize,
      currentPage,
      kssFlag,
      categoriesFlag,
      chaKanYaoPingClick,
      yaoPingDialog,
      shouFeiBianMaData,
      remoteMethod,
      xiangQingData,
    }
  },
}
</script>

<style></style>
