<template>
  <div>
    <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-tag
                  :type="
                    $constantsTool.getTagTypeByValue(
                      'mattingStatus',
                      item.status
                    )
                  "
                  size="mini"
                  style="margin-right: 6px"
                >
                  {{
                    $constantsTool.getLabelByValue("mattingStatus", item.status)
                  }}
                </el-tag>
                <el-button
                  title="下载"
                  style="margin-right: 16px"
                  type="text"
                  icon="el-icon-download"
                  @click="handleDownloadRow(item)"
                  :disabled="isDisabledDownload(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: 230px; padding: 10px"
                :src="item.pressUrl"
                fit="contain"
                @click="openElImageViwer(index)"
              ></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>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="srcList"
      :initial-index="initialIndex"
    />
  </div>
</template>

<script>
import { tableTitle } from "../configs/list";
import {
  downFileByFileIds,
  getMattingImagesPage,
  deleteMattingImage,
} from "@/api/matting";
import { Debounce } from "@/utils/index";
export default {
  name: "PreviewDialog",
  components: {
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      tableTitle,
      isShowCheckbox: false, //是否展示全选按钮
      info: {},
      isAllChecked: false, //是否全选
      mattingImagesPage: {
        records: [],
        size: 10,
        current: 1,
        total: 0,
      },
      imgViewerVisible: false,
      initialIndex: 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;
    },
    isDisabledDownload(item) {
      return (item) => {
        return item.status != 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();
    },

    openElImageViwer(index) {
      this.imgViewerVisible = true;
      this.initialIndex = index;
    },

    closeImgViewer() {
      this.imgViewerVisible = false;
    },
  },
};
</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;
    margin-bottom: 10px;
  }
  .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>
