<template>
  <!-- 新建导入 -->
  <el-dialog title="新建导入" custom-class="customer-dialog" :visible.sync="dialogImport" width="600px" @closed="onDialogImportClosed">
    <el-form ref="formByImport" :rules="rules" :model="formByImport" label-width="100px"
      label-suffix="：" style="margin-bottom: 36px;">
      <el-form-item label="导入类型" prop="importValue">
        <el-select v-model="formByImport.importValue" placeholder="请选择导入类型"
          @change="handleChangeType">
          <el-option label="积分增加" value="11"></el-option>
          <el-option label="积分扣除" value="12"></el-option>
          <el-option label="等级调整" value="13"></el-option>
          <el-option label="服务门店/专属导购调整" value="14"></el-option>
          <el-option label="批量冻结会员" value="15"></el-option>
          <el-option label="批量解冻会员" value="16"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择文件" prop="file" required>
        <el-upload ref="memberUpload" v-loading="load" class="upload-demo" :action="actionUrl"
          accept=".xlsx" :file-list="formByImport.fileList" :before-upload="beforeUpload" :limit="1"
          :data="expendParams" :with-credentials="true" :on-error="handleError"
          :on-exceed="handelExceed" :on-change="handleChange" :on-success="handleSuccess"
          :auto-upload="false">
          <div slot="trigger">
            <div class="importBox">
              <i class="iconfont icon-shangchuan"></i>
              点击上传
            </div>
          </div>
          <el-button type="text" style="font-size: 12px; margin-left: 12px;"
            v-if="formByImport.importValue" @click="downloadTemplate">
            点击下载{{ formByImport.importValue | formatType }}模板
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="dialogTips">
      <h3>导入规则</h3>
      <p>1. 通过导入Excel表格的形式变更GIC已存在会员的积分等级门店；不支持导入新会员数据 </p>
      <p>2. 仅支持.xlsx 文件的导入；每次导入数据量最多为10000条；文件大小不超过1M </p>
      <p>3. 导入类型不同，文件模板也不同，请严格按照模板内容填入会员数据，否则将会报错 </p>
      <p>4. 请仔细核对需要变更的会员数据是否准确，否则GIC校验不通过将无法执行成功</p>
      <p>5. 超管账号支持导入变更全部会员信息，已分权商户的子管理员账号仅可修改管辖范围内的会员信息</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onDialogImportClosed">取 消</el-button>
      <el-button type="primary" @click="importTable" :disable="load">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import url from "@/components/axios/url";
import {
  checkFalse,
  checkSuccess
} from "../../../../static/js/checkStatus";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    // 模板下载文字过滤
    formatType(val) {
      val = +val;
      switch (val) {
        case 11:
          return '积分增加';
        case 12:
          return '积分扣除';
        case 13:
          return '等级调整';
        case 14:
          return '服务门店调整';
        case 15:
          return '批量冻结会员';
        case 16:
          return '批量解冻会员';
      }
    }
  },
  data() {
    return {
      actionUrl: url.uploadExecl,
      // 搜索选项值
      importType: '',
      // 新建dialog
      dialogImport: false,
      // 表单
      formByImport: {
        importValue: '',
        fileList: [],
      },
      // 请求数据
      expendParams: {
        requestProject: 'member',
        batchType: ''
      },
      rules: {
        importValue: [ { required: true, message: '请选择导入类型', trigger: 'change' } ]
      },
      rows: 0, // excel数据数量
      // 上传验证加载
      load: false,
    };
  },
  watch: {
    dialogVisible (n, o) {
      this.dialogImport=n;
    }
  },
  methods: {
    handleChangeType(val) {
      console.log(val);
      this.expendParams.batchType = val;
    },
    // 打开dialog
    openDialogImport() {
      this.formByImport.importValue = '';
      this.dialogImport = true;
    },
    // 表单清除
    onDialogImportClosed() {
      this.$refs.formByImport.resetFields();
      this.$emit('update:dialogVisible',false)
    },
    // 下载模板
    downloadTemplate() {
      window.location.href = url.downLoadExcelTemplate + '?requestProject=member&batchType=' + this.formByImport.importValue;
    },
    // 确认导入
    importTable() {
      this.$refs.formByImport.validateField('importValue', err => {
        if (!err) {
          // console.log(this.formByImport.fileList);
          if (this.formByImport.fileList.length) {
            this.load = true;
            this.$refs.memberUpload.submit();
            // this.getIntegral();
          } else {
            checkFalse('请上传积分数据');
          }
        }
      });
    },
    // 上传验证
    beforeUpload(file) {
      // let _this = this;
      const isLt2M = file.size / 1024 / 1024 < 1;
      const types = file.name.split(".");
      const type = types[ types.length - 1 ];
      const fileType = [ "xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv" ].some(item => item === type);
      if (!fileType) {
        this.$message.warning("请上传excel表格");
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传模板大小不能超过 1MB');
        return false;
      }
    },
    handleChange(file, fileList) {
      this.formByImport.fileList = fileList;
    },
    handelExceed() {
      this.$message.warning('超出最大上传数');
    },
    handleError() {
      checkFalse('上传失败');
      this.$refs.memberUpload.clearFiles();
      this.load = false;
    },
    handleSuccess(response, file, fileList) {
      if (response.errorCode == 0) {
        checkSuccess('上传成功');
        this.load = false;
        this.$refs.memberUpload.clearFiles();
        this.$emit('update:dialogVisible', false);
        this.$emit('successImport', response.result)
      } else {
        this.$refs.memberUpload.clearFiles();
        this.load = false;
        checkFalse(response.message);
      }
    }
  },
  created() {
  },
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__footer {
  border: none;
}
.importBox {
  width: 174px;
  border: 1px dashed #c0c4cc;
  border-radius: 6px;
}
.dialogTips {
  padding-bottom: 8px;
  padding-top: 22px;
  border-top: 1px solid #e4e7ed;
  color: #909399;
  h3 {
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 10px;
  }
  p {
    font-size: 12px;
  }
}
.success_icon {
  text-align: center;
  color: #52c41a;
  font-size: 47px;
}
.successHeader {
  text-align: center;
  color: #303133;
  font-size: 16px;
  line-height: 39px;
}
.successCon {
  text-align: center;
  color: #606266;
  font-size: 12px;
}
.member-wechat-timer {
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 20px;
  padding: 0;
}
.dialogSuccess /deep/ .el-dialog__footer {
  text-align: center;
  padding-bottom: 22px;
}
</style>
