<template>
    <el-dialog v-model="dialogVisible" @close="handleClose" title="选择图件" style="width: 800px;height: 580px;"
        :close-on-click-modal="false">
        <el-tabs type="border-card" tab-position="top" v-model="activeTab">
            <el-tab-pane label="地质图件" name="geologyImg">
                <GeologyImg @selected-rows="selectedGeologyImgData" />
            </el-tab-pane>
            <el-tab-pane label="地质参数图件" name="geologyParamImg">
                <GeologyParamImg @selected-rows="selectedGeologyParamImgData" />
            </el-tab-pane>
        </el-tabs>
        <div class="oper-bottom">
            <el-button type="warning" :icon="Close" @click="handleClose">取消</el-button>

            <el-button type="primary" :icon="Check" @click="handleConfirm">确定</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { Check, Close } from "@element-plus/icons-vue";
const { $toastMessage } = useNuxtApp();

const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['updateSelected', 'update:changeShowDialog']);

const activeTab = ref("geologyImg");
let selectedData = [];
const selectedGeologyImg = ref(null);
const selectedGeologyParamImg = ref(null);

// 控制弹出框显示
const dialogVisible = ref(props.isVisible);

const handleClose = () => {
    dialogVisible.value = false;
    emit('update:changeShowDialog', false);
};

// 确定选择事件
const handleConfirm = () => {
    if (selectedGeologyImg.value?.length > 0 || selectedGeologyParamImg.value?.length > 0) {
        if (selectedGeologyImg.value) {
            selectedGeologyImg.value.forEach(item => {
                selectedData.push(item);
            });
        }

        if (selectedGeologyParamImg.value) {
            selectedGeologyParamImg.value.forEach(item => {
                selectedData.push(item);
            });
        }
        emit('updateSelected', selectedData);
        handleClose();
    } else {
        $toastMessage.warning("请选择图件!");
        return;
    }
}

const selectedGeologyImgData = (data) => {
    selectedGeologyImg.value = data;
};

const selectedGeologyParamImgData = (data) => {
    selectedGeologyParamImg.value = data;
};

</script>
<style scoped>
.oper-bottom {
    padding: 5px;
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
    height: 40px;
    margin-top: 10px;
}
</style>