<template>
    <el-dialog
        v-model="dialogVisible"
        width="100%"
        align-center
        class="picture-preview-wrap v-dialog"
        :show-close="true"
        append-to-body
    >
        <div class="picture-file">
            <div class="compare-l" @click.stop="dialogVisible=false">
                <div class="left-img" @click.stop="noFun">
                    <album-carousel-item
                        lbum-carousel-item
                        v-if="images"
                        :key="nameRef+farmId+sampleId"
                        :name="nameRef"
                        :farmId="farmId"
                        :images="images"
                        :lock="lock"
                    ></album-carousel-item>
                </div>
                <div class="bottom-wrap" @click.stop="noFun">
                    <file-wrap 
                        ref="fileWrapRef1"
                        :sampleId="currentSampleId1"
                        :showTag="showTag"
                        @update:activeOutput="handleActiveOutput1"
                        className="styleName2"
                    ></file-wrap>
                </div>
            </div>
            <div class="compare-r" @click.stop="dialogVisible=false">
                <div class="left-img" @click.stop="noFun">
                    <album-carousel-item
                        lbum-carousel-item
                        v-if="images2"
                        :key="nameRef + '2' + farmId2 + sampleId2"
                        :name="nameRef"
                        :farmId="farmId2"
                        :images="images2"
                        :lock="lock"
                    ></album-carousel-item>
                </div>
                <div class="bottom-wrap" @click.stop="noFun">
                    <file-wrap 
                        ref="fileWrapRef2"
                        :sampleId="currentSampleId2"
                        :showTag="showTag2"
                        @update:activeOutput="handleActiveOutput2"
                        className="styleName2"
                    ></file-wrap>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

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

const lock = ref(false);
const farmId = ref(766);
const farmId2 = ref(766);
const sampleId = ref(null);
const sampleId2 = ref(null);
const nameRef = ref("");

const isLoadingImg = ref(true);
const images = ref(null);
const images2 = ref(null);
const dialogVisible = ref(false);

function noFun() {
    return false;
}

// FileWrap 组件引用
const fileWrapRef1 = ref(null);
const fileWrapRef2 = ref(null);
const currentSampleId1 = ref(null);
const currentSampleId2 = 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);
const showTag2 = ref(false);
eventBus.on("showCompareDialog", function (compareArr) {
    images.value = [];
    images2.value = [];
    
    compareArr.forEach((item, index) => {
        dialogVisible.value = true;
        
        if (index === 0) {
            farmId.value = item.farmId;
            sampleId.value = item.sampleId;
            currentSampleId1.value = item.data.id;
            
            // 获取图片数据
            VE_API.miniimage.list({ farmId: item.farmId, sampleId: item.sampleId }, {Global: false}).then((res) => {
                if (res.code === 0) {
                    images.value = res.data;
                }
            });
            
            const dataItem = item.data;
            showTag.value = dataItem.nonghu == 1 ? true : false;
        } else {
            farmId2.value = item.farmId;
            sampleId2.value = item.sampleId;
            currentSampleId2.value = item.data.id;
            
            // 获取图片数据
            VE_API.miniimage.list({ farmId: item.farmId, sampleId: item.sampleId }, {Global: false}).then((res) => {
                if (res.code === 0) {
                    images2.value = res.data;
                }
            });
            
            const dataItem = item.data;
            showTag2.value = dataItem.nonghu == 1 ? true : false;
        }
    });
});

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

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



// 处理左侧 FileWrap 组件的 activeOutput 更新事件
const handleActiveOutput1 = (name) => {
    // 可以在这里处理父组件需要响应的逻辑
}

// 处理右侧 FileWrap 组件的 activeOutput 更新事件
const handleActiveOutput2 = (name) => {
    // 可以在这里处理父组件需要响应的逻辑
}

// FileWrap 组件现在会自动监听 sampleId 变化，无需手动调用

</script>

<style lang="scss" scoped>
@import "src/styles/index";
.picture-file {
    display: flex;
    .left-img {
        // min-width: 500px;
        // width: 782px;
        margin: 0 auto;
        width: calc(50vw - 200px);
        // height: 580px;
    }
    .compare-l {
        padding-right: 40px;
    }
    .compare-r {
        // padding-left: 60px;
    }
}
</style>
<style lang="scss">
.picture-preview-wrap {
    background: none;
}
</style>
