<template>
	<div class="xd-table-images">
		<div
			class="xd-table-images__item"
			v-if="ulList.length > 0"
			v-for="(item,index) in ulList"
			:key="index"
			:style="{width:width + 'px', height: height + 'px'}"
		>
			<el-image
				fit="scale-down"
				:src="item"
				:preview-src-list="getList(index)"
			>
				<div slot="error" class="image-slot" :style="{width: width + 'px', height:height + 'px'}">
					<i class="iconfont icontuxiangma"></i>
				</div>
			</el-image>
		</div>
	</div>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon";
  export default {
    name: "XdTableImages",
    components: {
      XdFontIcon
    },
		props: {
      list: {
        type: Array | null,
        default: null
      },
      width: {
        type: Number | String,
        default: 133
      },
      height: {
        type: Number | String,
        default: 100
      },
		},
		data(){
      return {
        ulList: [],
			}
		},
		created() {
      if(this.list !== null &&
				this.$xdHelper.checkVarType(this.list) === 'array'
			) {
        this.ulList = this.getImageFormat(this.list);
			}

    },
		methods: {
      checkUrl(url) {
        let reg = /^\/.+$/;
        if (reg.test(url)) return url;
        else return `/${url}`
      },
      getImageFormat(data) {
        return data.map(item => {
          let reg = /^(http:\/\/)|(https:\/\/)|(\/\/).+$/;
          if (this.$xdHelper.checkVarType(item) === 'string') {
            if(reg.test(item)) return this.getImageFullPath(item, 'size8')
            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')
            }
          }
        });
      },

      getList(index) {
        let arr = this.$xdHelper.cloneDeep(this.ulList);
        let end = arr.splice(0, index);
        let temp = [];
        arr.concat(end).map(item => {
          temp.push(item)
        });
        return temp
      },
		}
  }
</script>

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

		&__item {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,.1);
			margin: 5px 10px 5px 0;
			padding: 3px;


			& ::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-icon-circle-close{
				color: #fff;
			}
		}
	}
</style>
