<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 v-model="queryTerm.classCode" filterable clearable placeholder="费用类型">
        <el-option v-for="item in classCode" :key="item.code" :label="item.name" :value="item.code">
          <span class="selectSpan">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      名称搜索：
      <el-select filterable remote clearable :remote-method="remoteMethod" v-model="queryTerm.projectCode" 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 style="margin-left: 5px" type="primary" icon="Search" @click="query">查询</el-button>
      <el-button type="primary" v-show="data.list.length" icon="Download" @click="excel">导出excel</el-button>
    </template>
    <template #main>
      <el-table :data="data.list.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :height="tableHeight" stripe highlight-current-row>
        <el-table-column prop="projectCode" label="项目编码"></el-table-column>
        <el-table-column prop="entryName" show-overflow-tooltip label="项目名称"></el-table-column>
        <el-table-column prop="originBrand" label="产地品牌"></el-table-column>
        <el-table-column prop="hospitalCode" label="耗材院内编码"></el-table-column>
        <el-table-column prop="source" label="来源（门诊收费/住院收费）" sortable></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 type="primary" @click="xMuHuoYpXiangQingClick(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="data.total"
          style="margin-top: 5px"
      ></el-pagination>
      <el-dialog title="详情信息" v-model="bianMaXiangQingDialog" width="100%">
        <yuanNeiTongJiCKXQ :data="xiangQingData"></yuanNeiTongJiCKXQ>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { clockinShortcuts } from '@/data/shortcuts'
import { getDropdownBox, queryConsumables } from '@/api/querydata/consumables-statistics'
import { yaoPinHuoXiangMuCode, chaKanXiangQing } from '@/api/querydata/query-pay-service'
import store from '../../store'
import { onMounted } from 'vue'
import { shortcuts } from '@/data/shortcuts'
import { formatDate } from '@/utils/date'
import { downloadExcel } from '@/utils/excel'
import { ElNotification } from 'element-plus'
import yuanNeiTongJiCKXQ from './YuanNeiTongJiCKXQ.vue'
import PageLayer from "@/layout/PageLayer";

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

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

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

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

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

    const dateRange = ref(null)
    //获取费用类别
    const classCode = ref([])

    const queryTerm = reactive({
      classCode: '',
      projectCode: '',
      startTime: '',
      endTime: '',
    })

    const data = reactive({
      list: [],
      total: 0,
    })

    onMounted(() => {
      getDropdownBox().then((res) => {
        classCode.value = res
      })
    })

    const query = () => {
      if (dateRange.value) {
        queryTerm.startTime = formatDate(dateRange.value[0])
        queryTerm.endTime = formatDate(dateRange.value[1])
      } else if (queryTerm.classCode === '' && queryTerm.projectCode === '') {
        queryTerm.startTime = mrStart
        queryTerm.endTime = mrEnd
        ElNotification({
          type: 'warning',
          message: '默认查询一周内的数据',
        })
      } else {
        queryTerm.startTime = ''
        queryTerm.endTime = ''
      }
      queryConsumables(queryTerm)
        .then((res) => {
          data.list = res
          data.total = data.list.length
        })
        .catch(() => {
          data.list = []
        })
    }

    const excel = () => {
      store.commit('app/setLoading', true)
      const data = {
        param: {
          startTime: queryTerm.startTime,
          endTime: queryTerm.endTime,
          classCode: queryTerm.classCode,
          projectCode: queryTerm.projectCode,
        },
        url: '/consumablesStatistics/exportExcel',
        fileName: '耗材使用统计.xlsx',
      }
      setTimeout(() => {
        downloadExcel(data)
      }, 500)
    }

    /** 判断是查询药品还是项目 */
    const flagXmHuoYp = ref(1)

    /** 搜索项目或药品 */
    const shouFeiBianMaData = ref([])

    const remoteMethod = (val) => {
      if (val.length > 1) {
        yaoPinHuoXiangMuCode(val, flagXmHuoYp.value).then((res) => {
          shouFeiBianMaData.value = res
        })
      }
    }
    const xiangQingData = ref([])
    /** 查询药品或者是项目的详细信息 */
    const xMuHuoYpXiangQingClick = (val) => {
      let param = {
        startTime: queryTerm.startTime,
        endTime: queryTerm.endTime,
        chargeCode: val.projectCode,
      }
      chaKanXiangQing(param).then((res) => {
        bianMaXiangQingDialog.value = true
        xiangQingData.value = res
      })
    }

    /** 打开对话框 */
    const bianMaXiangQingDialog = ref(false)

    return {
      query,
      queryTerm,
      excel,
      dateRange,
      data,
      tableHeight,
      handleSizeChange,
      handleCurrentChange,
      classCode,
      shortcuts,
      currentPage,
      pageSize,
      flagXmHuoYp,
      shouFeiBianMaData,
      yaoPinHuoXiangMuCode,
      remoteMethod,
      xMuHuoYpXiangQingClick,
      bianMaXiangQingDialog,
      xiangQingData,
    }
  },
}
</script>

<style></style>
