<template>
  <el-dialog
    :visible="show"
    :title="'导入' + crmTypeName"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="600px"
    @close="closeView"
  >
    <el-tabs
      v-model="activeName"
      :class="stepsActive == 1 ? '' : 'el-tabs__active-go'"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="①文件上传"
        name="first"
        :disabled="stepsActive == 2 ? true : false"
      >
        <div class="dialog-body">
          <div v-if="stepsActive == 1" class="step-section">
            <div class="sections">
              <div class="sections__title" v-loading="loading">
                一、导入说明：
                <div class="sections__tips">
                  1、提供的导入模板需要.xlsx文件格式！不支持“.xls”文件，即不支持Excel97-2003!
                </div>
                <div class="sections__tips">
                  2、模板名称可以进行修改，但不要删除模板中设置的字段！
                </div>
                <div class="sections__tips">
                  3、导入文件大小请勿超过100MB！且目前只支持单个Sheet页签！
                </div>
              </div>
            </div>
            <div class="sections">
              <div class="sections__title">
                二、导入条件设置（没有则不用设置）
              </div>
              <div class="sections__tips">
                <span class="demonstration">选择版本：</span>
                <el-select
                  v-model="versionValue"
                  clearable
                  :disabled="isEditFactory"
                  style="width: 188px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in factoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="sections">
              <div class="sections__title">三、请选择需要导入的文件</div>
              <div class="content">
                <flexbox class="file-select">
                  <el-upload
                    ref="upload"
                    class="avatar-uploader"
                    drag
                    action="#"
                    :http-request="httpRequestfiles"
                    :headers="httpHeader"
                    :file-list="fileuploadList"
                    :before-upload="beforeAvatarUpload"
                    :before-remove="beforeRemove"
                    :on-remove="handleRemove"
                    multiple
                    :limit="10"
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或
                      <em>点击上传</em>
                    </div>
                  </el-upload>
                </flexbox>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="②导入数据"
        name="second"
        :disabled="stepsActive == 2 ? false : true"
      >
        <div
          v-loading="loading"
          v-if="stepsActive == 2"
          element-loading-text="导入中"
          element-loading-spinner="el-icon-loading"
          class="step-section"
        />
        <div
          v-loading="loading"
          v-else-if="stepsActive == 3"
          class="step-section"
        >
          <div class="result-info">
            <el-card style="height: 300px; margin-top: -20px" shadow="always">
              <i class="el-icon-error" />
              <p class="result-info__detail">
                <span class="result-info__detail--all"
                  >{{ this.resultData.successMessage }}
                </span>
                <el-button
                  v-if="this.resultData && this.resultData.errSize > 0"
                  class="result-info__btn--err"
                  type="text"
                  @click="downloadErrData"
                  >下载错误数据</el-button
                >
              </p>
            </el-card>
          </div>
        </div>

        <div v-loading="loading" v-if="stepsActive == 4" class="step-section">
          <div class="result-info">
            <el-card style="height: 300px" shadow="always">
              <i class="el-icon-success" />
              <p class="result-info__detail">
                <span class="result-info__detail--all"
                  >{{ this.resultData.successMessage }}
                </span>
              </p>
              <!-- <p class="result-info__des">数据导入结果：</p>
            <p class="result-info__detail">
              导入成功数据
              <span class="result-info__detail--all"
                >{{ this.resultData.totalSize }} </span
              >条有效数据！
            </p> -->
            </el-card>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-popover
        v-model="historyPopoverShow"
        placement="top"
        width="800"
        popper-class="no-padding-popover"
        trigger="click"
      >
      </el-popover>

      <!-- <el-button  @click="closeView">取消</el-button> -->
      <el-button :class="{ 'is-hidden': !showCancel }" @click="closeView"
        >取消</el-button
      >
      <el-button v-if="sureTitle" type="primary" @click="sureClick">{{
        sureTitle
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { downloadFile } from "@/utils/crmindex.js";
import { getToken } from "@/utils/auth"; // get token from cookie

export default {
  name: "CRMImport", // 文件导入
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    // CRM类型
    crmType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      options: [
        {
          value: "3",
          label: "新增",
        },
        {
          value: "0",
          label: "修改",
        },
      ],
      loading: false,
      fieldList: [],
      factoryList: [], //工厂列表
      YearMonthValue: "", //年度期间选择项
      yearMonthList: [], //年度期间
      versionValue: "",
      stateValue: "",
      config: 1, // 	1 覆盖，2跳过
      /** 编辑控制 */
      isEditFactory: false, // 是否是编辑中
      isEditYearMont: false, // 是否是编辑中
      isState: true, // 是否是编辑中
      //file: { name: "" },
      stepsActive: 1,
      stepList: [
        {
          icon: "wk wk-upload",
          title: "上传文件",
          status: "wait",
        },
        {
          icon: "wk wk-data-import",
          title: "导入数据",
          status: "wait",
        },
        {
          icon: "wk wk-success",
          title: "导入完成",
          status: "wait",
        },
      ],
      //resultData: null,
      resultData: {
        totalSize: 0,
        errSize: 0,
        errTemplate: "",
        errMessage: "",
        successMessage: "",
      },
      processData: {
        count: 0,
        status: "",
      },
      messageId: null,
      intervalTimer: null,
      fileuploadList: [],
      isLt2M: "",
      isFileType: "",
      historyPopoverShow: false,
      yeareVale: "",
      monthVale: "",
      page: 1,
      listQuery: {
        Filters: [
          {
            logic: 0,
            column: "project",
            action: 0,
            value: "factory",
          }, //默认查询可用的
        ],
        SkipCount: 0,
        MaxResultCount: 1000,
      },
      listQueryCustom: {
        Filters: [
          {
            logic: 0,
            column: "customerCode",
            action: 0,
            value: "U22000",
          }, //默认查询可用的
        ],
        SkipCount: 0,
        MaxResultCount: 1000,
      },
      activeName: "first",
    };
  },
  computed: {
    sureTitle() {
      return {
        1: "立即导入",
        // 2: "导入中...",
        // 3: "确定",
        // 4: "确定",
      }[this.stepsActive];
    },
    showCancel() {
      return this.stepsActive == 1;
    },
    getMoudleDisable() {
      if (this.crmType == "prebatch") {
        //只状态可用
        this.isEditYearMont = true;
        this.isEditFactory = true;
        this.isState = false;
      } else {
        this.isEditYearMont = false;
        this.isEditFactory = false;
      }
    },
    crmTypeName() {
      return (
        {
          invoice: "大众发票汇总",
          vWKanBan: "大众看板结算明细",
          scrapClaims: "CP7报废和索赔",
          sparePart: "大众备件结算明细",
          hqHPlatform: "红旗H平台",
          hqMPlatform: "红旗M平台",
          vwoutorder: "准时化出库单",
          kanbanoutorder: "大众看板出库单",
          bomdatabase: "产品结构BOM",
          prebatch: "预批量",
          secondaryPriceRatio: "二配结算价格比例",
          factory: "工厂设置",
          // materialRelation: "零件匹配关系",
          carMaterialConfig: "车型代码与零件匹配",
          materialRelationSupplier: "供应商零件设置表",
          material: "物料主数据",
          inventorydetail: "库存明细",
          codeSetting: "通用代码设置",
          estimatedSum: "应付暂估汇总",
          estimatedInventoryDetail: "应付暂估收货明细",
          customerStorageLocation: "客户存储地点",
          secondaryAdjustment: "二配数量调整输入",
          secondaryDiscount: "二配折扣调整输入",
        }[this.crmType] || ""
      );
    },
    getWebApi() {
      return (
        {
          invoice: "/api/settleaccount/Invoices/ExcelImport", //大众发票导入
          vWKanBan: "/api/settleaccount/VWKanBan/ExcelImport", //大众看板结算明细导入
          scrapClaims: "/api/settleaccount/ScrapClaims/ExcelImport", //CP7报废和索赔导入
          sparePart: "/api/settleaccount/SparePart/ExcelImport", //大众备件结算明细导入
          hqHPlatform: "/api/settleaccount/HQHPlatform/ExcelImport", //红旗H平台导入
          hqMPlatform: "/api/settleaccount/HQMPlatform/ExcelImport", //红旗M平台导入
          vwoutorder: "/api/settleaccount/wmsjitoutput/ExcelImport", //准时化出库单导入
          kanbanoutorder: "/api/settleaccount/wmskanbanoutput/ExcelImport", //大众看板出库单导入
          bomdatabase: "/api/settleaccount/bom/ExcelImport",
          prebatch: "/api/settleaccount/Prebatch/ExcelImport",
          secondaryPriceRatio:
            "/api/settleaccount/SecondaryPriceRatio/ExcelImport",
          factory: "/api/settleaccount/Factory/ExcelImport",
          // materialRelation:
          //   "/api/settleaccount/MaterialRelationshipDetail/ExcelImport-TH",
          carMaterialConfig: "/api/settleaccount/CarMaterialConfig/ExcelImport",
          materialRelationSupplier:
            "/api/settleaccount/SupplierItemSetUp/ExcelImport",
          material: "/api/settleaccount/Material/ExcelImport-TH",
          inventorydetail: "/api/settleaccount/InventoryDetail/ExcelImport",
          codeSetting: "/api/settleaccount/CodeSetting/ExcelImport",
          estimatedSum: "/api/settleaccount/EstimatedSum/ExcelImport",
          estimatedInventoryDetail:
            "/api/settleaccount/EstimatedInventoryDetail/ExcelImport",
          customerStorageLocation:
            "/api/settleaccount/CustomerStorageLocation/ExcelImport",
          secondaryAdjustment:
            "/api/settleaccount/SecondaryAdjustment/ExcelImport",
          secondaryDiscount: "/api/settleaccount/SecondaryDiscount/ExcelImport",
        }[this.crmType] || ""
      );
    },
    getImportTemplate() {
      //模板名称
      return (
        {
          invoice: "大众发票汇总导入.xlsx",
          bomdatabase: "产品结构Bom导入模板.xlsx",
          secondaryPriceRatio: "二配价格比例导入模板.xlsx",
          factory: "工厂设置模板.xlsx",
          materialRelation: "零件匹配关系.xlsx",
          carMaterialConfig: "车型代码与零件匹配.xlsx",
          materialRelationSupplier: "供应商零件设置表.xlsx",
          material: "物料主数据.xlsx",
          inventorydetail: "库存明细信息.xlsx",
          codeSetting: "通用代码设置数据.xlsx",
          estimatedSum: "应付暂估汇总.xlsx",
          estimatedInventoryDetail: "应付暂估收货明细.xlsx",
          customerStorageLocation: "客户存储地点.xlsx",
          secondaryAdjustment: "二配调整输入.xlsx",
        }[this.crmType] || ""
      );
    },
    httpHeader() {
      //文件上传时，带token认证信息，提高安全性
      return {
        Authorization: "Bearer " + getToken(),
      };
    },
  },
  watch: {
    show: function (val) {
      this.stepsActive = 1;
      this.getAllYearMonth(); //加载版本
      this.getMoudleDisable(); //判断设置条件是否可用
      if (val) {
        this.stepsActive = 1;
      } else {
        if (this.stepsActive == 3) {
          //以下是重置数据
          this.stepsActive = 1;
          this.stepList = [
            {
              icon: "wk wk-upload",
              title: "上传文件",
              status: "wait",
            },
            {
              icon: "wk wk-data-import",
              title: "导入数据",
              status: "wait",
            },
            {
              icon: "wk wk-success",
              title: "导入完成",
              status: "wait",
            },
          ];
          this.resultData = null;
        }
      }
    },

    stepsActive() {
      this.$emit(
        "status",
        {
          1: "wait",
          2: "process",
          3: "finish",
        }[this.stepsActive]
      );
    },
  },
  mounted() {},
  methods: {
    getAllYearMonth() {
      this.$axios
        .posts("/api/settleaccount/CentralizedControl/openlist")
        .then((response) => {
          this.factoryList = [];
          response.forEach((element) => {
            let options = {};
            options.value = element.version;
            options.label = element.version;
            this.factoryList.push(options);
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleImportExcelClick() {
      //父组件中，初始化此子组件时调用
      this.fileuploadList = [];
      //this.$refs.upload.clearFiles();
    },
    httpRequestfiles(data) {
      let _this = this;
      let rd = new FileReader(); // 创建文件读取对象
      let file = data.file;
      this.fileuploadList.push(file);
      rd.readAsDataURL(file); // 文件读取装换为base64类型
    },
    beforeAvatarUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      if (["xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: "warning",
          message: "只支持xlsx类型文件！",
        });
        this.isFileType = "0";
        return false;
      } else {
        this.isFileType = "1";
      }
      this.isLt2M = file.size / 1024 / 1024 < 100 ? "1" : "0";
      if (this.isLt2M === "0") {
        this.$message.error("上传文件大小不能超过 100MB!");
      }
      return this.isLt2M === "1" ? true : false;
    },
    beforeRemove(file, fileList) {
      if (this.isLt2M === "1" && this.isFileType === "1") {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    },
    handleRemove(file, fileList) {
      //附件列表删除操作
      const index = this.fileuploadList.indexOf(file.originFileObj);
      const newFileList = this.fileuploadList.slice();
      newFileList.splice(index, 1);
      this.fileuploadList = newFileList;
    },
    //执行按钮
    sureClick() {
      if (
        this.fileuploadList === [] ||
        JSON.stringify(this.fileuploadList) === "[]"
      ) {
        this.$message.error("请选择导入文件");
        return false;
      }
      if (this.stepsActive == 1) {
        if (this.stepList[0].status == "wait") {
          this.stepsActive = 2;
          this.saveTemplateData();
          this.activeName = "second";
          console.log(this.crmTypeName);
          if (this.stepList[1].status == "finish") {
          }
        } else {
          if (this.fileuploadList === "[]") {
            this.$message.error("请选择导入文件");
          }
        }
      } else {
        this.closeView();
      }
    },

    saveTemplateData() {
      this.loading = true;
      //保存项目、合同管理、客户等信息的共用方法
      //--上传附件，批量或拖拽
      if (JSON.stringify(this.fileuploadList) != "[]") {
        let fd = new FormData();
        const { fileuploadList } = this;
        fileuploadList.forEach((file) => {
          fd.append("files", file); // 添加文件
        });
        fd.append("branchId", "3FA85F64-5717-4562-B3FC-2C963F66AFA6");
        fd.append("year", "2021");
        fd.append("period", "03");
        fd.append("customerCode", "03");
        fd.append("factory", this.YearMonthValue);
        fd.append("version", this.versionValue);
        const webapi = this.getWebApi;
        this.$axios
          .posts(webapi, fd)
          .then(async (res) => {
            console.log("大众导入条件：" + JSON.stringify(res));
            if (res === "Success") {
              if (this.isLt2M === "1" && this.isFileType === "1") {
                this.$notify({
                  title: "成功",
                  message: "数据导入成功！",
                  type: "success",
                  duration: 2000,
                });
                this.stepList[1].status = "finish";
                this.resultData.successMessage = "数据导入成功！";
                this.stepsActive = 4;
              }
            } else {
              this.stepList[0].status = "wait";
              this.resultData.errTemplate = res; //指定错误模板名称，作为参数，用于错误模板下载
              this.resultData.errSize = 1; //保持大于0，用于控制错误数据下载按钮的可不可见
              this.resultData.successMessage = "数据导入失败！";
              this.stepsActive = 3;
            }
            console.log(this.stepsActive);
            this.$emit("status", "finish");
            // this.$nextTick(() => {
            //   this.loading = false;
            // });
            this.loading = false;
          })
          .catch(() => {
            this.stepList[1].status = "finish";
            this.resultData.errSize = 0;
            this.resultData.successMessage = "导入模板有错误，请检查！";
            this.stepsActive = 3;
            this.loading = false;
          });
      } else {
        this.loading = false;
        this.$message({
          message: "未上传任何附件，请查检！",
          type: "warning",
        });
      }
    },

    /**
     * 下载错误模板
     */
    downloadErrData() {
      let fileNameOfProject = this.resultData.errTemplate;
      this.$axios
        .BolbGets(
          "/api/settleaccount/getblobfile/download/" + fileNameOfProject
        )
        .then((response) => {
          if (fileNameOfProject.indexOf("_") != -1) {
            let downName =
              fileNameOfProject.slice(0, fileNameOfProject.lastIndexOf("_")) +
              fileNameOfProject.slice(fileNameOfProject.lastIndexOf("."));
            downloadFile(response, downName);
            this.$notify({
              title: "成功",
              message: "错误数据-导出成功！",
              type: "success",
              duration: 2000,
            });
          } else {
            downloadFile(response, fileNameOfProject);
            this.$notify({
              title: "成功",
              message: "错误数据-导出成功！",
              type: "success",
              duration: 2000,
            });
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.listLoading = false;
        });
    },
    // 关闭操作
    closeView() {
      this.$emit("update:show", false);
      this.$emit("close", this.stepsActive == 3 ? "finish" : "");
      this.activeName = "first";
    },
    handleClick(tab) {
      // console.log(tab.index)
      // console.log(tab.name)
      if (tab.name == "first") {
        //  console.log(tab.name)
        this.fileuploadList = [];
        this.stepsActive = 1;
      }
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/styles/xr-theme.scss";
/deep/.el-dialog {
  margin-top: 9vh !important;
}
/deep/.el-dialog__body {
  padding: 20px 20px;
}
//Tabs标签Flex布局
/deep/.el-tabs__nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
//去掉el-tab-pane底部灰色线条
/deep/.el-tabs__nav-wrap::after {
  height: 0 !important;
}
//Tabs标签el-tab-pane蓝色下划线
/deep/.el-tabs__active-bar {
  left: 90px;
  width: 90px !important;
}
//Tabs标签el-tab-pane蓝色下划线点击录入后样式
/deep/ .el-tabs__active-go {
  .el-tabs__active-bar {
    transform: translateX(297px) !important;
  }
}

/deep/.el-tabs__item {
  padding: 0 20px;
}
.el-steps {
  margin-bottom: 15px;

  /deep/ .el-step__title {
    font-size: 14px;
  }

  /deep/ .el-step.is-simple .el-step__arrow::before,
  /deep/ .el-step.is-simple .el-step__arrow::after {
    height: 10px;
    width: 2px;
  }

  /deep/ .el-step.is-simple .el-step__arrow::after {
    transform: rotate(45deg) translateY(3px);
  }
  /deep/ .el-step.is-simple .el-step__arrow::before {
    transform: rotate(-45deg) translateY(-2px);
  }
}

.step-section {
  min-height: 250px;

  /deep/ .el-loading-spinner {
    top: 45%;
    .el-icon-loading {
      font-size: 40px;
      color: #999;
    }

    .el-loading-text {
      color: #333;
    }
  }
}

.sections {
  font-size: 14px;
  color: #333;

  &__title {
    font-weight: 600;
  }

  &__tips {
    padding-left: 30px;
    margin: 8px 0 15px;
    color: #999;
    font-size: 12px;
    line-height: 1.4;
  }

  .download {
    cursor: pointer;
    color: #2362fb;
  }
}

.sections__tips + .content {
  padding-top: 0;
}

.content {
  padding: 10px 10px 10px 30px;
  .el-select {
    width: 400px;
  }
  .user-cell {
    width: 400px;
  }
}

#importInputFile {
  display: none;
}

.file-select {
  .el-input {
    width: 400px;
  }
  button {
    margin-left: 20px;
  }
}

.is-hidden {
  visibility: hidden;
}

.history-btn {
  float: left;
  margin-left: 15px;
}

// 结果信息
.result-info {
  text-align: center;
  .el-card {
    border: none;
    height: 250px !important;
  }
  /deep/.el-card__body {
    padding: 60px 20px 20px 20px;
  }
  i {
    font-size: 60px;
  }
  // 错误结果icon
  .el-icon-error {
    color: red;
  }
  //正确结果icon
  .el-icon-success {
    color: chartreuse;
  }

  &__des {
    margin-top: -15px;
    color: #333;
    font-size: 30px;
  }

  &__detail {
    margin-top: 25px;
    font-size: 20px;
    color: #666;
    &--all {
      color: #333;
      font-weight: 600;
    }

    &--suc {
      color: $xr-color-primary;
      font-weight: 600;
    }

    &--err {
      margin-top: 25px;
      color: #f94e4e;
      font-weight: 600;
    }
  }

  &__btn--err {
    margin-top: 10px;
    font-size: 20px;
  }
}
</style>