<template>
  <el-table :data="data.slice((1 - 1) * 50, 50)" :height="tableHeight - 200" stripe highlight-current-row>
    <el-table-column label="住院/门诊号" prop="patient"></el-table-column>
    <el-table-column label="住院/门诊次数" prop="times"></el-table-column>
    <el-table-column label="患者姓名" prop="name"></el-table-column>
    <el-table-column label="身份证" prop="socialNo"></el-table-column>
    <el-table-column label="手机号" prop="phone"></el-table-column>
    <el-table-column label="入院日期" prop="admissDate" width="80px"></el-table-column>
    <el-table-column label="出院日期" prop="disDate" width="80px"></el-table-column>
    <el-table-column label="收费日期" prop="chargeDateString" width="80px"></el-table-column>
    <el-table-column label="申请科室" prop="dept"></el-table-column>
    <el-table-column label="执行科室" prop="execUnit"></el-table-column>
    <el-table-column label="医保类型" prop="ybType"></el-table-column>
    <el-table-column label="数量" prop="number"></el-table-column>
    <el-table-column label="主要诊断" prop="mainDiagnosis"></el-table-column>
    <el-table-column label="次要诊断" prop="disDiagComment"></el-table-column>
    <el-table-column label="金额" prop="amountOfMoney"></el-table-column>
    <el-table-column label="项目编码" prop="chargeCode"></el-table-column>
    <el-table-column label="来源" prop="source"></el-table-column>
  </el-table>
  <el-tag>共{{ data.length }}条</el-tag>
  <el-tag type="warning">默认显示前50条</el-tag>
  <el-button type="primary" icon="Download" @click="yaoPinShiYongDaoChuClick">导出 excel</el-button>
</template>

<script>
import { ElMessageBox } from 'element-plus'
import store from '../../store'
import { writeExcelFile, createWorkSheet } from '@/utils/excel'
import { onMounted, ref, watch } from 'vue'

export default {
  props: {
    data: {
      type: Object,
    },
  },
  setup(props, ctx) {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 120

    const data = ref([])

    watch(
      () => props.data,
      () => {
        data.value = props.data
      }
    )

    onMounted(() => {
      data.value = props.data
    })

    /** 导出excel 表 */
    const yaoPinShiYongDaoChuClick = () => {
      if (data.value.length === 0) {
        return ElMessage.error({
          message: '没有可以导出的数据',
          showClose: true,
        })
      }
      ElMessageBox.prompt('导出文件名字', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '文件名不能为空 (∩•̀ω•́)⊃-*⋆',
      })
        .then(({ value }) => {
          store.commit('SET_LOADING', true)
          setTimeout(() => {
            const title = {
              patient: '住院/门诊号',
              times: '住院/门诊次数',
              name: '患者姓名',
              socialNo: '身份证',
              phone: '手机号',
              admissDate: '入院日期',
              disDate: '出院日期',
              chargeDateString: '收费日期',
              dept: '申请科室',
              execUnit: '执行科室',
              number: '数量',
              mainDiagnosis: '主要诊断',
              disDiagComment: '次要诊断',
              amountOfMoney: '金额',
              chargeCode: '项目编码',
              ybType: '医保类型',
              source: '来源',
            }
            const fields = [
              'patient',
              'times',
              'name',
              'socialNo',
              'phone',
              'admissDate',
              'disDate',
              'chargeDateString',
              'dept',
              'execUnit',
              'number',
              'mainDiagnosis',
              'disDiagComment',
              'amountOfMoney',
              'chargeCode',
              'ybType',
              'source',
            ]
            const workSheet = createWorkSheet(data.value, fields, title)
            writeExcelFile(workSheet, value + '.xlsx')
          }, 50)
        })
        .catch(() => {})
    }

    return {
      yaoPinShiYongDaoChuClick,
      tableHeight,
      data,
    }
  },
}
</script>

<style></style>
