<template>
  <div>
    <ui-color-picker
      ref="colorPicker"
      v-model="value"
      format="hex8"></ui-color-picker>

    <ui-button @click="handlerChangeColor">
      Click me Change Color
    </ui-button>
  </div>
</template>

<script>
import { ColorPicker, Button } from "amumu-ui"

export default {
  components: {
    "ui-color-picker": ColorPicker,
    "ui-button": Button,
  },
  data() {
    return {
      value: "rgba(135, 83, 40, .3)",
    }
  },
  methods: {
    random(num) {
      return parseInt(Math.random() * num)
    },
    handlerChangeColor() {
      this.$refs.colorPicker.setColor(`hsla(${
        this.random(360)
      }, ${
        this.random(100)
      }%, ${
        this.random(50)
      }%, ${
        this.random(10) / 10
      })`)
    },
  },
}
</script>
