<template>
  <a-row type="flex">
    <a-col flex="auto">
      <a-input v-model="vColor" @blur="handleChange"/>
    </a-col>
    <a-col flex="25px">
      <colorPicker v-model="vColor" class="colour" @change="headleChangeColor"/>
    </a-col>
  </a-row>
</template>

<script>
import Vue from "vue";
import Antd from "ant-design-vue";
import vcolorpicker from 'vcolorpicker'

Vue.use(vcolorpicker)
Vue.use(Antd)
export default {
  name: "AColorPicker",
  props: ['color'],
  data() {
    return {
      //   vColor: this.props.color
      vColor: '',
    }
  },
  created() {
      if(!this.color){
          return true;   
      }else{
        this.vColor=this.color  
      }
  },

  methods: {
    //  判断颜色
    handleChange() {
      
      console.log(this.vColor)
      if (!this.vColor) {
         this.$emit('fromChild', this.vColor)
         return true
      }
      let FloatRegex = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
      if (!FloatRegex.test(this.vColor)) {
        this.$message.error('请输入正确的十六进制颜色');
        return false;
      }
      this.$emit('fromChild', this.vColor)
    //   vColor=this.vColor
    },
    headleChangeColor(){
      
      console.log(this.vColor)
      this.$emit('fromChild', this.vColor)
     
    }
  }
}
</script>

<style scoped>
.colour {
  width: 32px;
  height: 32px;
  margin-top: 3px;
}
</style>