<template>
    <hc-new-dialog is-table widths="800px" :show="isShow" title="合同工程清单选择" @save="modalSave" @close="modalClose">
        <el-scrollbar>
            <el-radio-group v-model="radioValue">
                <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode">
                    <template #default="{ data, level }">
                        <el-radio :label="data.name" size="large">{{ data.name }}</el-radio>
                    </template>
                </hc-lazy-tree>
            </el-radio-group>
        </el-scrollbar>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.ids,
], ([ids]) => {
    console.log('ids', ids)
}, { immediate: true })

//监听
watch(isShow, (val) => {
    if (val) {
        console.log('处理数据')
    }
})

const radioValue = ref('')

//数据格式
const treeProps = {
    label: 'name',
    children: 'children',
    isLeaf: 'leaf',
}

//懒加载的数据
const treeLoadNode = ({ level }, resolve) => {
    if (level === 0) {
        return resolve([{ name: 'region' }])
    }
    if (level > 3) {
        return resolve([])
    }
    setTimeout(() => {
        resolve([
            { name: 'leaf', leaf: true },
            { name: 'zone' },
        ])
    }, 500)
}

const modalSave = () => {
    emit('finish')
    modalClose()
}
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>
