<template>
    <div>
        <h2>Palettes</h2>

        <SelectO
                name="Scale"
                :list="palettesList"
                :selectedItem="paletteSelected"
                v-model="paletteSelected"
                @change="onChange(paletteSelected)"

        ></SelectO>
        <div>
            <input type="text" v-model="count" size="1"/>
            {{paletteSelected}}
        </div>

        <div v-for="color in palettes" :key="color">
            <div :style="{backgroundColor: color}">
                {{color}}
            </div>

        </div>

    </div>
</template>

<script>

    import SelectO from './SelectO'

    import {getPalette, palettesList} from '../../libs/thpalette'

    export default {
        name: "Palette",
        components: {
            SelectO,
        },
        data() {
            return {
                count: 10,
                palettesList: palettesList,
                paletteSelected: palettesList[0]
            }
        },
        watch:{
            paletteSelected: function (neww){
                console.log(' nn',neww)
//                this.$emit('input', neww)

                this.onChange(neww)
            }
        },
        computed: {
            palettes() {
                return getPalette(this.paletteSelected, this.count)
            }
        },
        methods: {
            onChange(selectedItem) {
                //if (selectedItem === this.paletteSelected) return
                console.log('select onChange', selectedItem)
                this.$emit('input', selectedItem)
            },
        }
    }
</script>

<style scoped>

</style>