<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: 100px" v-model="queryTerm.classCode" filterable clearable placeholder="费用类型">
        <el-option v-for="item in classCode" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-select v-model="queryTerm.ward" filterable clearable placeholder="科室">
        <el-option v-for="item in ward" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      名称搜索：
      <el-select filterable remote clearable :remote-method="remoteMethod" v-model="queryTerm.chargeCode" 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="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="chaKanXiangQingClick(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="bianMaXiangQingDialog" width="1800px">
        <yuanNeiTongJiCKXQ :data="xiangQingChouTi"></yuanNeiTongJiCKXQ>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { shortcuts } from '@/data/shortcuts'
import { onMounted } from 'vue'
import { clockinShortcuts } from '@/data/shortcuts'
import { getSelect, queryProjects, chaKanXiangQing, yaoPinHuoXiangMuCode } from '@/api/querydata/query-pay-service'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import { ElMessage } from 'element-plus'
import store from '@/store'
import yuanNeiTongJiCKXQ from './YuanNeiTongJiCKXQ.vue'
import { ExcelName } from '@/utils/ExportExcel'
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])

    const xiangQingChouTi = ref([])

    onMounted(() => {
      getSelect().then((res) => {
        ward.value = res.ward
        classCode.value = res.classCode
      })
      queryTerm.startTime = start
      queryTerm.endTime = end + ' 23:59:59'
      dateRange.value = [start, end]
    })

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

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

    const query = () => {
      if (dateRange.value) {
        let dateS = getDateRangeFormatDate(dateRange.value)
        queryTerm.startTime = dateS.startTime
        queryTerm.endTime = dateS.endTime
      } else if (queryTerm.chargeCode !== '') {
        queryTerm.startTime = ''
        queryTerm.endTime = ''
      } else {
        queryTerm.startTime = start
        queryTerm.endTime = end
        ElMessage({
          type: 'info',
          message: '默认查询本月的数据',
          duration: 2500,
          showClose: true,
        })
      }
      queryProjects(queryTerm)
        .then((res) => {
          returnData.value = res
        })
        .catch(() => {
          returnData.value = []
        })
    }

    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 = () => {
      let title = {
        chargeCode: '收费编码',
        name: '项目名称',
        classCode: '费用类别',
        source: '来源',
        number: '数量',
        amountOfMoney: '金额',
      }
      ExcelName(returnData.value, title)
    }

    /** 查询项目的详细信息  */
    const bianMaXiangQingDialog = ref(false)
    const chaKanXiangQingClick = (val) => {
      val.startTime = queryTerm.startTime
      val.endTime = queryTerm.endTime
      val.dept = queryTerm.ward
      chaKanXiangQing(val).then((res) => {
        xiangQingChouTi.value = res
        bianMaXiangQingDialog.value = true
      })
    }

    /**收费编码 */
    const shouFeiBianMaData = ref([])

    const remoteMethod = (val) => {
      if (val.length > 1) {
        yaoPinHuoXiangMuCode(val, 1).then((res) => {
          shouFeiBianMaData.value = res
        })
      }
    }
    return {
      dateRange,
      query,
      exportExcel,
      shortcuts,
      classCode,
      queryTerm,
      ward,
      returnData,
      tableHeight,
      handleSizeChange,
      handleCurrentChange,
      pageSize,
      currentPage,
      chaKanXiangQingClick,
      bianMaXiangQingDialog,
      shouFeiBianMaData,
      remoteMethod,
      xiangQingChouTi,
    }
  },
}
</script>

<style></style>
