<template>
  <div @click="handleClick">
    <div
      v-if="0"
      :style="{
        width: width + 'px',
        height: height + 'px',
        borderRadius: radius + 'px',
        backgroundColor: bgColor,
      }"
    >
      <div slot="error" class="xd-image-slot">
        <i class="el-icon-picture-outline" :style="`font-size: ${fsize}px;`"></i>
      </div>
    </div>
    <el-image
      v-else
      class="xd-image"
      :src="url"
      :preview-src-list="uiList"
      :style="{
        width: width + 'px',
        height: height + 'px',
        borderRadius: radius + 'px',
        backgroundColor: bgColor,
      }"
    >
      <div slot="error" class="xd-image-slot">
        <i class="el-icon-picture-outline" :style="`font-size: ${fsize}px;`"></i>
      </div>
    </el-image>
  </div>
</template>

<script>
  export default {
    name: "XdItemImage",
    props:{
      list: {
        type: Array | null,
        default: null
      },
      radius:{
        type: String,
        default: '0',
      },
      bgColor: {
        type: String,
        default: '#f4f4f4',
      },
      width:{
        type: Number,
        default: 180,
      },
      height: {
        type: Number,
        default: 120,
      },
    },
    watch:{
      list(){
        if (this.list === null) this.uiList = this.$xdHelper.cloneDeep(this.testList);
        else {
          this.uiList = this.$xdHelper.cloneDeep(this.list.map(item=>{
            return this.getImageFullPath(item, 'size8')
          }));
        }
        if (this.uiList.length > 0) {
          this.url = this.getImageFullPath(this.uiList[0], 'size8');
        }
      }
    },
    data(){
      return {
        fsize: 20,
        url: '',
        uiList: [],

        testList: [
          'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20211203103456125.jpg',
          "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20211203103504889.jpg",
          "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20211203103509599.jpg",
          "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20211203103512638.jpg"
        ],
      }
    },
    created() {
      this.fsize = this.width * 25 / 100;
      if(this.list === null) this.uiList = this.$xdHelper.cloneDeep(this.testList);
      else {
        this.uiList = this.$xdHelper.cloneDeep(this.list.map(item=>{
          return this.getImageFullPath(item, 'size8')
        }));
      }
      if(this.uiList.length > 0) {
        this.url = this.getImageFullPath(this.uiList[0], 'size8')
      }

    },

    methods:{
      handleClick(){
        this.$emit('click',this.previewList)
      }
    }

  }
</script>

<style scoped>
  .xd-image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: nowrap;
    flex-direction: column;
    border: 1px solid #eee;
  }

  /deep/ .xd-image > img {
    max-width: 96%;
    max-height: 96%;
    height: auto;
    width: auto;

  }

  /deep/ .xd-image .image-slot {
    font-size: 30px;
  }

  /deep/ .el-image-viewer__btn .el-icon-circle-close {
    color: #fff;
  }
</style>
