<template>
    <div>
        <div
            @click="selectShow = true"
            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>
            <ve-user-tag-select
                v-if="properties.type == 'userTagSelect'"
                :ref="properties.type"
                :show.sync="selectShow"
                :school-id="properties.schoolId"
                @callback=" labelData => {
                        let arr = [];
                        for (var i = 0; i < labelData.length; i++) {
                            arr.push(labelData[i].labelName);
                        }
                        let str = arr.toString().length > 8 ? arr.toString().substring(0, 15) + '...' : arr.toString();
                        value = str;
                        onChange(labelData);}"
            />
        </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: "",
            properties:{}
        };
    },
    created() {
        this.initProperties({
            placeholder: "点击选择",
            type: "userSelect",
            getShowText(data) {
                return "";
            },
            onclick({data,setData}) {

            }
        });
    },
    methods: {
        init(data) {
            if (data) {
                if (this.properties.type == "classSelect") {
                    this.value = data.className || "";
                } else if (this.properties.type == "userTagSelect") {
                    let str = app.ListUtil.toArray(data, "labelName").join();
                    str = str.length > 8 ? str.substring(0, 15) + "..." : str;
                    this.value = str;
                } else {
                    this.value = data.userName || data.userLoginname || data.userMobile || data.userId;
                }
            } else {
                this.value = "";
            }
        },
        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.$emit("change", "");
            // 初始化组件
            if (this.$refs[this.properties.type]) {
                this.$refs[this.properties.type].init && this.$refs[this.properties.type].init();
            }
        }
    }
};
</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>
