<template>
  <div :class="customClass" class="ed-input-color">
    <el-input v-model="colorValue" :clearable="clearable" :disabled="disabled"
              :placeholder="placeholder" :prefix-icon="prefixIcon" :readonly="readonly" :size="size"
              :suffix-icon="suffixIcon">
      <template slot="append">
        <el-color-picker v-model="colorValue"
                         :color-format="colorFormat"
                         :disabled="disabled"
                         :popper-class="popperClass"
                         :predefine="predefine"
                         :show-alpha="showAlpha"
                         :size="size"
                         @activeChange="activeChange"
                         @change="handleChange"></el-color-picker>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "EdInputColor",
  props: {
    // 值
    value: {type: String},
    // 自定义class 类名
    customClass: {type: String},
    // 输入框头部图标
    prefixIcon: {type: String},
    // 输入框尾部图标
    suffixIcon: {type: String},
    // 输入框占位文本
    placeholder: {type: String},
    // 是否禁用
    disabled: {type: Boolean, default: false},
    // 输入框尺寸
    size: {type: String, default: 'small'},
    // 	原生属性，是否只读
    readonly: {type: Boolean, default: false},
    // 是否可清空
    clearable: {type: Boolean, default: false},
    // ColorPicker 下拉框的类名
    popperClass: {type: String},
    // 预定义颜色
    predefine: {type: Array},
    // 写入 v-model 的颜色的格式 hsl / hsv / hex / rgb
    colorFormat: {type: String, default: 'hex'},
    // 是否支持透明度选择
    showAlpha: {type: Boolean, default: false},
  },
  data() {
    return {
      colorValue: this.value
    }
  },
  methods: {
    handleChange(e) {
      this.$emit("input", e)
      this.$emit("change", e)
    },

    activeChange(e) {
      this.$emit("activeChange", e)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/index";

.ed-input-color {
  ::v-deep {
    .el-color-picker {
      display: block;
    }
  }
}

</style>
