<template>
  <div>
    <div class="images-items__img">
      <span class="size">序号：{{ item.imageOrder || index }}</span>
      <span class="size" style="top: 30px;" v-if="statusPages > 4">{{ item.width }} x {{ item.height }}</span>
      <img class="items-img" :src="item.imageUrl" @click="imagePreview" alt="">
      <div class="btns-group" v-if="(pages == 'review' && [2,3].includes(statusPages*1)) || (pages == 'crop' && [4,5].includes(statusPages*1))">
        <el-button size="small" @click="delImage(item, index)">删除</el-button>
        <el-button size="small" @click="handleDownload(item.imageUrl)">下载</el-button>
        <el-button type="primary" size="small" v-if="!cropPreview" @click="needRegenerate(item)">重生成</el-button>
      </div>
    </div>
    
    <el-dialog
      title=""
      custom-class="preview-images"
      :visible.sync="dialogVisible"
      append-to-body
      width="100%">
      <div class="images-dialog">
        <div class="images-dialog__left">
          <el-carousel trigger="click" :autoplay="false" arrow="always">
            <el-carousel-item v-for="(acc, i) in imagesList" :key="i">
              <img :src="acc" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="images-dialog__right">
          <p><img :src="item.imageUrl" alt=""></img></p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import downloadUtil from "@/utils/downloadUtil";
export default {
  name: "ImagesItem",
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    index: {
      type: Number
    },
    statusPages: {
      type: [String, Number],
      default: 1
    },
    pages: {
      type: String,
      default: 'review'
    },
    cropPreview: {
      type: Boolean,
      default: false
    },
    imagesList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    delImage(item, index) {
      this.$emit('delImage', item, index);
    },
    needRegenerate(item) {
      this.$emit('needRegenerate', item);
    },
    async handleDownload(image) {
      const match = image.match(/\/([^\/?#]+)$/);
      if (match) {
        const fileName = match[1]
        try {
          const res = await downloadUtil.fileDownload(image, fileName);
          if (res) {
            this.$message.success("下载成功");
          }
        } catch (error) {
          this.$message.error(error.message);
        } finally {
          
        }
      }
    },
    imagePreview() {
      this.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss">
  .preview-images {
    margin-top: 5vh !important;
    margin-bottom: 5vh;
    max-height: 90vh;
    box-sizing: border-box;
    background: transparent;
    .el-dialog__header {
      padding: 0;

      .el-dialog__headerbtn {
        position: fixed;
        top: 20px;
        right: 20px;
        .el-icon-close {
          color: #fff;
          font-size: 30px;
          font-weight: normal;
        }
      }
    }
    .el-dialog__body {
      padding: 0;
    }
    .images-dialog {
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
    }
    .images-dialog__left,.images-dialog__right {
      float: left;
      width: 50%;
      display: flex;
      justify-content: center;
    }
    .el-carousel {
      width: 80%;
      aspect-ratio: 3/4;
      .el-carousel__container {
        height: 100%;
      }
      .el-carousel__item {
        display: flex;
        align-items: center;
      }
      img {
        display: block;
        width: 100%;
      }
    }
    .images-dialog__right {
      p {
        width: 80%;
        aspect-ratio: 3/4;
        background: #fff;
        display: flex;
        align-items: center;
        overflow: hidden;
        margin: 0;
      }
      img {
        display: block;
        width: 100%;
      }
    }
  }
</style>


