<!--
 * @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">
      <div class="item" v-for="photo in meterImg" :key="photo.key">
        <div class="view-label">
          {{ photo.label }}
        </div>
        <div v-if="photo.img">
          <MyImage
            class="view-img"
            :src="photo.img.split(',')[0]"
            :previewSrcList="photo.img.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,
    };
  },
  methods: {
    viewCoverPhoto(meterImg) {
      this.meterImg = JSON.parse(meterImg);
      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{
  width: 200px;
  margin-bottom:30px;
}
.error {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 139px;
  background: #f5f7fa;
}
</style>
