<template>
  <el-dialog
    :visible.sync="visible"
    top="3vh"
    :before-close="handleClose"
    lock-scroll
    width="65vw"
  >
    <div class="title" slot="title">
      <div class="divider"></div>
      <div class="label">抠图详情</div>
    </div>
    <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', info.status)
              "
            >
              {{ $constantsTool.getLabelByValue("mattingStatus", info.status) }}
            </el-tag>
          </span>
          <span v-else>{{ info[item.prop] }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <div class="imgs">
        <div class="single" v-if="info.type == '单个'">
          <div class="single-img">
            <el-image
              :src="info.src"
              fit="contain"
              style="height: 300px"
            ></el-image>
          </div>
          <div class="button">
            <el-button
              @click="handleDownload('single')"
              plain
              type="primary"
              icon="el-icon-download"
              >下载</el-button
            >
          </div>
        </div>
        <div class="multi" v-else>
          <div class="title">
            <h3>图片列表</h3>
            <div class="right">
              <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>
          <el-row class="container" :gutter="10">
            <el-col
              :span="4"
              v-for="(item, index) in info.imagesVo"
              :key="index"
              class="multi-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>
              <el-image
                :src="item.src"
                fit="contain"
                style="height: 100px; width: 100%"
                :preview-src-list="srcList"
              ></el-image>
              <div class="name">{{ item.name }}</div>
            </el-col>
          </el-row>
          <div class="button">
            <el-button
              @click="handleDownload('multi')"
              :disabled="disabledButton"
              plain
              type="primary"
              icon="el-icon-download"
              >{{ downloadText }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { tableTitle } from "../configs/list";
export default {
  name: "PreviewDialog",
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      tableTitle,
      isShowCheckbox: false, //是否展示全选按钮
      info: {},
      isAllChecked: false, //是否全选
    };
  },
  computed: {
    infoHasValue() {
      return Object.keys(this.info).length > 0;
    },
    getText() {
      return this.isShowCheckbox ? "取消批量选择" : "批量选择";
    },
    srcList() {
      if (!this.info.imagesVo) {
        return [];
      }
      return this.info.imagesVo.map((item) => item.src);
    },
    downloadText() {
      return this.isShowCheckbox ? "下载" : "全部下载";
    },
    disabledButton() {
      if (!this.info.imagesVo) {
        return false;
      }
      const isEveryNotChecked = this.info.imagesVo.every(
        (item) => !item.checked
      );
      return isEveryNotChecked && this.isShowCheckbox;
    },
  },
  watch: {
    detail(value) {
      if (value) {
        this.info = this.getNewData(value);
      }
    },
    isShowCheckbox(value) {
      if (!value) {
        this.info.imagesVo.forEach((item) => {
          item.checked = false;
        });
      }
    },
    isAllChecked(value) {
      if (!this.info.imagesVo) {
        return false;
      }
      if (value) {
        this.info.imagesVo.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.info.imagesVo.every((item) => item.checked);
    },
    getNewData(value) {
      if (value.type == "单个") {
        return value;
      }
      if (!(value && value.imagesVo)) {
        return {};
      }
      const imagesVo = value.imagesVo.map((item) => {
        return {
          ...item,
          checked: false,
        };
      });
      return {
        ...value,
        imagesVo,
      };
    },
    handleDownload(type) {
      if (type == "multi") {
        const ids = this.info.imagesVo
          .filter((item) => {
            return item.checked;
          })
          .map((item) => {
            return item.id;
          });
        console.log(ids);
      } else {
        console.log(this.info.fileId);
      }
    },
  },
};
</script>

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

.single {
  // display: flex;
  // justify-content: center;
  .single-img {
    display: flex;
    justify-content: center;
  }
  .button {
    width: 100%;
    display: flex;
    justify-content: center;
    .el-button {
      width: 80%;
    }
  }
}
.multi {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .multi-item {
    margin-bottom: 16px;
    position: relative;
    padding: 10px;
    .modal {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background-color: rgba($color: #fff, $alpha: 0.5);
      width: 96%;
      height: 96%;
      z-index: 9;
      border-radius: 8px;
      padding: 16px;
      .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;
    }
  }
  .container {
    padding: 20px 0;
    height: 320px;
    overflow: auto;
  }
  .button {
    width: 100%;
    display: flex;
    justify-content: center;
    .el-button {
      width: 80%;
    }
  }
}
</style>
