<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <c-col :span="24" style="text-align: center">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" ref="boprulInsertBtn"
          @click="dialog = true">申报规则导入
        </el-button>
      </c-col>
    </c-col>

    <c-col>
      <el-dialog title="申报规则导入" :visible.sync="dialog" :close-on-click-modal="false" @close="cancel" center>
        <c-col :span="24">
          <c-col :span="24">
            <div class="upload-file">
              <el-upload action="/webapi/manager/boprul/batchinsert" :accept="accept" :limit="1"
                :before-upload="handleBeforeUpload" :file-list="fileList" :on-exceed="handleExceed" :auto-upload="false"
                ref="uploadff">
                <!--上传按钮-->
                <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确 认</el-button>
                <!--上传提示-->
                <div slot="tip" class="el-upload__tip">只能上传xlxs/xls文件,且不超过10M</div>
              </el-upload>
              <!-- 文件列表 -->
              <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear"
                tag="ul">
                <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content"
                  v-for="(file, index) in fileList">
                  <el-link :href="file.url" :underline="false" target="_blank">
                    <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
                  </el-link>
                  <div class="ele-upload-list__item-content-action">
                    <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
                  </div>
                </li>
              </transition-group>
            </div>
          </c-col>
        </c-col>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancel">取 消</el-button>
        </span>
      </el-dialog>
    </c-col>
  </div>
</template>

<script>

export default {
  props: ["model"],
  inject: ["root"],
  mixins: [],
  data() {
    return {
      dialog: false,
      fileList: [],
      accept: '.xls,.xlsx',
    }
  },
  methods: {
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    },
    handleBeforeUpload(file) {
      // 校检文件大小
      const isLt = file.size / 1024 / 1024 < 10;
      if (!isLt) {
        this.$notify.error(`上传文件大小不能超过 10 MB!`);
        return false;
      }
      return true;
    },
    handleDelete(index) {
      this.fileList.splice(index, 1);
    },
    cancel() {
      this.fileList = [];
      this.dialog = false;
      this.onSearch();
    },
    handleExceed() {
      this.$notify.error(`只允许上传1个文件`);
    },
    submitUpload() {
      this.$refs.uploadff.submit()
      this.cancel()
    },
  }
}
</script>