<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="95px"
      label-suffix="："
      style="margin-bottom: 20px"
      label-position="left"
    >
      <el-form-item label="导入类型" prop="importValue">
        <el-select
          style="width: 460px"
          v-model="formByImport.importValue"
          placeholder="请选择导入类型"
          @change="handleChangeType"
          :disabled="importList.length < 2"
        >
        <template v-for="item in importList">
          <el-option
            :label="item.importValue"
            :value="item.importType"
            v-if="getCodeAuth(item.btnCode)"
            :limit-code="getCode(item.btnCode)"
            :key="item">
          </el-option>
        </template>
          
        </el-select>
      </el-form-item>
      <el-form-item label="选择文件" prop="file" required>
        <dm-import-file :visible.sync="dialogVisible" :options="options" 
        ref="importFile" @change="fileChange"></dm-import-file>
      </el-form-item>
    </el-form>
    <div class="dialogTips">
      <h3><i class="el-icon-info"></i><span>导入规则</span></h3>
      <p>
        1. 不同的导入类型，请下载对应的导入模板，按照模板要求填充内容进行导入。<br/>
        2. 每次导入数据最多10000条，文件大小不超过1M。<br/>
        3. 请仔细核对需要导入/变更的会员数据是否准确，否则GIC校验不通过将无法执行成功。<br/>
        4. 超管账号支持导入/变更全部会员信息，已分权商户的子管理员账号仅可导入/变更管辖范围内的会员信息。
      </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 } from "../../../../static/js/checkStatus";
import { doFetch } from "@/components/axios/api";
import authMethods from "@/mixins/auth";

export default {
  mixins: [authMethods],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    pageType: '',
    importList: {
      type: Array,
      default: [
        {
          importType: 15,
          importValue: "批量冻结会员",
          btnCode: 'memberBatchImport'
        },
        {
          importType: 16,
          importValue: "批量解冻会员",
          btnCode: 'memberBatchImport'
        }
      ],
    },
  },
  filters: {
    // 模板下载文字过滤

  },
  data() {
    return {
      visible: true,
      options: {
        desc: '下载模板并完善信息后，点击此处上传文件，支持格式：.XLSX',
        downloadTemplate: [],
        optType: 0,       //required
        accept: ['.xlsx'],       // 默认 ['.xlsx', '.xls', '.csv']
        maxSize: 1024 * 1000,  // 传递byte  required
        maxSizeDesc: '1M',
        multiple: false,  // 默认false
        hiddleFile: false,
      },
      actionUrl: url.uploadExecl,
      // 搜索选项值
      importType: "",
      // 新建dialog
      dialogImport: false,
      // 表单
      formByImport: {
        importValue: "",
        fileList: [],
      },
      rules: {
        importValue: [
          { required: true, message: "请选择导入类型", trigger: "change" },
        ],
      },
      rows: 0, // excel数据数量
      // 上传验证加载
      load: false,
    };
  },
  watch: {
    importList:{
      handler(n){
        n = n.filter(item=> item.btnCode);
        let value = '';
        if(n && n.length){
          value = n[0].importType;
        }else{
          value = ''
        }
        this.formByImport.importValue = value;
        this.handleChangeType(value);
      },
      deep: true,
      immediate: true
    },
    dialogVisible(n, o) {
      this.dialogImport = n;
    },
  },
  methods: {
    fileChange(res){
      this.formByImport.fileList = res.files || [];
    },
    // batchType
    // 表单清除
    onDialogImportClosed() {
      this.$refs.formByImport.resetFields();
      this.$emit("update:dialogVisible", false);
    },
    handleChangeType(value){
      let selectedImportItem = this.importList.find(item=>{
        return item.importType == value;
      })
      this.options.downloadTemplate = selectedImportItem?[{
        name: `下载${ selectedImportItem.importValue }模板`,
        url: `${ url.downLoadExcelTemplate }?requestProject=member&batchType=${ selectedImportItem.importType }`
      }]:[]
    },
    // 确认导入
    importTable() {
      if (this.load) return;
      this.$refs.formByImport.validateField("importValue", (err) => {
        if (!err) {
          console.log(this.formByImport.fileList);
          let {fileList,importValue} = this.formByImport;
          if (fileList.length) {
            this.load = true;
            const formData = new FormData();
            formData.append('file', fileList[0]);
            formData.append('requestProject', 'member');
            formData.append('batchType', importValue);
            let pageType = this.$props.pageType;
            if(pageType){
              formData.append('pageType', this.$props.pageType);
            }
            doFetch(url.uploadExecl,formData).then((res)=>{
              let {errorCode,result} = res.data;
              if(errorCode == 0){
                this.$emit('successImport', result);
                this.$refs.formByImport.resetFields();
                this.$refs.importFile.reset();
                this.onDialogImportClosed();
              }
            }).finally(()=>{
              setTimeout(() => {
                this.load = false;
              }, 50)
            })
          } else {
            checkFalse("请上传文件");
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__footer {
  border: none;
}
.dialogTips {
  padding-bottom: 24px;
  padding-top: 20px;
  border-top: 1px dashed #DCDFE6;
  color: #909399;
  h3 {
    font-weight: normal;
    font-size: 12px;
    margin-bottom: 6px;
    display: inline;
    color: #606266;
    line-height: 17px;
    .el-icon-info{
      color: #2F54EB;
      font-size: 14px;
      margin-right: 8px;
    }
  }
  p {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #909399;
    line-height: 20px;
  }
}
.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>
