<template>
  <div id="colorPickerCombobox" style="padding: 4px 0;">
    <div style="display: flex; width: 100%;">
      <a-input
        :value="colorValue"
        :read-only="readOnly"
        style="flex: 1; min-width: 0;"
        placeholder="请选择颜色"
      />
      <a-button
        style="flex-shrink: 0; margin-left: 0.2rem;"
        @click="visible = true"
      >
        选择颜色
      </a-button>
    </div>
    <a-modal
      v-model="visible"
      title="颜色选择"
      @ok="onSelect"
      :zIndex="1002"
      :destroyOnClose="true"
      width="40%"
    >
      <chrome-picker
        :value="tempColor"
        :disable-alpha="true"
        @input="onColorChange"
      />
      <div style="margin-top: 16px; text-align: center;">
        <span>当前颜色: <span :style="{ color: tempColor }">{{ tempColor }}</span></span>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Chrome } from 'vue-color'

export default {
  name: 'ColorPickerCombobox',
  components: {
    'chrome-picker': Chrome
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      colorValue: this.value,
      tempColor: this.value
    }
  },
  watch: {
    value (val) {
      this.colorValue = val
      this.tempColor = val
    }
  },
  methods: {
    onColorChange (color) {
      // color.hex 是 #RRGGBB 格式
      this.tempColor = color.hex
    },
    onSelect () {
      this.colorValue = this.tempColor
      this.visible = false
      this.$emit('onSelect', this.colorValue)
    },
    setColor (val) {
      this.colorValue = val
      this.tempColor = val
    }
  }
}
</script>

<style lang="less" scoped>
#colorPickerCombobox {
  .ant-input {
    background: #fff;
  }
}
.vc-chrome {
  width: 100% !important;
  box-sizing: border-box;
}
::v-deep .vc-chrome {
  width: 100% !important;
}
</style>
