<template>
  <div class="box">
    <div class="box_wrapper">
      <SearchBoxVue :data="searchData" :codes="tableShowCode" :type_name="type_name" @reset="handleReset" @export="handelExport" @codesChange="handleCodesChange" />
      <TableBoxVue :loading="loading" :data="tableData" :type_name="type_name" :hospital_name="searchData.hospital_name" :codes="tableShowCode" @sort="handleSort" style="margin-top: -40px;" />
      <div style="overflow: hidden;">
        <el-pagination
          v-if="tableData && tableData.length !== 0"
          :total="paginationData.total"
          background
          class="table-pagination"
          :page-size="paginationData.limit"
          :current-page.sync="paginationData.page"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="SizeChangeEvent"
          @current-change="pageHasChanged"
        />
      </div>
    </div>
  </div>
</template>

<script>
import SearchBoxVue from './components/SearchBox2.vue'
import TableBoxVue from './components/TableBox2.vue'
import { errorDetailsListExport } from '@/api/excel'
import { dateFormat, getDaysInMonth } from '@/utils'

export default {
  components: {
    SearchBoxVue,
    TableBoxVue
  },
  data() {
    return {
      loading: false,
      searchData: {
        hospital_name:"",// 医院名称
        AAA28: '',
        dep_id: '',
        start_time: '',
        end_time: '',
        type: '',
        level: '',
        desc: '',
        AEE04: '',
        AEE08: '',
        ICD10_NAME: '',
        ICD10_ID1: '',
        ICD9_NAME: '',
        ICD9_ID1: ''
      },
      tableData: [],
      paginationData: {
        total: 0,
        page: 1,
        limit: 10
      },
      error_rule: '',
      tableShowCode: [
        'field',
        'desc',
        'AAA28',
        'AAA01',
        'time',
        'AAC11N',
        'AEE08',
        'AEE04',
        'type',
        'level',
        'ICD10_NAME',
        'ICD10_ID1',
        'ICD9_NAME',
        'ICD9_ID1'
      ],
      sort: [],
      type_name:''
    }
  },
  created() {
    this.error_rule = this.$route.query.error_rule;
    this.searchData.hospital_name = this.$route.query.hospital_name?this.$route.query.hospital_name:'';
    this.type_name = this.$route.query.type_name?this.$route.query.type_name:'';
    this.searchData.start_time = this.$route.query.start_time?this.$route.query.start_time:'';
    this.searchData.end_time = this.$route.query.end_time?this.$route.query.end_time:'';
    this.getList()
  },
  methods: {
    // 展示字段变化
    handleCodesChange(val) {
      localStorage.setItem('surgery_talbe_codes', val)
      this.$set(this, 'tableShowCode', val)
    },
    getList() {
      const {
        page,
        limit
      } = this.paginationData
      const params = {
        ...this.searchData,
        error_rule: this.error_rule,
        page,
        page_size: limit
      }
      const { start_time, end_time } = this.searchData
      const days = getDaysInMonth(end_time.slice(0, 4), end_time.slice(4, 6))
      const dayStr = days < 10 ? `0${days}` : days
      params.start_time = start_time.length === 8 ? start_time : `${start_time}01`
      params.end_time = `${end_time.slice(0, 4)}${end_time.slice(4, 6)}${dayStr}`

      if (this.sort.length) {
        params.sort = this.sort
      }
      let url = '';
      if(this.type_name == 'lc'){
        url = '/home_sz_quality/errorDetailsList'
      }else{
        url = '/home_quality/errorDetailsList'
      }
      this.$axios.post(url, params).then(res => {
        this.tableData = res.data.list
        this.paginationData.total = res.data.count
      });
    },
    handleSort(val) {
      this.sort = val
      this.getList()
    },
    SizeChangeEvent(val) {
      this.paginationData.limit = val
      this.getList()
    },
    pageHasChanged(val) {
      this.paginationData.page = val
      this.getList()
      
    },
    handleSearch() {
      this.paginationData.page = 1
      this.getList()
    },
    handelExport() {
      errorDetailsListExport({...this.searchData, error_rule: this.error_rule}).then(res => {
        const content = res.data; // 后台返回二进制数据
        const blob = new Blob([content]);
        const fileName = `缺陷问题详情.csv`;
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    handleReset() {
      this.paginationData.page = 1
      this.paginationData.limit = 10
      this.searchData = {
        hospital_name:"",// 医院名称
        AAA28: '',
        dep_id: '',
        start_time: '',
        end_time: '',
        type: '',
        level: '',
        desc: '',
        AEE04: '',
        AEE08: '',
        ICD10_NAME: '',
        ICD10_ID1: '',
        ICD9_NAME: '',
        ICD9_ID1: ''
      }
      this.tableData = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 16px;
  .box_wrapper {
    padding: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 5px;
    position: relative;
  }
  .table-pagination {
    float: right;
  }
}
</style>