<template>
    <div class="veColorPicker" v-click-outside="hideClick">
        <div class="colorBlock" @click="showClick" :style="{'backgroundColor': selfColor || '#F05654'}"></div>
        <transition name="fade">
            <div v-if="show" class="pickColor">
                <div
                    v-for="(color,index) in colorList"
                    :key="index"
                    :style="{'backgroundColor': color}"
                    @click="pick(color)"
                ></div>
            </div>
        </transition>
    </div>
</template>

<script>
import clickOutside from "../../../service/directives/click-outside";
export default {
    name: "veColorPicker",
    directives:{
        clickOutside
    },
    data() {
        return {
            // selfColor: this.color,
            show: false,
            colorList: [
                "#F98257",
                "#BA5DB7",
                "#F56C6C",
                "#56BD94",
                "#409EFF",
                "#EDAF45",
                // "#9ED900",
                // "#4B5CC4",
                // "#FF4777",
                // "#758A99",
                // "#44CEF6",
                // "#FF461F"
            ]
        };
    },
    props: {
        color: {
            type: String,
            default: "#F05654"
        }
    },
    computed:{
        selfColor:{
            get() {
                return this.color;
            },
            set(v) {
                this.$emit("update:color", v);
            }
        }
    },
    created() {},
    methods: {
        showClick() {
            this.show = !this.show;
        },
        hideClick() {
            this.show = false
        },
        pick(color) {
            this.selfColor = color;
            this.show = false;
            this.$emit('change')
        }
    }
};
</script>

<style scoped  lang="less">
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}
.veColorPicker {
    position: relative;
    z-index: 50;
    width: 20px;
    height: 20px;
    .colorBlock {
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        display: inline-block;
        width: 20px;
        height: 20px;
    }
    .pickColor {
        background-color: #ffffff;
        position: absolute;
        left: 0;
        top: 25px;
        // width: 100px;
        width: 75px;
        padding-left: 5px;
        padding-top: 5px;
        border: 1px solid #ccc;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        box-sizing: content-box;
        div {
            width: 20px;
            height: 20px;
            cursor: pointer;
            flex-grow: 0;
            background-color: #adadad;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        div:nth-of-type(4n) {
            // margin-right: 0;
        }
    }
}
</style>
