<template>
    <div class="color-picker-sfc">
        <el-tabs v-model="activeName"
                 class="color-picker__tabs">
            <el-tab-pane label="主题色"
                         name="colors">
                <div class="colors-box">
                     <div class="color-item-box"
                         :class="{active:!currentColor}"
                         @click="currentColor = ''">
                         <div class="cancel">
                            取消<br/>选择
                         </div>
                    </div>
                    <div class="color-item-box"
                         :class="{active:item===currentColor}"
                         v-for="item,index in gradients"
                         @click="currentColor = item"
                         :key="index">
                        <div class="color-item"
                             :style="{background:item}"></div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { gradients } from "../../../../base-data/colors";
export default {
    name: "AceColorPicker",
    model: {
        event: "change",
        prop: "value",
    },
    props: {
        value: {
            type: String,
            default: "",
        },
    },
    computed: {
        gradients() {
            return gradients;
        },
        currentColor: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("change", value);
            },
        },
    },
    data() {
        return {
            activeName: "colors",
        };
    },
    mounted() {},
    methods: {},
};
</script>

<style lang="scss" scoped>
.color-picker-sfc {
    height: 100%;
    .colors-box {
        height: 100%;
        padding: 8px 0 0 0;
        overflow-y: auto;
        .color-item-box {
            float: left;
            padding: 8px;
            border-radius: 3px;
            cursor: pointer;
            &.active {
                background-color: rgba(0, 0, 0, 0.06);
                &:hover {
                    background-color: rgba(0, 0, 0, 0.06);
                }
            }
            &:hover {
                background-color: aliceblue;
            }
            .color-item {
                height: 44px;
                width: 44px;
                border-radius: 50%;
              
            }
              .cancel{
                    width: 44px;
                    cursor: pointer;
                       height: 44px;
                       display: flex;
                       justify-content: center;
                       align-items: center;
                       font-size: 12px;
                }
        }
    }
    ::v-deep .color-picker__tabs {
        height: 100%;
        overflow: hidden;
        .el-tabs__header {
            margin-bottom: 0;
        }
        .el-tabs__content {
            height: calc(100% - 40px);
        }
        .el-tab-pane {
            height: 100%;
        }
    }
}
</style>
