<template>
  <el-dialog title="批量导入券码" :visible.sync="visible" width="600px" @close="close" :close-on-click-modal="false" :show-close="!loading">
    <div v-loading="loading">
      <div>
        <span class="mr15"><i class="danger-color mr5">*</i>选择文件：</span>
        <el-upload :data="{ couponId }" :headers="{ isControl: true }" :with-credentials="true" :action="importCode" :show-file-list="false" :file-list="fileList" accept=".csv" class="inline-block" :on-progress="onProgress" :on-success="onSuccess" :on-error="onError" :before-upload="beforeUpload">
          <el-button :disabled="loading" class="dashed upload" icon="iconfont-market4 icon-shangchuan mr5">{{ loading ? '上传中' : '点击上传'}}</el-button>
        </el-upload>
        <el-button type="text" class="ml10" @click="downloadCouponCSV">点击下载CSV模板</el-button>
        <el-button type="text" class="ml10 hover-btn deep" @click="viewErrorList">导入失败记录</el-button>
        <ul class="file-list">
          <li v-for="(f, idx) in fileList" :key="idx">
            <i class="el-icon-document gray03 fl"></i>
            <p class="ellipsis-80">{{ f.name }}({{ f.size }}k)</p>
            <i class="el-icon-success success-color fr"></i>
          </li>
        </ul>
      </div>
      <p class="rule">导入规则</p>
      <ul>
        <li>1. 单次上传最多可支持 5000 条</li>
        <li>2. 券码格式可由 6~20 位的数字或字母组成</li>
        <li>3. 若券码为纯数字组成，为避免发生意外错误，请将其格式设置为 ‘文本’ 格式</li>
        <li>4. 仅支持.csv 文件的导入 (建议直接下载模板，在模板的基础上进行数据的填充)</li>
      </ul>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" :disabled="loading" @click="close">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { SUCCESS_CODE }  from '@/config';
import { downloadCouponCSV, importCode }  from '@/api/gic-card';
export default {
  name: 'ImportCode',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    couponId: {
      type: String,
      required: true
    },
    openType: {
      type: String, // 打开方式
      default: 'self', // self在本窗口打开   blank在新窗口打开
    }
  },
  data() {
    return {
      importCode,
      loading: false,
      fileList: [], // 已上传列表
      file: {} // 储存当前上传文件
    };
  },
  methods: {
    // 查看导入失败记录
    viewErrorList() {
      const { couponId } = this;
      if(this.openType === 'self') {
        this.$router.push(`/gic-card/code-error/list?id=${couponId}`);
      } else {
        // 新窗口
        let routeData = this.$router.resolve({ path: '/gic-card/code-error/list', query: {  id: couponId } });
        window.open(routeData.href, '_blank');
      }
    },
    beforeUpload(file) {
      this.file = {
        name: file.name,
        size: file.size
      };
      return file;
    },
    onSuccess(res) {
      if(res.code === SUCCESS_CODE) {
        this.loading = false;
        this.fileList.push({ ...this.file });
        this.$emit('success', this.fileList);
        this.file = {};
      } else {
        this.onError(res);
      }
    },
    onError(error) {
      this.file = {};
      this.$tips({ message: error.message || '上传出错', type: 'error' });
      this.loading = false;
    },
    onProgress() {
      this.loading = true;
    },
    downloadCouponCSV() {
      window.open(downloadCouponCSV);
    },
    close() {
      this.$emit('update:visible', false);
      this.$emit('close', this.fileList.length);
    }
  },
};
</script>

<style lang="scss" scoped>
.upload {
  display: inline-block;
  width: 175px;
  line-height: 15px !important;
}
.file-list {
  margin-left: 95px;
  li {
    height:37px;
    line-height:37px;
    background:rgba(242,243,247,1);
    border-radius:2px;
    margin-bottom: 5px;
    padding-left: 13px;
    padding-right: 27px;
    margin-top: 10px;
    i {
      margin-top: 12px;
    }
    p {
      display: inline-block;
      width: 80%;
      margin-left: 5px;
    }
  }
}
.rule {
  color: $gray03;
  padding-top: 22px;
  margin-top: 36px;
  border-top: 1px solid $gray-separator;
  margin-bottom: 11px;
  & + ul {
    color: $gray03;
    li {
      font-size:12px;
      line-height:20px;
    }
  }
}
</style>