<template>
    <el-dialog v-model="dialogVisible" @close="handleClose" title="设置参数" style="width: 276px;height: 570px;"
        :close-on-click-modal="false">
        <div class="content">
            <el-form label-width="90px" v-model="calcParams">
                <el-form-item label="值域范围：">
                    <el-input-number v-model="calcParams.min" placeholder="起值" :controls="false" :precision="0" />
                    <div style="width: 30px;justify-content: center;text-align: center;">~</div>
                    <el-input-number v-model="calcParams.max" placeholder="终值" :controls="false" :precision="0" />
                </el-form-item>
            </el-form>
            <div class="img-layer">
                <LayerTree :isPopup="true" class="popup-tree" :show-oper="false" @selected-changed="handleLayerSelected"
                    :token-key="currentTokenKey" />
            </div>
        </div>
        <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 { ref, onMounted, onBeforeUnmount } from 'vue';
import { Check, Close } from "@element-plus/icons-vue";
const { $toastMessage } = useNuxtApp();
import { STORAGE_KEYS } from "~/utils/storageKeys"
// 当前页图件token的 key
const currentTokenKey = STORAGE_KEYS.FAVORABLE_AREA_TOKEN;

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

const selectedLayerData = ref(null);

// 计算参数
const calcParams = reactive({
    min: 0,
    max: 0
});

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

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

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


// 图层选择改变事件
const handleLayerSelected = (data) => {
    selectedLayerData.value = data;
};

// 确定选择事件
const handleConfirm = () => {
    if (calcParams.min > calcParams.max) {
        $toastMessage.warning("值域范围的终值必须大于起值!");
    } else {
        emit('setParams', { min: calcParams.min, max: calcParams.max, layer: selectedLayerData.value });
        handleClose();
    }
};

onMounted(() => {

});

onBeforeUnmount(() => {

});

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

.content {
    height: 450px;
}

.el-input-number {
    width: 60px;
    height: 25px;
}

.img-layer {
    height: 400px;
    background: #ccc;
    border: 1px solid #333;
    overflow: hidden;
    width: 100%;
}

.popup-tree {
    height: 400px;
    width: 100%;
}
</style>