<template>
  <div class="app-container">
    
  <el-row :gutter="6">
    <el-col :xs="24" :md="8">
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>查询报告单</span>
  </div>
    <div class="clearfix" style="color:gray">
    可从excel复制过来,手动输入用回车间隔
  </div>
      <el-form
                ref="elForm"
                :model="formData"
                :rules="rules"
                size="medium"
                label-width="80px"
                style="margin-top:2px"
                label-position="left"
                
              >
                  <el-row>
                    <el-form-item label="姓名列" prop="names">
                      <el-input
                        v-model="formData.names"
                        type="textarea"
                        :autosize="{ minRows: 8, maxRows: 12}"
                      ></el-input>
                    </el-form-item>
                  </el-row>
                  <el-row >
                    <el-form-item label="身份证列" prop="numbers">
                      <el-input
                        v-model="formData.numbers"
                        type="textarea"
                        :autosize="{ minRows: 8, maxRows: 12}"
                      ></el-input>
                    </el-form-item>
                  </el-row>
                  <div style="text-align:center">
                    <el-button type="primary" @click="searchB" >开始查询</el-button>
                  </div>
              </el-form>
    
</el-card>
</el-col>
 <el-col :xs="24" :md="16">
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>查询结果</span>
  </div>
  <el-button type="primary" @click="exportExcel" >导出结果</el-button>
<el-table
      :data="tableData"
      border
      fit
      highlight-current-row
      style="margin-top:2px"
      id="out-table"
    >
      
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="身份证号">
        <template slot-scope="scope">{{ scope.row.ID_number }}</template>
      </el-table-column>
      <el-table-column label="报告单号">
        <template slot-scope="scope">
          <el-link :href="scope.row.url" target="_blank" type="primary">{{ scope.row.report_number }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="获得时间">
        <template slot-scope="scope">{{ scope.row.issue_date }}</template>
      </el-table-column>
      <el-table-column label="报告单网址" show-overflow-tooltip>
        <template slot-scope="scope">
        <el-link :href="scope.row.url" target="_blank" type="primary">{{ scope.row.url }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    
</el-card>
</el-col>
  </el-row>


  </div>
</template>

<script>
import { searchCandidates } from "@/api/analyse"
import { genTree, deepClone } from "@/utils";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  components: { Pagination },
  watch: {
  },
  data() {
    return {
      formData:{},
      rules:{
        names: [
          {
            required: true,
            message: "请填写姓名列",
            trigger: "change",
          },
        ],
        numbers: [
          {
            required: true,
            message: "请填写身份证列",
            trigger: "change",
          },
        ],
      },
      tableData:[]
    };
  },
  computed: {},
  watch: {
    
  },
  created() {
    
  },
  methods: {
    searchB(){
      const loading = this.$loading({
          text: '拼命查询中..',
        });
      searchCandidates(this.formData).then(res=>{
        this.tableData = res.data
        loading.close()

      }).catch(e=>{
        loading.close()
      })
    },
    exportExcel() {
var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "报告单.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
        }
  },
};
</script>
