<template>
  <div class="colorPicker">
    <color-picker v-model="colors" @change="onChange"></color-picker>
    <div class="colorPicker-box" :style="{ background: color }"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { ColorPicker } from '../../tunas'

export default Vue.extend({
  components: {
    ColorPicker
  },

  data () {
    return {
      color: '#ff0000',
      colors: '#ff0000'
    }
  },

  methods: {
    onChange (v) {
      console.log(v.hex)
      this.color = v.hex
    }
  },

  mounted () {
    // setTimeout(() => {
    //   this.colors = '#00ff00'
    // }, 3000)
  }
})
</script>

<style lang="stylus" scoped>
.colorPicker
  &-box
    margin 20px
    width 30px
    height 30px
</style>
