<template>
    <div class="theme-color-content clearfix" ref="themeSels">
        <div class="theme-color-block" :title="item.text" :key="index" @click="itemClick(item,$event)"
             :style="itemStyle(item)" :ref="item.id" v-for="(item,index) in colors">

        </div>
    </div>
</template>

<script>
    export default {
        name: "go-color-theme-sel",
        props: {
            value: {},
            colors: {
                type: Array,
                default: () => []
            },
        },
        methods: {
            //设置选项的颜色
            itemStyle(item) {
                return {backgroundColor: item.color};
            },
            addSelIcon(item, elObj) {
                $(this.$refs.themeSels).find(".theme-sel").remove();
                $(elObj).html(`<i  aria-label="图标: check" class="theme-sel ivu-icon ivu-icon-ios-checkmark" style="font-size: 30px; position: relative; top: -5px; left: -5px; font-weight: 500;"></i>`);
            },
            //选项设置
            itemClick(item, event) {
                this.$emit("input", item.id);
                this.addSelIcon(item, event.target);
                this.$emit("selItem", item.id);
            },
            selItem(value) {
                this.colors.forEach((item) => {
                    if (item.id === value) {
                        this.addSelIcon(item, this.$refs[item.id]);
                    }
                });
            }
        },
        mounted() {
            this.selItem(this.value);
        },
        watch: {
            value(newValue) {
                this.selItem(newValue);
            }
        }
    };
</script>

<style>
    .theme-color-content {
        padding: 5px 0;
    }

    .theme-color-content .theme-color-block {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 8px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        border-radius: 2px;
        cursor: pointer;
    }
</style>
