<template>
  <!-- 支持官方文档Attributes、event -->
  <div class="base-img-box">
    <el-image
      class="base-img"

      :lazy="false"
      fit="cover"
      :src="realSrc"
      :preview-teleported="true"
      :preview-src-list="isPreview ? [realSrc] : null"
      ref="baseImgRef"
    />
    <div class="base-img-mask-layer" v-if="isSetCover">
      <div class="mask-layer-box">
        <div class="mask-layer-item" @click="handleLook">
          <el-icon size="20" class="el-icon-zoom-in" style="color:#fff"></el-icon>
        </div>
        <div class="mask-layer-item" @click="handleDelete">
          <el-icon size="20" class="el-icon-delete" style="color:#fff"></el-icon>
        </div>
        <div
          class="mask-layer-item"
          @click="handleSetCover"
          v-if="forIndex !== onforIndex"
        >
          <img
            class="mask-layer-item-icon"
            src="@/assets/images/cover.svg"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="fengmian" v-if="forIndex === onforIndex && isSetCover">
      <img src="@/assets/images/fengmian.png" alt="" />
    </div>
  </div>
</template>

<script>
// import { reqFileFullUrl } from '@/api/commonApi/file';
// import envConfig from '@/utils/envConfig';
// import { toFullUrl } from '@/utils/index';
// import { ZoomIn, Delete } from '@element-plus/icons-vue';

export default {
  name: 'BaseImage',
  props: {
    onforIndex: {
      type: Number,
      default: 0,
    },
    src: {
      type: String,
      required: true,
    },
    // 获取完整预览路径
    getFull: {
      type: Boolean,
      default: true,
    },
    // 是否开启图片预览
    isPreview: {
      type: Boolean,
      default: true,
    },
    // 是否开启图片预览
    code: {
      type: Number,
      default: 5000,
    },
    // 资源类型  sys：系统资源  business: 业务资源  用于区分上传路径
    resourceType: {
      type: String,
      default: 'business',
    },
    isSetCover: {
      type: Boolean,
      default: false,
    },
    forIndex: {
      type: Number,
      default: 9999,
    },
  },
  data() {
    return {
      accessUrl: '',
      baseImgRef: null,
    };
  },
  computed: {
    realSrc() {
      return this.accessUrl;
    },
  },
  watch: {
    src: {
      immediate: true,
      handler(newValue) {
        if (newValue && this.getFull) {
          this.getFileFullUrl();
        }
      },
    },
  },
  methods: {
    getFileFullUrl() {
      if (!this.src) return;
      if (process.env.NODE_ENV == 'development') {
        this.accessUrl = this.$baseURL + this.src; //开发环境
      } else {
        this.accessUrl = this.$baseURL + this.src; //发布环境
      }
    },
    handleLook() {
      this.$refs.baseImgRef.$el.children[0].click();
    },
    handleDelete() {
      this.$emit('handleDelete');
    },
    handleSetCover() {
      this.$emit('handleSetCover');
    },
  },
};
</script>

<style lang="scss" scoped>
.base-img-box {
  width: 100%;
  height: 100%;
  position: relative;
  .base-img {
    width: 100%;
    height: 100%;
  }
  .base-img-mask-layer {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    .mask-layer-box {
      background-color: rgba($color: #000000, $alpha: 0.5);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .mask-layer-item {
        position: relative;
        z-index: 2;
        cursor: pointer;
        .mask-layer-item-icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  &:hover .base-img-mask-layer {
    display: block;
  }
  .fengmian {
    position: absolute;
    top: 6px;
    right: 9px;
    img {
      width: 31px;
      height: 36px;
    }
  }
}
</style>