<template>
    <div class="row  go-form-row flex-div" style="height: 35px"
         v-show="inputItem.display == null ? true : inputItem.display">
        <go-label :labelWidth="labelWidth" :item="inputItem" style="line-height: 35px;"></go-label>
        <div style="padding-left: 7px;float: left">
            <ColorPicker :format="format" :alpha="alpha" @on-active-change="onActiveChange" v-model="color"
                         :size="size"/>
        </div>
    </div>
</template>

<script>
    import GoLabel from "./commponents/go-label";
    import formMixin from "../../mixins/formMixins";

    export default {
        name: "go-color-sel",
        mixins: [formMixin],
        data: function () {
            return {
                innerChange: false,
                color: this.value
            };
        },
        props: {
            activeChange: {
                type: Boolean,
                default: false
            },
            format: {
                type: String,
                default: "hex"
            },
            alpha: {
                type: Boolean,
                default: false
            },
            value: {
                type: String,
                default: "#FFF"
            },
            size: {
                type: String,
                default: "small"
            },
            item: {}
        },
        computed: {},
        watch: {
            value(newVal) {
                this.color = newVal;
            },
            color(val) {
                this.$emit("input", val);
                //如果是内部触发的值变化
                if (this.innerChange) {
                    this.innerChange = false;
                } else {
                    this.$emit("on-change", val);
                }
            },
        },
        methods: {
            onActiveChange(val) {
                this.$emit("on-active-change", val);
                if (this.activeChange) {
                    this.$emit("input", val);
                    this.innerChange = true;
                }
            },
        },
        mounted() {
        },
        components: {
            GoLabel
        }
    };
</script>
