<template>
    <div class="f-tree">
        <Input search placeholder="查找..." />
        <Tree class="inner-tree" :data="treeData" @on-select-change="selectData"></Tree>
    </div>
</template>
<script>
import Data from '../../data/web-form';
import { convertToTreeData } from '@/utils/tree-utils'

export default {
    name: 'FTree',
    data() {
        return {
            currVal: undefined,
            treeData: undefined
        }
    },
    components: {},
    props: {
        treeGuid: {
            type: String
        }
    },
    computed: {
        style() {
            return {

            }
        }
    },
    mounted() {
        if (this.treeGuid) {
            this.setupData();
        }
    },
    methods: {
        setupData() {
            Data.queryConfigTreeData(this.treeGuid).then(res => {
                this.treeData = convertToTreeData(res);
            });
        },
        selectData(node) {
            if (node && node.length > 0) {
                const select = node[0];

                const guid = select.guid || select.title;
                const label = select.title;

                this.label = label;
                this.$emit('on-select-selected', {
                    value: guid,
                    label: label,
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.f-tree {
    width: 100%;
    height: 100%;
    overflow: auto;


    .inner-tree {
        border: 1px solid #dcdee2;
        border-radius: 4px;
        margin-top: 6px;
    }
}
</style>