<template>
    <div :class="nxSelectTreeClass">
        <SelectTree
            :data="treeData"
            :disabled="noEdit"
            :placeholder="placeholder"
            :style="style"
            @on-change="onValueChange"
            v-model="currVal"
        ></SelectTree>
        <span class="error">{{fieldError}}</span>
    </div>
</template>
<script>
import Item from '../mixins/item'
import Data from '../../../../data/web-form'
import SelectTree from './select-tree-component'

export default {
    name: 'FSelectTree',
    data() {
        return {
            currVal: undefined,
            treeData: undefined
        }
    },
    components: {
        SelectTree
    },
    mixins: [Item],
    props: {
        listenProp: { type: String, default: '' },
        itemValueChange: { type: Function },
        dsValue: { type: [String, Array] },
        noEdit: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        style() {
            return {}
        },

        nxSelectTreeClass() {
            return {
                'ivu-form-item-error': this.fieldError
            }
        }
    },
    mounted() {
        this.setupData()
    },
    methods: {
        /*表单数据改变*/
        formValueChange(value) {
            if (value) {
                this.currVal = value[this.prop]
                this.onValueChange()
            }
        },
        /*获取数据*/
        getValue() {
            return this.currVal
        },
        // /*其它项目数据改变*/
        // itemValueChange(prop, value, formData) {
        //     //加载下拉数据
        //     // alert(prop + ' ->下拉数据 ' + value);
        //     this.currVal = value;
        // },
        /*数据改变，其它组件可以得到通知, 注意不要循环引用*/
        onValueChange() {
            this.form.$emit('_.form.itemChange', {
                prop: this.prop,
                value: this.currVal
            })

            if (this.currVal) {
                this.form.formError[this.prop] = null
            }
        },

        setupData() {
            Data.queryConfigTreeData(this.dsValue).then(res => {
                this.treeData = res
            })
        }
    }
}
</script>
<style scoped>
</style>
