<template>
  <el-dialog
    class="uploadHistoryDialog"
    title="View upload history"
    :visible.sync="dialogVisible"
    width="65%"
    :show-close="true"
    :close-on-click-modal="false"
    center
    v-loading="loadings.dialogLoading"
    @close="closeDialog"
  >
    <div class="dialogContent">
      <div class="dialogTitle">
        Import pre-clearance document upload
        <!-- <el-popover
          placement="top"
          width="300"
          trigger="hover"
          content="/\/\/\/\/\"
        >
          <i slot="reference" class="el-icon-question questionIcon" />
        </el-popover> -->
      </div>
      <el-table
        class="queryTable uploadHistoryTable"
        :data="tableData"
        style="width: 100%"
        :max-height="tableMaxheight"
        v-loading="loadings.tableLoading"
        row-key="index"
        :expand-row-keys="expandRowKeys"
      >
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <!-- <div
              class="empty"
              v-if="scope.row.file.length == 0"
              v-loading="scope.row.loading"
            >
              Empty
            </div> -->
            <div
              v-loading="scope.row.loading"
              style="margin-top: 5px; padding: 5px"
            >
              <div
                class="fileItem"
                v-for="(item, index) in scope.row.files"
                :key="index"
              >
                <div class="fileItemTitle">{{ item.title }}</div>
                <div
                  class="filtItemData"
                  v-for="(file, idx) in item.list"
                  :key="idx"
                >
                  <div class="filtItemData-name">
                    <i class="el-icon-document" />{{ file.sourceFileName }}
                  </div>
                  <div class="filtItemData-option">
                    <span>
                      {{ numberRound(Number(file.fileSize / 1024), 2) }}KB
                    </span>
                    <!-- <el-button type="text" @click="viewFile(file)"
                      >view</el-button
                    > -->
                    <el-button
                      v-if="
                        scope.row.modifyUserId == $store.getters.userData.id
                      "
                      type="text"
                      @click="downloadFile(file)"
                    >
                      DOWNLOAD
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" width="100" label="NUMBER" align="left">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableHeader"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed ? item.fixed : false"
          :align="item.align"
          :sortable="item.sort"
        >
          <template slot-scope="scope">
            <div v-if="item.prop == 'action'">
              <el-button
                v-if="scope.row.modifyUserId == $store.getters.userData.id"
                type="text"
                @click="copyData(scope.row)"
                >UPDATE</el-button
              >
            </div>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="option"
          label=""
          :fixed="false"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div class="historyOption">
              <el-button
                type="text"
                @click="
                  expandRowKeys.includes(scope.row.index)
                    ? closeExpand()
                    : expandChange(scope.row)
                "
              >
                <span>
                  <span v-if="expandRowKeys.includes(scope.row.index)"
                    ><svg-icon icon-class="upIcon" />CLOSE</span
                  >
                  <span v-else><svg-icon icon-class="downIcon" />EXPAND</span>
                </span>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div align="center" style="margin-bottom: 20px">
      <el-button class="entrySaveButton" size="medium" @click="closeDialog">
        {{ $t("common.cancleBtn") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getWaybillSubmitHistory,
  getWaybillSubmitHistoryDetail,
} from "@/api/waybillInquiry.js";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    headData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      tableData: [],
      expandRowKeys: [],
      tableHeader: [
        {
          label: "UPLOAD TEIM",
          prop: "modifyTime",
          width: 0,
          align: "left",
        },
        {
          label: "UPLOAD STATUS",
          prop: "statusName",
          width: 0,
          align: "left",
        },
        {
          label: "UPLOADER",
          prop: "modifyUserName",
          width: 0,
          align: "left",
        },
        {
          label: "ACTION",
          prop: "action",
          width: 100,
          align: "left",
        },
      ],
      loadings: {
        dialogLoading: false,
        tableLoading: false,
      },
      tableMaxheight: 650,
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.search();
      }
    },
  },
  methods: {
    //查询
    search() {
      this.tableData = [];
      this.tableLoading = true;
      getWaybillSubmitHistory({
        consignmentId: this.headData.id,
        page: 1,
        size: 9999999,
      })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.list.length > 0) {
              res.data.list.forEach((item, idx) => {
                let obj = item.uploadRecord;
                obj.files = [
                  { title: "WAYBILL", list: [] },
                  { title: "INVOICE", list: [] },
                  { title: "PACKING LIST", list: [] },
                  { title: "OTHER FILES ", list: [] },
                ];
                obj.index = idx;
                obj.loading = false;
                this.tableData.push(obj);
              });
            } else {
              this.tableData = [];
            }
          }
          this.tableLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.tableLoading = false;
        });
    },
    detailSearch(id) {
      return new Promise((resolve, reject) => {
        getWaybillSubmitHistoryDetail({ recordId: id })
          .then((res) => {
            if (res.code === 200) {
              let wab = [];
              let inv = [];
              let pink = [];
              let oth = [];
              res.data.forEach((item) => {
                item.file = item.filePath;
                if (item.bizTypeCode == "attachmentBizType_01") {
                  item.index = wab.length == 0 ? 0 : wab.length;
                  wab.push(item);
                } else if (item.bizTypeCode == "attachmentBizType_02") {
                  item.index = inv.length == 0 ? 0 : inv.length;
                  inv.push(item);
                } else if (item.bizTypeCode == "attachmentBizType_03") {
                  item.index = pink.length == 0 ? 0 : pink.length;
                  pink.push(item);
                } else if (item.bizTypeCode == "attachmentBizType_04") {
                  item.index = oth.length == 0 ? 0 : oth.length;
                  oth.push(item);
                }
              });
              let arr = [
                { title: "WAYBILL", list: wab },
                { title: "INVOICE", list: inv },
                { title: "PACKING LIST", list: pink },
                { title: "OTHER FILES ", list: oth },
              ];
              this.tableData.forEach((item) => {
                if (item.id == id) {
                  item.files = arr;
                }
              });
              resolve(arr);
            } else {
              reject();
            }
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    copyData(data) {
      this.closeDialog(data, "copy");
    },
    viewFile(val) {},
    downloadFile(val) {
      this.zipdownload
        .downLoadZip(
          "biz-customer/attachment/downLoadFile",
          {
            name: val.fileName,
            path: val.filePath,
          },
          val.sourceFileName
        )
        .then((res) => {
          console.log(res);
        });
    },
    expandChange(val) {
      let total = 0;
      val.files.forEach((item) => {
        total = total + item.list.length;
      });
      if (total == 0) {
        val.loading = true;
        this.detailSearch(val.id).then(() => {
          this.expandRowKeys = [];
          this.$nextTick(() => {
            this.expandRowKeys = [val.index];
          });
          val.loading = false;
        });
      } else {
        this.expandRowKeys = [];
        this.$nextTick(() => {
          this.expandRowKeys = [val.index];
        });
      }
    },
    closeExpand() {
      this.expandRowKeys = [];
    },
    closeDialog(val = null, type = "close") {
      this.expandRowKeys = [];
      this.$emit("close", { type: type, data: val });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.dialogContent {
  margin-bottom: 30px;
  .dialogTitle {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
  }
}

.historyOption {
  .el-button {
    display: inline-block;
    margin-left: 20px;
  }
}

.fileItem {
  background-color: $formItemBackgroundColor;
  margin-bottom: 5px;
  .fileItemTitle {
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
  }
  .filtItemData {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    .filtItemData-name {
      font-size: 14px;
      font-weight: 400;
      color: #333;
      i {
        display: inline-block;
        margin-right: 10px;
      }
    }
    .filtItemData-option {
      span {
        display: inline-block;
        margin-right: 22px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
      }
    }
  }
}

.empty {
  padding: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}
</style>