<template>
    <div>
        <div  @click="onclick" class="select-dialog-box">
            <el-input
                :placeholder="properties.placeholder"
                v-model="value"
                :readonly="true"
                :clearable="true"
            />
            <div class="clear-dialog-div">
                <i class="el-icon-circle-close" @click.stop="clearDialog" />
            </div>
        </div>
    </div>
</template>
<script>
import mixin from "./mixin";
import veUserTagSelect from "./components/veUserTagSelect"
export default {
    name: "selectDialog",
    mixins: [mixin],
    components: {
        veUserTagSelect
    },
    data() {
        return {
            selectShow: false,
            value: "",
        };
    },
    created() {
        this.initProperties({
            placeholder: "点击选择",
            getShowText(data) {
                return "";
            },
            onclick({data,setData}) {}
        });
    },
    methods: {
        init(data) {
            this.data = data;
            this.value = this.properties.getShowText(data);
        },
        onclick() {
            let vm = this;
            this.properties.onclick({
                data:vm.data,
                setData(data) {
                    vm.data = data;
                    vm.value = vm.properties.getShowText(data);
                    vm.onChange(data);
                }
            });
        },
        onChange(obj) {
            this.$emit("update:model", obj);
            this.$emit("change", obj);
        },
        clearDialog() {
            this.value = "";
            this.onChange(null);
        }
    }
};
</script>
<style lang="less" scoped>
.select-dialog-box {
    position: relative;

    .clear-dialog-div {
        position: absolute;
        width: 30px;
        height: 100%;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        .el-icon-circle-close {
            width: 14px;
            height: 14px;
            color: #cccccc;
            transform: scale(0.9);
            display: none;
        }
    }

    .clear-dialog-div:hover .el-icon-circle-close {
        display: block;
    }
}
</style>
