<template>
  <!-- <div v-if="dialogVisible"> -->
  <el-dialog
    v-model="dialogVisible"
    width="65%"
    class="picture-preview v-dialog"
    :show-close="false"
    top="5vh"
    append-to-body
  >
    <!-- <template #header>
      <div class="dialog-header">
        <div>图片预览</div>
        <div class="right">
          <el-icon
            @click="dialogVisible = false"
            class="close-icon"
            color="#00FFF0"
            size="20px"
            ><CircleCloseFilled
          /></el-icon>
        </div>
      </div>
    </template> -->
    <div class="dialog-body">
      <div ref="imageRef" v-if="isArray">
        <el-carousel
          ref="carouselRef"
          height="88.8vh"
          :initial-index="curIndex"
          :autoplay="false"
          indicator-position="none"
        >
          <el-carousel-item v-for="item in imageUrl" :key="item">
            <DrawBox
              v-if="switchValue && item.markText && imgWidth"
              :sourceData="item.markText"
              :width="imgWidth"
              :height="imgHeight"
            ></DrawBox>
            <img
              class="image no-events"
              :src="item.imgPath"
              alt=""
              fit="cover"
            />
            <div class="watermark-style">
              <div class="left">
                <div class="region">2区</div>
                <div class="date">{{ item.uploadDate }}</div>
                <div class="whq">
                  {{ item.bigPeriodName
                  }}<span v-show="item.bigPeriodName && item.smallPeriodName"
                    >-</span
                  >{{ item.smallPeriodName }}
                </div>
                <div class="code">
                  <div class="code-txt">生长正常</div>
                </div>
                <div class="weather">
                  <div class="temperature">
                    <img src="@/assets/img/sun_icon.png" alt="" />
                    <div class="num">
                      <div>26-32℃</div>
                    </div>
                  </div>
                  <div class="temperature">
                    <img src="@/assets/img/rain_icon.png" alt="" />
                    <div class="num">
                      <div>60% 0.34ｍl</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="right">
                <div class="block mr">病虫害</div>
                <div class="block">二梢杀虫</div>
              </div> -->
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div style="height: 100%" v-else>
        <DrawBox
          v-if="switchValue && imageUrl.markText && imgWidth"
          :sourceData="imageUrl.markText"
          :width="imgWidth"
          :height="imgHeight"
        ></DrawBox>
        <img
          class="image no-events"
          :src="imageUrl.filename + '?x-oss-process=image/resize,w_2000'"
          alt=""
          fit="cover"
          ref="imageRef"
        />
        <div class="watermark-style">
          <div class="left">
            <div class="region">2区</div>
            <div class="date">{{ imageUrl.uploadDate }}</div>
            <div class="whq">
              {{ imageUrl.bigPeriodName
              }}<span
                v-show="imageUrl.bigPeriodName && imageUrl.smallPeriodName"
                >-</span
              >{{ imageUrl.smallPeriodName }}
            </div>
            <div class="code">
              <div class="code-txt">生长正常</div>
            </div>
            <div class="weather">
              <div class="temperature">
                <img src="@/assets/img/sun_icon.png" alt="" />
                <div class="num">
                  <div>26-32℃</div>
                </div>
              </div>
              <div class="temperature">
                <img src="@/assets/img/rain_icon.png" alt="" />
                <div class="num">
                  <div>60% 0.34ｍl</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="right">
              <div class="block mr">病虫害</div>
              <div class="block">二梢杀虫</div>
            </div> -->
        </div>
      </div>
      <!-- 自定义水印内容 -->
      <!-- <slot v-else></slot> -->
    </div>
  </el-dialog>
  <!-- </div> -->
</template>

<script setup>
import DrawBox from "@/components/drawBox.vue";
import { ref, watch, computed, onMounted, nextTick } from "vue";
const props = defineProps({
  imageUrl: {
    type: [Object, Array],
    default: () => {},
  },
  show: {
    type: Boolean,
    default: false,
  },
  switchValue: {
    type: Boolean,
    default: false,
  },
  customWatermark: {
    type: Boolean,
    default: false,
  },
  curIndex: {
    type: Number,
    default: 0,
  },
});

const curDate = new Date();
const curYear = curDate.getFullYear();
const curMonth = curDate.getMonth() + 1;
const curDay = curDate.getDate();

const isArray = computed(() => Array.isArray(props.imageUrl));

const dialogVisible = ref(false);

const carouselRef = ref(null);
const imageRef = ref(null);
const imgWidth = ref("");
const imgHeight = ref("");

const caruuselItem = ref(null);

onMounted(async () => {
  dialogVisible.value = true;
  await nextTick();
  if (imageRef.value) {
    imgWidth.value = imageRef.value.offsetWidth;
    imgHeight.value = imageRef.value.offsetHeight;
  }
});

watch(
  () => props.show,
  (newValue, oldValue) => {
    if (carouselRef.value && carouselRef.value.setActiveItem) {
      carouselRef.value.setActiveItem(props.curIndex);
    }
    dialogVisible.value = true;
  }
);
</script>

<style lang="scss" scoped>
.picture-preview {
  .dialog-body {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .image {
      width: 100%;
      height: 100%;
    }
  }
}
::v-deep {
  .el-carousel__arrow {
    background: rgba(0, 0, 0, 0.4);
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
}
</style>

<style lang="scss">
.picture-preview {
  height: 89%;
  box-sizing: border-box;
  .el-dialog__body {
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
