<template>
  <ele-modal
    title="拍照列表"
    :visible.sync="phoneVisible"
    :before-close="handleClose"
    top="25vh"
    append-to-body
    width="40%"
    :maxable="false"
  >
    <div class="demo-image__preview">
      <el-image
        v-for="item in imagesList"
        class="image"
        :src="item"
        :preview-src-list="imagesList"
      >
      </el-image>
    </div>
    <div slot="footer">
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  export default {
    props: {
      imagesList: {
        type: Array,
        default: () => []
      },
      phoneVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {};
    },
    watch: {
      imagesList: {
        handler(newVal) {
          this.imagesList = newVal;
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleClose() {
        this.$emit('closePhone');
      }
    }
  };
</script>
<style scoped lang="scss">
  .demo-image__preview {
    width: 100%;
    .image {
      width: 31%;
      height: auto;
      object-fit: cover;
      margin-right: 3%;
      margin-bottom: 16px;
    }
    .image:nth-child(3n) {
      margin-right: 0;
    }
  }
</style>
