<!-- 
 * @name    表格显示图片组件
 * @authors pen (you@example.org)
 * @date    2022-06-08 
 * @version 1.0.0
 *
 -->
 <template>
  <div class="goods_info" :style="tableImgStyle">
    <el-popover placement="right" trigger="hover" popper-class="pop_box">
      <img
        v-if="popImgUrl || imgUrl || defaultImg"
        class="img_box img"
        :style="popoverImgStyle"
        :src="popImgUrl || imgUrl || defaultImg"
        alt
      />
      <div
        v-else
        :style="popoverImgStyle"
        class="tableDefaultImg img_box"
      ></div>
      <div slot="reference" class="comp_img_box">
        <img
          v-if="imgUrl || defaultImg"
          class="img_box small_img"
          :style="tableImgStyle"
          :src="imgUrl || defaultImg"
          alt
        />
        <div
          v-else
          :style="tableImgStyle"
          class="tableDefaultImg img_box"
        ></div>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'table-img-view',
  props: {
    // 图片路径
    imgUrl: {
      type: String
    },
    // 默认图片路径
    defaultImg: {
      type: String
    },
    // 大图图片路径
    popImgUrl: {
      type: String
    },
    // 表格图片显示的样式
    popoverImgStyle: {
      type: Object,
      default: () => {
        return {
          width: '180px',
          height: '180px'
        }
      }
    },
    tableImgStyle: {
      type: Object,
      default: () => {
        return {
          width: '36px',
          height: '36px'
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.goods_info {
  width: 36px;
  height: 36px;
  text-align: center;
  margin: 0 auto;
}
.comp_img_box {
  // width:36px;
  // margin: 0 auto;
  border-radius: 2px;
}
.img_box {
  border-radius: 2px;
}
.img {
  width: 100%;
  height: auto !important;
}
.small_img {
  object-fit: cover;
}
.tableDefaultImg {
  background: url('../../img/goods_defaul.png');
  background-size: cover;
  margin-right: 0;
}
</style>
