<template>
  <el-dialog
    :visible.sync="visible"
    top="3vh"
    :before-close="handleClose"
    lock-scroll
    width="65vw"
    title="抠图详情"
  >
    <div class="dialog-content">
      <el-descriptions title="详细信息" v-if="infoHasValue">
        <el-descriptions-item
          :label="item.label"
          v-for="(item, index) in tableTitle"
          :key="index"
        >
          <span v-if="item.prop == 'status'">
            <el-tag
              size="mini"
              :type="
                $constantsTool.getTagTypeByValue('mattingStatus', detail.status)
              "
            >
              {{
                $constantsTool.getLabelByValue("mattingStatus", detail.status)
              }}
            </el-tag>
          </span>
          <span v-else>{{ detail[item.prop] }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <div class="imgs">
        <div class="imgs-title">
          <h3>图片列表</h3>
          <div class="right" v-if="isImgMultiple">
            <el-button
              type="text"
              style="margin-right: 10px"
              @click="toggleShowCheckbox"
              >{{ getText }}</el-button
            >
            <el-checkbox
              label="全选"
              v-model="isAllChecked"
              v-if="isShowCheckbox"
            ></el-checkbox>
          </div>
        </div>
        <div class="container" :gutter="10">
          <div
            v-for="(item, index) in mattingImagesPage.records"
            :key="index"
            class="img-item"
          >
            <div
              :class="['modal', item.checked ? 'active' : '']"
              v-if="isShowCheckbox"
              @click.prevent="toggleItemCheckbox(item)"
            >
              <el-checkbox
                class="checkbox"
                v-if="isShowCheckbox"
                v-model="item.checked"
              ></el-checkbox>
            </div>
            <div class="more" @click.prevent="toggleItemCheckbox(item)">
              <el-button
                title="下载"
                style="margin-right: 12px"
                type="text"
                icon="el-icon-download"
                @click="handleDownloadRow(item)"
              ></el-button>
              <el-dropdown>
                <i class="el-icon-more" style="color: #409eff"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleDeleteRow(item)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <el-image
              style="width: 200px; height: 150px; padding: 10px"
              :src="item.pressUrl"
              fit="contain"
              :preview-src-list="srcList"
            ></el-image>

            <div class="name">{{ item.name }}</div>
          </div>
        </div>
        <el-pagination
          v-if="mattingImagesPage.records.length > 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(mattingImagesPage.current)"
          :page-sizes="[10, 20, 40, 50]"
          :page-size="Number(mattingImagesPage.size)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(mattingImagesPage.total)"
          class="pagination"
        />
        <div class="button">
          <PermissionButton
            button
            perms="bizMattingImages:download"
            @click="handleDownload"
            :disabled="disabledButton"
            plain
            type="primary"
            icon="el-icon-download"
            style="width: 100%"
            >下载</PermissionButton
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { tableTitle } from "../configs/list";
import {
  downFileByFileIds,
  getMattingImagesPage,
  deleteMattingImage,
} from "@/api/matting";
import { Debounce } from "@/utils/index";
export default {
  name: "PreviewDialog",
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      tableTitle,
      isShowCheckbox: false, //是否展示全选按钮
      info: {},
      isAllChecked: false, //是否全选
      mattingImagesPage: {
        records: [],
        size: 10,
        current: 1,
        total: 0,
      },
    };
  },
  computed: {
    getColSpan() {
      if (!this.mattingImagesPage.records.length) {
        return;
      }
      if (this.mattingImagesPage.records.length == 1) {
        return 24;
      } else {
        return 4;
      }
    },
    infoHasValue() {
      return Object.keys(this.detail).length > 0;
    },
    getText() {
      return this.isShowCheckbox ? "取消批量选择" : "批量选择";
    },
    srcList() {
      if (!this.mattingImagesPage.records) {
        return [];
      }
      return this.mattingImagesPage.records.map((item) => item.url);
    },
    downloadText() {
      return this.isShowCheckbox ? "下载" : "全部下载";
    },
    disabledButton() {
      if (!this.mattingImagesPage.records) {
        return false;
      }
      const isEveryNotChecked = this.mattingImagesPage.records.every(
        (item) => !item.checked
      );
      return isEveryNotChecked && this.isShowCheckbox;
    },
    isImgMultiple() {
      if (!this.mattingImagesPage.total) {
        return;
      }
      return this.mattingImagesPage.total > 1;
    },
  },
  watch: {
    detail(value) {
      if (!value) {
        return;
      }
      this.mattingImagesPage = value.mattingImagesPage;
      const { records } = this.mattingImagesPage;
      this.mattingImagesPage.records = records.map((item) => {
        return {
          ...item,
          checked: false,
        };
      });
    },
    isShowCheckbox(value) {
      if (!value) {
        this.mattingImagesPage.records.forEach((item) => {
          item.checked = false;
        });
        this.isAllChecked = false;
      }
    },
    isAllChecked(value) {
      if (!this.mattingImagesPage.records) {
        return false;
      }
      this.mattingImagesPage.records.forEach((item) => {
        item.checked = value;
      });
    },
  },
  methods: {
    handleClose(done) {
      this.visible = false;
    },
    // 切换展示复选框
    toggleShowCheckbox() {
      this.isShowCheckbox = !this.isShowCheckbox;
    },
    toggleItemCheckbox(item) {
      const { checked } = item;
      item.checked = !checked;
      this.isAllChecked = this.mattingImagesPage.records.every(
        (item) => item.checked
      );
    },
    // 卡片右上角的下载
    handleDownloadRow: Debounce(function (row) {
      const { fileId } = row;
      const ids = [fileId];
      this.download(ids);
    }, 600),
    // 底部下载按钮
    handleDownload: Debounce(function () {
      let ids = [];
      if (this.isShowCheckbox) {
        ids = this.mattingImagesPage.records
          .filter((item) => {
            return item.checked;
          })
          .map((item) => {
            return item.fileId;
          });
      } else {
        ids = this.mattingImagesPage.records.map((item) => {
          return item.fileId;
        });
      }
      this.download(ids);
    }, 600),

    // 卡片右上角的删除
    handleDeleteRow: Debounce(function (row) {
      const { fileId } = row;
      const ids = [fileId];
      this.deleteByIds(ids);
    }, 600),

    //
    async deleteByIds(ids) {
      const params = ids;
      const res = await deleteMattingImage(params);
      if (res.code == 0) {
        this.$message.success("删除成功！");
      }
      this.loadImgs();
    },

    // 公共的删除方法
    async download(ids) {
      const params = ids;
      const url = process.env.VUE_APP_BASE_API + "/bizMattingImages/downLoad";
      const method = "post";
      const fileName = this.detail.name + "_智能抠图处理后文件";
      const suffix = "zip";
      const opitons = {
        url,
        method,
        fileName,
        suffix,
        data: params,
      };
      await this.$file.downloadBlob(opitons);
    },
    async loadImgs() {
      const { current, size } = this.mattingImagesPage;
      const { mattingId } = this.detail;
      const params = {
        page: current,
        limit: size,
        mattingId,
      };
      const res = await getMattingImagesPage(params);
      if (res.code == 0) {
        this.mattingImagesPage = res.data;
      }
    },

    handleSizeChange(size) {
      this.mattingImagesPage.size = size;
      this.loadImgs();
    },

    handleCurrentChange(current) {
      this.mattingImagesPage.current = current;
      this.loadImgs();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  max-height: 64vh;
  overflow: auto;
}

.imgs-title {
  display: flex;
  justify-content: space-between;
}

.container {
  padding: 20px 0;
  max-height: 520px;
  min-height: 310px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}

.img-item {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  width: 18%;
  margin-right: 2%;
  margin-bottom: 16px;
  .more {
    z-index: 8;
    position: absolute;
    right: 20px;
    top: 0;
    color: #409eff;
    cursor: pointer;
  }
  .modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba($color: #fff, $alpha: 0.5);
    width: 100%;
    height: 100%;
    z-index: 9;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    .el-checkbox {
      position: absolute;
      left: 10px;
      top: 10px;
    }
  }
  .active {
    border: 1px solid #409eff;
    background-color: rgba($color: #fff, $alpha: 0);
  }
  .name {
    margin-top: 8px;
    display: flex;
    justify-content: center;
  }
}

.pagination {
  padding: 20px 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.button {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
