<template>
    <div>
        <div class="picker-select">
            <su-select-picker v-if="properties.type=='selectPicker'" v-model="value" ref="selectPicker"
                              :options="properties.options"/>
            <su-select-picker-limit v-else-if="properties.type=='selectPickerLimit'" ref="selectPickerLimit"
                                    v-model="value" :autoSet="properties.autoSet" :options="properties.options"/>
        </div>
    </div>


</template>

<script>
import MapUtil from "../../../util/pattern/map";
import seSelectPicker from "../../../form/su-select-picker"
import seSelectPickerLimit from "../../../form/su-select-picker-limit"
import mixin from "./mixin";
export default {
    name: "selectDialog",
    mixins: [mixin],
    components: {
        seSelectPicker,
        seSelectPickerLimit,
    },
    data() {
        return {
            selectShow: false,
            value: "",
            properties: {}
        };
    },
    watch: {
        value: {
            handler(newV, oldV) {
                this.onChange(newV)
            }
        },
    },
    created() {
        this.initProperties({
            placeholder: "点击选择",
            type: "userSelect"
        });
    },
    methods: {
        init(value) {
            this.value = value;
            this.$nextTick(() => {
                if (this.$refs[this.properties.type]) {
                    this.$refs[this.properties.type].init(this.value)
                }
            })

        },
        onChange(obj) {
            this.$emit("update:model", obj);
            this.$emit("change", obj);
        },
    }
};
</script>
<style lang="less" scoped>
.picker-select {
    /deep/ .select-picker-box {
        .right {
            .el-date-editor.el-input {
                width: 104px;
            }
        }

        .left {
            .el-input--mini {
                .el-input__inner {
                    width: 100px;
                }
            }
        }
    }
}
</style>
