<template>
    <div>
        <el-popover
            v-if="label.length > 9"
            popper-class="el-popover-default"
            placement="top-start"
            width="179"
            trigger="hover"
            :content="label">
            <div
                slot="reference"
                class="class-type-box"
            >
                <div
                    class="class-type-item"
                    :class="{'class-type-checked': checked, 'class-type-selected': selected}"
                    @click="callback"
                >
                    <p :class="{'matching-p': matching}">{{ label }}</p>
                </div>
                <i class="el-icon" :class="{'el-icon-success': checked, 'el-icon-error': selected}" @click="del"/>
            </div>
        </el-popover>
        <div v-else class="class-type-box">
            <div
                class="class-type-item"
                :class="{'class-type-checked': checked, 'class-type-selected': selected}"
                @click="callback"
            >
                <p :class="{'matching-p': matching}">{{ label }}</p>
            </div>
            <i class="el-icon" :class="{'el-icon-success': checked, 'el-icon-error': selected}" @click="del"/>
        </div>
    </div>

</template>

<script>
export default {
    name: "veTag",
    data() {
        return {};
    },
    props: {
        // 是否选中状态
        checked: {
            type: Boolean,
            default: false,
        },
        // 是否已经被选中 可移除
        selected: {
            type: Boolean,
            default: false,
        },
        // 班型名称
        label: {
            type: String,
            default: '默认班型名称默认班型名称默认班型名称',
        },
        // 班型名称是否匹配
        matching: {
            type: Boolean,
            default: false,
        },

    },
    created() {

    },
    methods: {
        callback() {
            this.$emit("callBack");
        },
        del() {
            if (this.selected) {
                this.$emit("del");
            }
        }
    }
};
</script>

<style scoped lang="less">
.class-type-box {
    padding: 6px;
    display: inline-block;
    width: 172px;
    height: 32px;
    position: relative;

    .class-type-item {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 8px;
        border: 1px solid rgba(179, 179, 179, 1);
        background: rgba(237, 238, 242, 1);
        display: flex;
        align-items: center;

        p {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgba(0, 0, 0, 0.65);
        }

        .matching-p {
            color: rgba(255, 68, 54, 1);
        }
    }

    .class-type-item:hover {
        border: 1px solid rgba(255, 68, 54, 1);
        background: rgba(255, 95, 54, 0.17);
    }

    .class-type-item:hover p {
        color: rgba(255, 68, 54, 1);
    }

    .class-type-checked {
        border: 1px solid rgba(255, 68, 54, 1);
        background: rgba(255, 95, 54, 0.17);

        p {
            color: rgba(255, 68, 54, 1);
        }
    }

    .class-type-selected {
        background: #FFFFFF;
    }

    .class-type-selected:hover {
        border: 1px solid rgba(255, 68, 54, 1);
        background: #FFFFFF;
    }

    .class-type-selected:hover p {
        color: rgba(0, 0, 0, 0.65);
    }

    .el-icon {
        position: absolute;
        width: 12px;
        height: 12px;
        top: 0;
        right: 0;
        border-radius: 50%;
        cursor: pointer;
        display: none;
    }

    .el-icon-success {
        color: rgba(255, 68, 54, 1);
        background: #FFFFFF;
        display: inline-block;
    }

    .el-icon-error {
        color: rgba(255, 68, 54, 1);
        background: #FFFFFF;
    }
}

.class-type-box:hover .el-icon-error {
    display: inline-block;
}

</style>
