<template>
  <div class="c-custom-img-warp">
    <el-image :src="isMontage ? (getAssetsFile(imgUrl)?.href ?? '') : imgUrl" :fit="fit" />
    <div v-if="isViewVal" class="viewer-btn-warp">
      <div class="viewer-btn" @click="toPreview">点击查看</div>
    </div>

    <el-image-viewer
      v-if="isViewVal && isPreview"
      :url-list="srcList"
      show-progress
      :initial-index="0"
      :teleported="true"
      @close="isPreview = false"
    />
  </div>
</template>
<script setup>
import { ref, watch, nextTick, reactive } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
const props = defineProps({
  url: {
    type: String,
    default: '',
  },
  previewList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  isView: {
    type: Boolean,
    default: false,
  },
  isMontage: {
    type: Boolean,
    default: true,
  },
  fit: {
    type: String,
    default: 'none',
  },
});

let imgUrl = ref(props.url);
let isViewVal = ref(props.isView);
let srcList = reactive(props.previewList);

watch(
  () => (props.url, props.previewList, props.isView),
  () => {
    imgUrl.value = props.url;
    isViewVal.value = props.isView;
    srcList = props.previewList;
    console.log('getAssetsFile', getAssetsFile(imgUrl));
  },
  {
    immediate: true,
  }
);

const isPreview = ref(false);
const toPreview = () => {
  isPreview.value = true;
};
</script>
<style lang="scss" scoped>
.c-custom-img-warp {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  ::v-deep() {
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .viewer-btn-warp {
    position: absolute;
    display: none;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .viewer-btn {
    background: $color-balck-mask;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 16px;
    color: $color-fff;
    font-size: 14px;
    cursor: pointer;
  }
}

.c-custom-img-warp:hover {
  .viewer-btn-warp {
    display: inline-block !important;
  }
}
</style>
