<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2024-01-09 13:27:11
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-07-25 10:30:25
 * @FilePath: /huaxin-web/src/views/checktask/task/components/CoverPhotoView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    title="图片浏览"
    :visible.sync="open"
    width="900px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div class="flex flex-w bb">
      <el-image
        v-if="imageList"
        v-for="img in imageList"
        :src="img"
        :preview-src-list="[img]"
        :z-index="9999"
        class="picture"
      />
      <div class="error" v-else>暂无图片</div>
      <!-- <div class="item" v-for="photo in meterImg" :key="photo.key">

         <div class="view-label">
           {{ photo.label?photo.label:photo.name }}
         </div>
         <div v-if="photo.img">
           <MyImage
             class="view-img"
             :src="photo.img.split(',')[0]"
             :previewSrcList="photo.img.split(',')"
           >
           </MyImage>
         </div>
         <div v-else-if="photo.src">
           <MyImage
             class="view-img"
             :src="photo.src.split(',')[0]"
             :previewSrcList="photo.src.split(',')"
           >
           </MyImage>
         </div>
         <div class="error" v-else>暂无图片</div>
      </div>-->
    </div>
  </el-dialog>
</template>

<script>
import MyImage from "@/components/MyImage/index.vue";
export default {
  name: "cover-photo-view",
  components: {
    MyImage,
  },
  data() {
    return {
      meterImg: [
        {
          key: "",
          label: "",
          img: "",
          required: true,
        },
      ],
      open: false,
      imageList: []
    };
  },
  methods: {
    viewCoverPhoto(meterImg) {
      this.imageList = [];
      if(meterImg){
        var meterImgJsonArr = JSON.parse(meterImg);
        meterImgJsonArr.forEach(item =>{
          if(item.img){
            var imgs= item.img.split(',');
            if(imgs){
              this.imageList.push(...imgs)
            }
          }
          if(item.src){
            var imgs= item.img.split(',');
            if(imgs){
              this.imageList.push(...imgs)
            }
          }
        })
      }
      this.open = true;
    },
  },
};
</script>

<style scoped lang="scss">
.view-label {
  font-size: 18px;
  line-height: 40px;
}

// .view-img {
//   width: 111px;
//   height: 111px;
//   margin: 3px;
// }
.item{
  margin-bottom:30px;
  display: flex;
}
.error {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 139px;
  background: #f5f7fa;
}

.picture {
  width: 130px;
  height: 130px;
  margin: 2px;
}
</style>
