<template>
  <el-dialog
    :visible="visible"
    width="70%"
    style="height: 98%"
    :before-close="handleClose"
    top="5vh"
    lock-scroll
  >
    <div class="title" slot="title">
      <div class="divider"></div>
      <span class="label">展览导入记录</span>
    </div>
    <div class="upload-progress">
      <div class="top-bar">
        <SearchBar :config="searchConfig" @search="search" @reset="reset" />
      </div>
      <TablePage :data="list.records" :tableTitle="tableTitle">
        <template v-slot:fileSize="scope">
          {{ getFileSize(scope.scope.fileSize) }}
        </template>
        <template v-slot:createTime="scope">
          {{ scope.scope.createTime }}
          <el-tag
            size="mini"
            type="success"
            v-if="isToday(scope.scope.createTime)"
            >今天</el-tag
          >
          <el-tag
            size="mini"
            type="primary"
            v-if="getYestoday == scope.scope.createTime.split(' ')[0]"
            >昨天
          </el-tag>
        </template>
        <template v-slot:optType="scope">
          <el-tag
            size="mini"
            type="primary"
            v-if="scope.scope.optType.indexOf('导入') != -1"
          >
            {{ scope.scope.optType }}</el-tag
          >
          <el-tag
            size="mini"
            type="danger"
            v-if="scope.scope.optType.indexOf('删除') != -1"
          >
            {{ scope.scope.optType }}
          </el-tag>
        </template>
        <!-- <template v-slot:operates="scope">
          <TableOperation
            :operations="tableOperations"
            :rawData="scope.scope.row"
            :deleteTitle="'点击确定将会删除该批次导入的所有文物，确定删除？'"
            @handleOperation="handleOperation"
          ></TableOperation>
        </template> -->
      </TablePage>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(list.current)"
        :page-sizes="[10, 20, 40, 50]"
        :page-size="Number(list.size)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(list.total)"
        class="pagination"
      >
      </el-pagination>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" size="mini" @click.native="handleClose"
        >关闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  importRecordsTitle,
  importOperates,
  importOperations,
} from "../configs/import";
import { parseTime, getYestoday } from "@/utils/index";
import { getImportListPage, deleteByBatchNum } from "@/api/file";
import { getLogList } from "@/api/log";

export default {
  name: "ImportRecordDialog",
  props: {
    filesList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    visible: {
      handler: function (value) {
        if (value) {
          this.loadData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    tableTitle() {
      return importRecordsTitle;
    },
    tableOperates() {
      return importOperates;
    },
    tableOperations() {
      return importOperations;
    },
    getFileSize(fileSize) {
      return (fileSize) => {
        return (Number(fileSize) / 1024 / 1024).toFixed(2) + "M";
      };
    },

    isToday(time) {
      return (time) => {
        if (time) {
          let timeDate = time.split(" ")[0];
          let today = parseTime(new Date(), "{yy}-{mm}-{dd}");
          return timeDate == today;
        } else {
          return false;
        }
      };
    },
  },
  data() {
    return {
      visible: false,
      list: {
        records: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchForm: {
        name: "",
        status: "",
      },
      searchConfig: [
        {
          prop: "createTime",
          type: "dateTimeRange",
          label: "操作日期",
        },
      ],
    };
  },
  methods: {
    getYestoday,
    async search(form) {
      var params = {
        page: this.list.current,
        limit: this.list.size,
        optType: "整量",
        ...form,
      };

      if (params.createTime && params.createTime.length > 0) {
        params.startTime = params.createTime[0];
        params.endTime = params.createTime[1];
      }

      if (params.createTime) {
        delete params.createTime;
      }
      let res = await getLogList(params);
      if (res.code == 0) {
        this.list = res.data;
      }
    },

    reset() {
      this.loadData();
    },

    //   加载表格数据
    async loadData() {
      var params = {
        page: this.list.current,
        limit: this.list.size,
        // type: "biz_exhibition",
        optType: "整量",
      };

      if (params.createTime && params.createTime.length > 0) {
        params.startTime = params.createTime[0];
        params.endTime = params.createTime[1];
      }

      if (params.createTime) {
        delete params.createTime;
      }
      let res = await getLogList(params);
      if (res.code == 0) {
        this.list = res.data;
      }
    },
    async handleOperation(value, row) {
      switch (value.type) {
        case "delete":
          let { batchNum, type, id } = row;
          let deleteRes = await deleteByBatchNum({ batchNum, type });
          if (deleteRes.code == 0) {
            this.$message.success("删除成功！");
            this.$emit("reload");
            this.loadData();
          }
          break;
      }
    },

    // 改变页容量
    handleSizeChange(value) {
      this.list.size = value;
      this.loadData();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list.current = value;
      this.loadData();
    },

    handleClose() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  .divider {
    width: 8px;
    height: 16px;
    border-left: 4px solid #409eff;
    margin-right: 8px;
  }
  .label {
    font-weight: bold;
  }
}
.dialog-content {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
}

.dialog-footer {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.el-dialog__body {
  padding: 0 20px 30px 20px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pagination {
  margin: 16px;
}
</style>
