<template>
  <div class="mu-image-container" :style="{width:currentConfig.width+'px', height:currentConfig.height+'px'}">
    <div class="image-mark" v-if="currentConfig.srcList || currentConfig.options">
      <span v-if="currentConfig.srcList" @click="open" class="cursor"><i class="icon-zoomin"></i></span>
      <div class="icon-wraper" v-if="currentConfig.options">
        <span :key="index" v-for="(item, index) in currentConfig.options" class="cursor" @click="click(item)">
          <i :class="item.icon"></i>
        </span>
      </div>
    </div>
    <el-image
      class="mu-image"
      ref="previewImg"
      :class="{'mu-img-bar': currentConfig.imgBar}"
      :style="{'line-height':currentConfig.height+'px'}"
      :src="currentConfig.url"
      :fit="currentConfig.fit"
      :lazy="currentConfig.lazy"
      :preview-src-list="currentConfig.srcList"
      :z-index="currentConfig.zIndex"
      @load="load"
      @error="error">
      <div slot="error" style="background:#F4F1EF;">
        <i class="icon-image-error"></i>
      </div>
      <div slot="placeholder">
        <i class="icon-image-b"></i>
      </div>
    </el-image>
  </div>
</template>
<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';

  type Type = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'

  interface imgConfig {
    url: string,
    fit?: Type,
    lazy?: boolean,
    srcList?: Array<any>,
    zIndex?: number,
    width?: number,
    height?: number,
    imgBar?: boolean,
    options?: Array<any>,
    load?: Function,
    error?: Function
  }

  @Component({
    name: 'dtImage'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config!: imgConfig;
    private defaultConfig: any = {
      fit: 'fill',
      width: 100,
      height: 100,
      imgBar: true
    };

    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }

    // 打开放大图片预览
    open() {
      (this.$refs.previewImg as any).clickHandler();
    }

    // 按钮点击事件
    click(item: any) {
      item.onClick && item.onClick(item);
    }

    // 加载成功
    load(event: any) {
      this.config.load && this.config.load(event);
    }

    // 加载失败
    error(event: any) {
      this.config.error && this.config.error(event);
    }
  }
</script>
<style lang="scss" scoped>
  .mu-image-container {
    position: relative;

    .image-mark {
      display: none;
      position: absolute;
      background: rgba(41, 41, 41, 0.78);
      width: 100%;
      height: 100%;
      z-index: 1;
      justify-content: center;
      align-items: center;

      .icon-wraper {
        display: inline-block;
      }
    }

    &:hover .image-mark {
      display: flex;
    }

    .mu-image {
      width: 100%;
      height: 100%;
      text-align: center;
    }

    .load-error {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon-image-b {
      font-size: 42px;
      color: #B9B9AF;
    }

    .icon-image-error {
      font-size: 42px;
      color: #B9B9AF;
    }

    .icon-delete {
      font-size: 18px;
      color: #FFFFFFFF;
    }

    .icon-zoomin {
      font-size: 18px;
      color: #FFFFFFFF;
    }

    .cursor {
      cursor: pointer;
      color: #FFFFFFFF;
      font-size: 18px;
      margin-right: 8px;
    }
  }
</style>
