<template>
  <div class="files-container">
    <!-- 保单信息导入 -->
    <div class="billfiles">
      <div class="model files">
        <span>保单信息模板:</span>
        <div @click="downloadTemplate">
          <i class="el-icon-download" ></i>
          <el-link type="success" :underline="false">点击下载</el-link>
        </div>
      </div>
      <div class="upload files">
        <span>保单信息导入:</span>
        <el-upload
          class="upload-demo"
          v-model="uploadData"
          ref="upload"
          action="#"
          accept=".xls, .xlsx"
          :http-request="requestFn"
          :show-file-list="false"
        >
          <div class="inner" slot="trigger" size="small">
            <i class="el-icon-upload" ></i>
          </div>
        </el-upload>
      </div>
    </div>
    <div class="info">
      <div class="express msg">
        <span>说明:</span>
        <div class="list">
          <span>第一步：下载模块</span>
          <span>第二步：在下载好的模块中填写数据，点击上传，选择文件</span>
          <span>第三步：点击导入，即可完成导入</span>
        </div>
      </div>
      <div class="note msg">
        <span>注意:</span>
        <div class="list">
          <span>1、模板表头名称不可更改</span>
          <span>2、部分列数据请严格遵守格式填写</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  dotemplate,
  ossPrepare,
  guaranteeSlip
} from "../../../apis/modules/auth.js";
import axios from "axios";

export default {
  components: {},

  directives: {},

  data() {
    return {
      uploadData: "",
      fileList: []
    };
  },

  mounted() {},

  methods: {
    //下载保单模板
    downloadTemplate() {
      const parms = {
        key: "Policy"
      };
      dotemplate(parms).then(res => {
        const { status, data } = res;
        if (status === 0) {
          this.downLoad(data.value, data.name);
        }
      });
    },
    downLoad(content, fileName) {
      var aEle = document.createElement("a"); // 创建a标签
      aEle.download = fileName; // 设置下载文件的文件名
      aEle.href = content; // content为后台返回的下载地址
      aEle.click(); // 设置点击事件
    },
    //导入模板
    requestFn(res) {
      this._getPicByOss(res.file, pic => {
        this.uploadData = pic;
        let file = res.file;
        let fileName = file.name;
        if (!!fileName) {
          ossPrepare({ objectName: fileName }).then(res => {
            let params = new FormData();
            let formData = res.data.formData;
            params.append("OSSAccessKeyId", formData.OSSAccessKeyId);
            params.append("key", formData.key);
            params.append("policy", formData.policy);
            params.append("signature", formData.signature);
            params.append(
              "success_action_status",
              formData.success_action_status
            );
            params.append("file", file);
            axios({
              url: res.data.host,
              method: "post",
              data: params,
              header: {
                "access-Control-Allow-Origin": "*",
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }).then(res => {
              this.guaranteeSlip(res.config.url + "/" + formData.key);
            });
          });
        }
      });
    },
    guaranteeSlip(urled) {
      const parms = {
        url: urled
      };
      guaranteeSlip(parms).then(res => {
        const { status, data } = res;
        if (status === 0) {
          this.$message({
            type: "success",
            message: " 导入成功!"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.files-container {
  height: 100%;
  padding: 70px;
  .billfiles {
    border-bottom: 1px solid #797979;
    .files {
      height: 80px;
      display: flex;
      align-items: center;
      span {
        width: 200px;
        font-size: 20px;
      }
       i{
       font-size:36px;
       color:#67C23A;
      }
    }
  }

  .info {
    margin-top: 100px;
    .msg {
      display: flex;
    }
    .msg > span {
      color: #ff0052;
      padding-right: 100px;
    }
    .list {
      display: flex;
      flex-direction: column;
    }
    .list > span {
      color: #7c7c7c;
      padding-bottom: 20px;
    }
  }
}
</style>