<template>
  <div>
    <!-- 图片 -->
    <span v-for="img in images" :key="img.id" class="picture-card" :style="{ width: cardSize, height: cardSize, padding: paddingSize }">
      <img :src="img.url" :alt="img.name" />
      <span class="picture-action" :style="{ width: actionSize, height: actionSize, top: paddingSize, left: paddingSize }">
        <a-icon type="eye" class="picture-preview-icon" @click="handlePreview(img.url)" />
      </span>
    </span>
    <!-- 图片预览弹窗 -->
    <a-modal
      v-model="previewVisible"
      :footer="null"
      :z-index="1001"
      centered
      title="图片预览"
      @cancel="handlePreviewClose"
    >
      <image-preview ref="imagePreview" :src="previewPath" />
    </a-modal>
  </div>
</template>

<script>
import ImagePreview from '@vue2-client/components/ImagePreview/ImagePreview.vue'

export default {
  name: 'ImageItem',
  components: {
    ImagePreview
  },
  props: {
    images: {
      type: Array,
      required: true
    },
    width: {
      type: Number,
      default: 150
    },
    padding: {
      type: Number,
      default: 10
    }
  },
  data () {
    return {
      previewVisible: false,
      previewPath: ''
    }
  },
  computed: {
    cardSize: function () {
      return this.width + 'px'
    },
    actionSize: function () {
      return this.width - 2 * this.padding + 'px'
    },
    paddingSize: function () {
      if (Number(this.padding) === 0) {
        return 0
      } else {
        return this.padding + 'px'
      }
    }
  },
  methods: {
    handlePreview (path) {
      this.previewPath = path
      this.previewVisible = true
    },
    handlePreviewClose () {
      this.$refs.imagePreview.handleReset()
      this.previewVisible = false
      this.previewPath = ''
    }
  }
}
</script>

<style lang="less" scoped>
.picture-card {
  position: relative;
  display: inline-block;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  //padding: 10px;
  margin: 5px 5px 5px 5px;
  //overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  .picture-action {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #000;
    opacity: 0;
    transition: opacity 0.3s;
    &:hover {
      opacity: 0.4;
    }
  }
  .picture-preview-icon {
    font-size: 22px;
    color: #ccc;
    transition: color 0.3s;
    &:hover {
      color: #fff;
    }
  }
}
</style>
