<template>
  <div class="image-panel">
    <el-image 
      v-if="image.url"
      ref="preview"
      style="width: 100%;height:100%"
      :src="image.url"
      fit="cover"
      :preview-src-list="srcList">
    </el-image>
    <div class="mode flex-align-center flex-around">
      <i class="el-icon-zoom-in" @click="onPreview"></i>
      <i v-if="deletebtn" class="el-icon-delete" @click="deleteFileLink"></i>
    </div>
  </div>
</template>

<script>
export default {
  props:['image','deletebtn','list'],
  data () {
    return {
      srcList:[]
    }
  },
  methods:{
    async deleteFileLink () {
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "deleteFileLink",
        "content": {
          "linksids":[this.image.linksid]
        }
      })
      res.code === 1?this.$emit('onSuccess'):''
    },
    onPreview() {
      this.$refs.preview.clickHandler()
    },
  },
  watch: {
    image: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        if (this.list) {
          this.srcList = this.list.map(e=>{
            return e.url
          })
        } else {
          this.srcList.push(this.image.url)
        }
      },
    }
  }
}

</script>
<style scoped>
.image-panel{
  position: relative;
}
.image-panel:hover .mode{
  display: flex;
}
.mode{
  display: none;
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  font-size: 16px;
  background: rgba(0,0,0,.8);
}
</style>