<template>
  <page-layer>
    <template #header>
      出院月份：
      <el-date-picker v-model="dismissMonth" type="month" style="width: 100px"></el-date-picker>
      <span style="margin-left: 12px">上传状态：</span>
      <el-select v-model="uploadStatus" style="width: 100px">
        <el-option v-for="item in statusOptions" :key="item.code" :value="item.code" :label="item.label"></el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="Search" @click="fetchSheets">检索</el-button>
      <el-button type="primary" icon="Upload" @click="uploadSheets">{{ uploadBtnText }}</el-button>
    </template>
    <template #main>
      <el-table ref="sheetRef" :height="tableHeight" stripe
          :data="sheets.slice(pageSize * (currentPage - 1), pageSize * currentPage)">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="patNo" label="住院号"></el-table-column>
        <el-table-column prop="times" label="住院次数"></el-table-column>
        <el-table-column prop="admissDate" label="入院时间"></el-table-column>
        <el-table-column prop="admissDept" label="入院科室"></el-table-column>
        <el-table-column prop="dismissDate" label="出院时间"></el-table-column>
        <el-table-column prop="dismissDept" label="出院科室"></el-table-column>
        <el-table-column prop="admissDays" label="住院天数"></el-table-column>
        <el-table-column prop="socialNo" label="身份证号"></el-table-column>
        <el-table-column prop="birthDate" label="出生日期"></el-table-column>
        <el-table-column prop="nation" label="民族"></el-table-column>
        <el-table-column prop="nativePlaceName" label="籍贯"></el-table-column>
        <el-table-column prop="livePlaceCombo" label="现住址"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
      </el-table>
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="sheets.length"
          layout="sizes, total, prev, pager, next"
          @size-change="sizeChange"
          @current-change="currentPageChange"
      >
      </el-pagination>
      <Progress />
    </template>
  </page-layer>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import PageLayer from "../../../layout/PageLayer.vue";
import { formatMonth } from "@/utils/date";
import { selectSheets, siUploadSheets } from '@/api/medical-insurance/si-manage.js'
import store from "@/store";
import Progress from '../../../components/progress/Index.vue'
import {ElMessage} from "element-plus";

const windowSize = store.state.app.windowSize
const tableHeight = windowSize.h - 55

const dismissMonth = ref(null)
const uploadStatus = ref(0)
const statusOptions = [
  { code: 0, label: '未上传'},
  { code: 1, label: '已上传'},
  { code: -1, label: '全部'}
]

const pageSize = ref(10)
const currentPage = ref(1)
const sizeChange = (val) => {
  pageSize.value = val
}
const currentPageChange = (val) => {
  currentPage.value = val
}

const sheetRef = ref(null)
const uploadBtnText = computed(() => {
  if (!sheetRef.value) {
    return '上传全部条目'
  }
  let arr = sheetRef.value.getSelectionRows();
  return (arr && arr.length > 0) ? '上传选中条目' : '上传全部条目'
})

const sheets = ref([])
const fetchSheets = () => {
  const month = formatMonth(dismissMonth.value)
  selectSheets(month, uploadStatus.value).then(res => {
    sheets.value = res
  })
}

const uploadSheets = () => {
  let arr = sheetRef.value.getSelectionRows();
  if (arr.length === 0) {
    arr = sheets.value
  }
  if (arr.length === 0) {
    ElMessage({
      message: '没有可以上传的数据！',
      type: 'warning',
      duration: 2500,
      showClose: true
    })
    return
  }
  siUploadSheets(arr).then(() => {
    fetchSheets()
  });
}

onMounted(() => {
  dismissMonth.value = formatMonth(new Date())
})
</script>