<template>
    <el-dialog
        v-model="dialogVisible"
        width="72%"
        align-center
        class="picture-preview-wrap"
        :show-close="false"
        append-to-body
        @close="closeDialog"
    >
        <div class="picture-file">
            <div class="left-img">
                <!-- v-loading="isLoadingImg"  element-loading-background="rgba(0, 0, 0, 0.3)" -->
                <album-carousel-item
                    lbum-carousel-item
                    v-if="images"
                    :key="nameRef"
                    :name="nameRef"
                    :farmId="farmId"
                    :images="images"
                    :lock="lock"
                ></album-carousel-item>
              </div>
            <file-wrap 
                ref="fileWrapRef"
                :sampleId="currentSampleId"
                :showTag="showTag"
                @update:activeOutput="handleActiveOutput"
            ></file-wrap>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref} from "vue";
import "./cacheImg.js";
import AlbumCarouselItem from "./albumCarouselItem";
import FileWrap from "@/components/FileWrap.vue";
import { dateFormat } from "@/utils/date_util.js";
import eventBus from "@/api/eventBus";

const lock = ref(false);
const farmId = ref(766);
const nameRef = ref("");

const isLoadingImg = ref(true)
const images = ref(null);
const dialogVisible = ref(false);
const currentSampleId = ref(null);
const fileWrapRef = ref(null);
// 获取当前日期
const currentDate = new Date();
// 获取当前日期的前一个月
const startDate = new Date(currentDate);
startDate.setMonth(currentDate.getMonth() - 1);

eventBus.on("change:watermark",function(name){
  nameRef.value = name
})

const showTag = ref(false)
eventBus.on("click:point",function({farmId,sampleId, data}){
  sampleId = data.id;
  currentSampleId.value = sampleId;
  
  // 调用子组件的方法获取数据
  if (fileWrapRef.value) {
    fileWrapRef.value.getSampleFiles(sampleId);
  }
  
  isLoadingImg.value = true
  let startDate = new Date(currentDate);
  startDate.setMonth(currentDate.getMonth() - 2);

// 格式化日期
  let params = {sampleId,farmId,startDate:dateFormat(startDate, "YY-mm-dd")}
  VE_API.miniimage.list(params, {Global: false}).then(res => {
      if(res.code === 0){
        dialogVisible.value = true
      images.value = res.data
      isLoadingImg.value = false
    }
  })
  showTag.value = data.nonghu == 1 ? true : false
})

eventBus.off("albumCarousel", toggleActiveImg);
eventBus.on("albumCarousel", toggleActiveImg);

const currentIndex = ref(0);
function toggleActiveImg(index) {
    currentIndex.value = index;
}

// 处理子组件的 activeOutput 更新事件
const handleActiveOutput = (name) => {
    // 可以在这里处理父组件需要响应的逻辑
    console.log('Active output changed:', name);
}

function closeDialog() {
    // 调用子组件的重置方法
    if (fileWrapRef.value) {
        fileWrapRef.value.resetState();
    }
}
</script>

<style lang="scss" scoped>
@import "src/styles/index";
.picture-file {
    display: flex;
    .left-img {
        min-width: 780px;
        min-height: 300px;
    }
}
</style>
<style lang="scss">
.picture-preview-wrap {
    background: none;
}
</style>
