<template>
    <!--1-机构汇总关系-->
    <div>
        <span>汇总关系：</span>
        <pro-select3 v-model:value="localRelationNo" @onSelect="onSelect" class="relation-select" placeholder="请选择汇总关系"
            :allowClear="true" selectType="relationNo" :pageInterfaceNo="pageInterfaceNo">
        </pro-select3>
    </div>
    <!--2-机构树类型-->
    <div style="margin-bottom: -10px">
        <a-tabs type="card" v-model:activeKey="localTreeType" :tabBarGutter="5">
            <a-tab-pane v-for="tab in localTreeTabs" :key="tab.key" :tab="tab.title">
            </a-tab-pane>
        </a-tabs>
    </div>
    <!--3-机构树-->
    <pro-tree3 v-model:value="localBrNos" :relationNo="localRelationNo" treeType="deptTree" @getNodes="getNodes"
        :showCheckbox="true" :isWithoutDsc="true"></pro-tree3>
</template>
<script setup lang="jsx">
import { ref, defineProps, reactive, defineExpose, defineEmits, onMounted, onBeforeUnmount, watch, nextTick, computed } from 'vue';
const props = defineProps({
    relationNo: {
        type: String,
        default: '',
        required: true
    },
    brNos: {
        type: Array,
        default: () => [],
        required: true
    },
    pageInterfaceNo: {
        type: String,
        default: 'zzsearch_01_01_02'
    },
    // treeType: {
    //     type: String,
    //     default: '0'
    // }
});
const emits = defineEmits(['update:brNos', 'update:relationNo', 'get-nodes', 'onSelect']);
const localTreeType = ref('0');
const localTreeTabs = [
    {
        key: '0',
        title: '账务树',
    },
    {
        key: '1',
        title: '对比树',
    },
    {
        key: '2',
        title: '报送树',
    }
];

const localRelationNo = computed({
    get: () => {
        return props.relationNo;
    },
    set: (value) => {
        emits('update:relationNo', value);
    }
});

const localBrNos = computed({
    get: () => {
        return props.brNos;
    },
    set: (value) => {
        emits('update:brNos', value);
    }
});

function getNodes (value, nodes) {
    console.log('DepartPanel-getNodes', value, nodes);
    emits('get-nodes', value, nodes);
}

const onSelect = (value, option) => {
    emits('onSelect', value, option);
}
</script>

<style scoped>
.relation-select {
    /* display: inline-block; */
    /* vertical-align: middle; */
    width: 170px;
}
</style>
