<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: 36px"
      label-position="left"
    >
      <el-form-item label="导入类型" prop="importValue">
        <el-select
          v-model="formByImport.importValue"
          placeholder="请选择导入类型"
          @change="handleChangeType"
          :disabled="importList.length < 2"
        >
          <el-option
            :label="item.importValue"
            :value="item.importType"
            v-for="item in importList"
            :key="item"
          ></el-option>
        </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>导入规则</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";
import { doFetch, doFetchGet } from "@/components/axios/api";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    importList: {
      type: Array,
      default: [
        {
          importType: 15,
          importValue: "批量冻结会员",
        },
        {
          importType: 16,
          importValue: "批量解冻会员",
        },
      ],
    },
  },
  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){
        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() {
      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);
            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(()=>{
              this.load = false;
            })
          } else {
            checkFalse("请上传文件");
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__footer {
  border: none;
}
.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>
