<template>
    <view style="width: 100%">
        <u--input :value="formatValue(value)" disabledColor="#ffffff" :placeholder="placeholder"
            border="border"></u--input>
        <u-picker ref="uPicker" :show="visibel" :keyName="labelName" :columns="VarColumns" @confirm="skillConfirm"
            @cancel="skillClose" @close="skillClose" @change="changeHandler"></u-picker>
    </view>
</template>

<script>
    import {
        isArray
    } from 'lodash'
    export default {
        data() {
            return {
                valued: '',
                VarColumnsIndex: [],
                VarColumns: [],
            }
        },
        props: {
            border: {
                type: String,
                default: 'none'
            },
            valueName: {
                type: String,
                default: 'value'
            },
            labelName: {
                type: String,
                default: 'label'
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            visibel: {
                type: Boolean,
                default: false,
            },
            tree: {
                type: Array,
                require: true
            },
            deep: {
                type: Number,
                require: 1
            },
            value: {
                type: String,
                require: ''
            },
            cancel: {
                type: Function
            },
            returnValue: {
                type: String,
                default: 'value',
            },
            joinSymbel: {
                type: String,
                default: '-',
            }
        },
        created() {
            this.VarColumnsIndex = new Array(3).fill(this.deep)
            const arr = []
            this.changeHandler({
                columnIndex: 0,
                index: 0
            })
        },
        methods: {
            skillClose() {
                this.$emit("cancel");
            },
            skillConfirm({
                index,
                value,
                values
            }) {
                if (this.returnValue === 'label') {
                    this.$emit("input", value.map(item => item[this.labelName]).join(this.joinSymbel));
                } else {
                    this.$emit("input", value);
                }
                this.$emit("cancel");
            },
            changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
                } = e
                // 微信小程序无法将picker实例传出来，只能通过ref操作
                const picker = this.$refs.uPicker
                const columnlist = []
                const arr = JSON.parse(JSON.stringify(this.VarColumnsIndex)).map((vItem, vIndex) => {
                    switch (true) {
                        case vIndex < columnIndex:
                            return vItem
                        case vIndex === columnIndex:
                            return index
                        default:
                            return 0
                    }
                })
                for (let i = 0; i <= arr.length - 1; i++) {
                    if (i) {
                        if (picker) {
                            picker.setColumnValues(i, columnlist[columnlist.length - 1][arr[i - 1]].children)
                        }
                        columnlist.push(columnlist[columnlist.length - 1][arr[i - 1]].children)
                    } else {
                        columnlist.push(this.tree)
                    }
                }
                this.VarColumnsIndex = arr
                this.VarColumns = columnlist
            },
            formatValue(val) {
                if (Array.isArray(val)) {
                    if (typeof val[0] === 'object') {
                        return val.map(item => item[this.labelName]).join(this.joinSymbel)
                    } else {
                        return val.join(this.joinSymbel)
                    }
                } else {
                    return val
                }
            },
        },

    }
</script>

<style>
</style>