<template>
  <div class="xd-table-image" :style="{width: width + 'px', height:height + 'px'}">
    <el-image
      :src="uiThumb"
      :preview-src-list="uiThumbPreview"
    >
      <div slot="error" class="image-slot" :style="{width: width + 'px', height:height + 'px'}">
        <i class="iconfont icontuxiangma"></i>
      </div>
    </el-image>
  </div>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon";
  export default {
    name: "XdTableImage",
    components: {
      XdFontIcon
    },
    props:{
      thumb: {
        type: String,
        required: true,
      },
      thumbPreview: {
        type:Array | null,
        default: null
      },
      width: {
        type:Number|String,
        default: 133
      },
      height: {
        type: Number | String,
        default: 100
      },
    },
    data(){
      return {
        uiThumb: null,
        uiThumbPreview: [],
      }
    },
    
    created() {
      this.uiThumb = this.getUrl(this.thumb);
      this.uiThumbPreview = this.thumbPreview.map(item=>{
        return this.getUrl(item)
      })
    },
    methods: {
      checkUrl(url){
        let reg = /^\/.+$/;
        if(reg.test(url)) return url;
        else return `/${url}`
      },
      getUrl(item){
        let reg = /^(http:\/\/)|(https:\/\/)|(\/\/).+$/;
        if (this.$xdHelper.checkVarType(item) === 'string') {
          if (reg.test(item)) {
            return item
          } else {
            return this.getImageFullPath(this.checkUrl(item), 'size8')
          }
        }
        if (this.$xdHelper.checkVarType(item) === 'object') {
          let src = item.src || item.url;
          if (reg.test(src)) return src
          else {
            return this.getImageFullPath(this.checkUrl(src), 'size8')
          }
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .xd-table-image {
    display: flex;
    justify-content: center;
    align-items: center;

    & .el-image {
      display: flex;
      justify-content: center;
      align-items: center;
   
    }
  
    & ::v-deep .image-slot {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
      
      & i {
        font-size: 40px;
        font-weight: 100;
        color: #ccc;
      }
    }
    
    & ::v-deep .el-image .el-image-viewer__close i {
      color: #fff;
    }
  }
</style>
