<template>
  <div class="app-container" v-loading="loading">
    <SearchBar
      :config="searchConfig"
      @search="search"
      @reset="reset"
      class="search-bar"
    />
    <div class="tools">
      <div class="tools-item">
        <!-- <el-button
          size="mini"
          type="primary"
          @click.native="handleOperation({ type: 'add' })"
          icon="el-icon-upload2"
        >
          上传</el-button
        > -->
        <el-dropdown @command="handleCommand">
          <PermissionButton
            button
            perms="bizCulturalRelic:add"
            type="primary"
            size="mini"
            icon="el-icon-upload2"
          >
            上传<i class="el-icon-arrow-down el-icon--right"></i>
          </PermissionButton>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command=".jpg,.jpeg,.png"
              >上传图片</el-dropdown-item
            >
            <el-dropdown-item command=".zip">上传压缩包</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="list">
      <TablePage
        :data="list.records"
        :tableTitle="tableTitle"
        :operates="operates"
      >
        <template v-slot:status="{ scope }">
          <el-tag
            :type="
              $constantsTool.getTagTypeByValue('mattingStatus', scope.status)
            "
          >
            {{ $constantsTool.getLabelByValue("mattingStatus", scope.status) }}
          </el-tag>
        </template>
        <template v-slot:operates="{ scope }">
          <TableOperation
            :operations="operations"
            :rawData="scope"
            @handleOperation="handleOperation"
          ></TableOperation>
        </template>
      </TablePage>
      <el-pagination
        background
        @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>
      <UploadDialog
        ref="UploadDialog"
        bizType="biz_matting"
        @update="loadData"
        :fileType="currentUploadType"
      />
      <PreviewDialog ref="PreviewDialog" :detail="currentPreviewItem" />
    </div>

    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />
  </div>
</template>

<script>
import { operates, operations, tableTitle, searchConfig } from "./configs/list";
import { records } from "./mock";
import UploadDialog from "@/components/UploadDialog";
import PreviewDialog from "./components/PreviewDialog";
export default {
  components: {
    UploadDialog,
    PreviewDialog,
  },
  data() {
    return {
      list: {
        records,
        size: 10,
        current: 1,
        total: 0,
      },
      searchConfig,
      loading: false,
      imgViewerVisible: false,
      importRecordVisible: false, //上传记录
      imgList: [],
      operates,
      operations,
      tableTitle,
      currentUploadType: ".zip", //当前上传的文件类型
      currentPreviewItem: {}, //当前点击的表格项目
    };
  },
  async created() {
    // this.loadData();
  },
  methods: {
    async search(form) {
      this.resetPage();
      this.loadData(form);
    },
    // 清除分页到初始状态
    resetPage() {
      this.list.current = 1;
    },
    reset() {
      this.loadData();
    },
    // 加载表格数据
    async loadData(form) {
      // const { current, size } = this.list;
      // var params = {
      //   page: current,
      //   limit: size,
      //   ...form,
      // };
      // const res = await currentRequest(params);
      // if (res.code == 0) {
      //   this.setList(res.data);
      // }
    },
    handleCommand(type) {
      this.currentUploadType = type;
      this.openDialog("UploadDialog");
    },

    openDialog(refName) {
      this.$refs[refName].visible = true;
    },

    async handleOperation(value, row) {
      switch (value.type) {
        case "view":
          console.log("view");
          this.currentPreviewItem = row;
          break;
        case "download":
          console.log("download");
          break;
        case "delete":
          console.log("delete");
          break;
      }
    },

    // 关闭预览图片
    closeImgViewer() {
      this.imgViewerVisible = false;
    },
    // 预览图片
    handelPreviewImages(images) {
      this.imgViewerVisible = true;
      this.imgList = [images];
    },

    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

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

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

    // 关闭导入记录弹窗
    handleImportRecordClose() {
      this.importRecordVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
}
.search-bar {
  margin-bottom: 16px;
}

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  .tools-item {
    display: flex;
    &:last-child {
      justify-content: flex-end;
    }
  }
  .upload-button {
    margin: 0 10px;
  }
}
.pagination {
  margin: 16px;
  display: flex;
  justify-content: right;
}
</style>
