<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    title=""
    :visible.sync="outerVisible"
    :show-close="false"
    width="35%"
    :close-on-click-modal="false"
    v-loading="loadings.dialogLoading"
    :element-loading-text="loadingText"
    @close="close(false)"
  >
    <div class="modelItem">
      <div class="modelItem-title">
        <div>申报数据导入</div>
        <div>
          <el-button
            type="text"
            icon="el-icon-download"
            :loadings="$parent.loadings.dwonloadModelLoading"
            @click="dwonloadModelFile"
            >导入模板下载</el-button
          >
        </div>
      </div>
      <div class="uploadItem">
        <div class="uploadbox">
          <el-button
            size="mini"
            type="text"
            v-loading="loadings.uploadLoading"
            @click="uploadFile"
            >上传文件
          </el-button>
          <el-upload
            class="upload-demo"
            ref="uploadFile"
            action="/manager-server/attachment/picImg"
            :http-request="fileUpload"
            :auto-upload="true"
            :show-file-list="false"
            :data="{}"
            accept=".xlsx"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :on-change="fileChange"
            :file-list="fileList"
            @clearFiles="clearFile"
          >
          </el-upload>
        </div>
        <div class="fileList" v-if="formData.file != null">
          <div class="fileList-item">
            <div class="uploadbox-fileName">
              <svg-icon
                class="el-icon-user-solid"
                icon-class="exl"
                style="font-size: 18px; color: #de002e"
              />
              <Tooltip
                :content="formData.file.name"
                :refName="formData.file.name"
              />
            </div>
            <div class="uploadbox-option">
              <el-popconfirm
                :title="$t('entry.upload.delTip')"
                @confirm="delTypeDFile"
              >
                <el-button slot="reference" type="text">{{
                  $t("entry.upload.del")
                }}</el-button>
              </el-popconfirm>
            </div>
          </div>
        </div>
      </div>
      <div class="modelItem-title" v-if="errorData.length > 0">
        <div>导入结果</div>
      </div>
      <Table
        v-if="errorData.length > 0"
        class="fedexDetialTable"
        ref="entryTable"
        :data="errorData"
        :headerData="headerData"
        :maxHeight="200"
        :border="false"
        :pagination="false"
        :order="false"
        :page="1"
        :pageSizes="[20, 30, 50, 100]"
        :totalCount="0"
        :selection="false"
        :selectFixed="false"
        :rowSelectDataType="false"
      >
        <template v-slot:message="scope">
          <div class="errorMessage">{{ scope.row.message }}</div>
        </template>
      </Table>
    </div>
    <div class="dialogOption entrySave">
      <el-button
        class="entrySaveButton"
        :disabled="loadings.uploadLoading"
        @click="close(false)"
        >关闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { uploadDeclareData } from "@/api/declareData-api.js";
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        file: null,
      },
      searchForm: {},
      errorData: [],
      headerData: [
        {
          name: "sheet",
          value: "sheetName",
          width: "100",
          align: "left",
        },
        {
          name: "行号",
          value: "rowIndex",
          width: "50",
          align: "left",
        },
        {
          name: "订单编号",
          value: "orderNo",
          width: "150",
          align: "left",
        },
        {
          name: "校验结果",
          value: "message",
          width: "",
          align: "left",
          slot: true,
        },
      ],
      loadings: {
        dialogLoading: false,
        uploadLoading: false,
        sreachLoading: false,
      },
      uploadType: false,
      fileList: [],
      loadingText: "数据导入中，请稍后！",
    };
  },
  watch: {
    outerVisible(val) {
      if (val) {
        this.loadings.dialogLoading = false;
        this.uploadType = false;
      }
    },
  },
  methods: {
    dwonloadModelFile() {
      this.$emit("dwonloadModelFile");
    },
    //文件上传
    uploadFile() {
      this.$refs.uploadFile.$refs["upload-inner"].handleClick();
    },
    //文件校验
    beforeUpload(val) {
      if (
        val.type !=
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      ) {
        this.alertWarningMsg("请上传Excel文件！");
        return false;
      } else {
        return true;
      }
    },
    fileUpload(val) {
      const reader = new FileReader();
      reader.readAsDataURL(val.file);
      reader.onload = (e) => {
        this.loadings.dialogLoading = true;
        let obj = {
          multipartFile: this.base64ConvertFile(e.target.result, val.file.name),
        };

        uploadDeclareData(obj)
          .then((res) => {
            if (res.code === "200") {
              let arr = [];
              res.data.forEach((item) => {
                if (item.message != null && item.message != "") {
                  arr.push(item);
                }
              });
              if (arr.length == 0) {
                this.msgSuccess("上传成功！");
                this.handleRemove();
                this.close(true);
                this.uploadType = true;
              } else {
                this.errorData = arr;
                this.loadings.dialogLoading = false;
              }
            } else {
              this.alertWarningMsg(res.message);
              this.loadings.dialogLoading = false;
            }
          })
          .catch((err) => {
            console.log(err);
            this.loadings.dialogLoading = false;
          });
      };
    },
    fileChange(val) {},
    handleSuccess() {},
    handleRemove() {
      this.fileList = [];
    },
    clearFile() {},
    close(flag = false) {
      this.handleRemove();
      this.errorData = [];
      this.$emit("close", flag);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.modelItem {
  width: 100%;
  .modelItem-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }
}

.uploadItem {
  margin-bottom: 5px;

  .uploadbox {
    width: 100%;
    height: 40px;
    line-height: 20px;
    background-color: $formItemBackgroundColor;
    padding: 4px 8px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;

    .el-button {
      font-weight: 400 !important;
    }
  }
}

.fileList {
  width: 100%;

  .fileList-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 15px 5px 5px;
    background-color: $formItemBackgroundColor;
    font-size: 14px;

    .uploadbox-fileName {
      display: flex;
      align-items: center;
    }

    .uploadbox-option {
      .fileSize {
        display: inline-block;
        color: #8e8e8e;
        font-size: 12px;
      }
    }

    .svg-icon {
      display: inline-block;
      color: $fedexError;
    }

    .text-tooltip {
      max-width: 500px;
      display: inline-block;
      margin-left: 10px;
    }

    .fileList-item-empty {
      display: inline-block;
      margin: 5px;
      height: max-content;
      color: #8e8e8e;
    }
  }
}

.fedexformSreachBottomBorder {
  border-top: 1px solid $fedexBorder;
  border-left: 1px solid $fedexBorder;
  border-right: 1px solid $fedexBorder;
}

.textCenter {
  .el-button {
    font-size: 20px;
  }
}

.errorMessage {
  width: 100%;
  color: $fedexError;
}
</style>