<template>
  <div style="margin: 20px">
    <el-form :inline="true" :model="form" class="demo-form-inline" size="small">
      <el-form-item>
        <el-upload action="/caPreReviewImport/importFlight" name="file" :http-request="uploadExcel"
          :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".xlsx"
          class="upload-demo">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="downloadTempleate">下载模板</el-button>
      </el-form-item>
    </el-form>
    <div style="font-size: 12px; font-weight: 700">
      提示：<span style="color: #1890ff">以下为所提交的数据或出错信息</span>
    </div>
    <el-table ref="filterTable" :data="tableData" v-loading="loading" style="width: 100%; margin-top: 20px" size="small" border>
      <el-table-column label="行号" prop="line" fixed width="50" align="center">
      </el-table-column>
      <el-table-column label="错误信息" prop="errorMessage" fixed width="300">
        <template slot-scope="scope">
          <div v-for="(m, key) in scope.row.errorMessage" :key="key">
            {{ m }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="tableData.length == 0"></el-table-column>
      <el-table-column v-if="tableData.length > 0" label="运单号" align="center" prop="A" />
      <el-table-column v-if="tableData.length > 0" label="品名描述" align="center" prop="B" />
      <el-table-column v-if="tableData.length > 0" label="航班日期" align="center" prop="C" />
      <el-table-column v-if="tableData.length > 0" label="航班号" align="center" prop="D" />
      <el-table-column v-if="tableData.length > 0" label="预审意见" align="center" prop="E" />
     <!-- <el-table-column v-for="(value, key) in this.tableData[0]" :key="key"
        v-if="key != 'errorMessage' && key != 'line'" :label="key" :prop="key" width="120"></el-table-column>-->
    </el-table>
  </div>
</template>

<script>
  import {
    downLoadTemplate,
    importcaPreReview,
  } from "@/api/caPreReviewImport";
  export default {
    name:"CAPreReviewImport",
    data() {
      return {
        // 遮罩层
        loading: false,
        flightType: [],
        form: {
          type: "",
          region: "",
        },
        fileList: [],
        tableData: [],
      };
    },
    methods: {
      downloadTempleate() {

        let fileName = "航班预审导入模板.xlsx";
        downLoadTemplate().then((res) => {
          if (res) {
            const blob = new Blob([res]);
            const link = document.createElement("a"); //创建a标签
            link.download = fileName; //a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); //执行下载
            URL.revokeObjectURL(link.href); //释放url
            document.body.removeChild(link); //释放标签
          } else {
            this.$message.error("下载失败");
          }
        });

      },
      uploadExcel(option) {
        //上传excel
        const file = option.file;
        this.loading=true;
        importcaPreReview(file, this.form.type).then((res) => {
           this.loading=false;
          if (res.code != 200) {
            if (res.code == 603) {
              this.$alert(res.msg, "提示", {
                confirmButtonText: "确定",
                type: "warning",
              });
            } else {
              this.$message.error(res.msg);
              this.tableData = res.data;
            }
          } else {
            this.$message.success(res.msg);
            this.tableData = res.data;
          }
        });
      },
      handleRemove(file, fileList) {
        //清掉上传的文件
        this.tableData = [];
        this.fileList = [];
      },
      handleExceed(files) {
        //重复上传文件
        let file = {};
        file.file = files[0];
        file.name = files[0].name;
        this.fileList = [];
        this.fileList.push(file);
        this.uploadExcel(file);
      },
    },
    created() {

    },
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .upload-demo {
    float: right;
  }

  .el-upload-list {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
  }
</style>