<template>
  <el-dialog title="批量导入券码" :visible.sync="visible" width="600px" @close="close">
    <el-form v-loading="loading" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
      <el-form-item prop="file" label="导入券码文件">
        <input style="position:absolute;top:3px;opacity:0;height:0px;width:0px;" type="file" name="file" accept=".csv" ref="file" @change="change">
        <el-button class="dashed" @click="$refs.file.click()"><i class="iconfont-components4 icon-cp-shangc upload-icon mr5"></i>上传</el-button>
        <el-button type="text" class="ml20" @click="downloadCouponCSV">下载文件模板</el-button>
        <el-popover placement="bottom" width="350" trigger="click" open-delay="200">
          <ul class="rule-list">
            <li>1. 单次上传最多可支持 5000 条</li>
            <li>2. 券码格式可由 6~20 位的数字或字母组成</li>
            <li>3. 若券码为纯数字组成，为避免发生意外错误，请将其格式设置为 ‘文本’ 格式</li>
            <li>4. 仅支持.csv 文件的导入 (建议直接下载模板，在模板的基础上进行数据的填充)</li>
          </ul>
          <el-button class="ml30" type="text" slot="reference">查看导入规则</el-button>
        </el-popover>
        <div v-if="fileName"><i class="el-icon-document mr10"></i>{{ fileName }}</div>
      </el-form-item>
      <el-form-item prop="remark" label="调整备注">
        <el-input type="textarea" v-model="ruleForm.remark" class="w260" :col="4" maxlength="240" show-word-limit />
      </el-form-item>
    </el-form>

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

<script>
// import { SUCCESS_CODE }  from '@/config';
import gicCardApi, { downloadCouponCSV }  from '@/api/gic-card';
const { importCode } = gicCardApi;
export default {
  name: 'ImportCode',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    couponId: {
      type: String,
      required: true
    },
    openType: { // 暂无用
      type: String, // 打开方式
      default: 'self', // self在本窗口打开   blank在新窗口打开
    },
  },
  data() {
    const validateFile = (rule, value, callback) => {
      console.log(this.$refs.file);
      console.log(this.$refs.file.value);
      if (this.$refs.file.value === '') {
        callback(new Error('请导入券码文件'));
        return;
      }
      callback();
    };
    return {
      loading: false,
      // fileList: [], // 已上传列表
      ruleForm: {
        remark: '',
      },
      rules: {
        file: { required: true, validator: validateFile, trigger: 'blur' },
        remark: { required: true, message: '请输入备注', trigger: 'change' }
      },
      fileName: '',
    };
  },
  methods: {
    change() {
      this.fileName = this.$refs.file.files[0].name;
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return;
        }
        const file = this.$refs.file;
        this.loading = true;
        importCode({
          file: file.files[0],
          remark: this.ruleForm.remark,
          couponId: this.couponId,
          memberCardId: this.currentAreaId
        }).then(res => {
          this.loading = false;
          this.$tips({ message: '上传成功', type: 'success' });
          this.$refs.ruleForm.validateField('file');
          this.$emit('success');
          this.close();
        }).catch(() => {
          this.loading = false;
        });
      });
    },
    downloadCouponCSV() {
      window.open(downloadCouponCSV);
    },
    close() {
      this.$emit('update:visible', false);
      this.fileName = '';
      this.ruleForm.remark = '';
      this.$refs.file.value = '';
      this.$refs.ruleForm.resetFields();
    }
  },
};
</script>

<style lang="scss" scoped>
.rule-list {
  color: #303133;
  li + li{
    font-size: 12px;
    line-height: 20px;
  }
}
</style>
