<template>
  <div>
    <a-form-item label="提示内容">
      <a-input
        v-model="value.placeholder"
        size="small"
        placeholder="请设置提示内容"
      />
    </a-form-item>

    <a-form-item label="文字颜色">
      <a-input
        v-model="value.color"
        size="small"
        placeholder="请选择颜色，例如 #1890ff"
      >
        <a-popover slot="suffix">
          <template slot="content">
            <a-color-picker
              :value="value.color"
              @change="onColorChange"
              show-text
            />
          </template>
          <a-icon type="bg-colors" style="cursor: pointer;" />
        </a-popover>
      </a-input>
    </a-form-item>
  </div>
</template>

<script>
export default {
  name: 'DescriptionConfig',
  props: {
    value: {
      type: Object,
      default: () => ({
        placeholder: '',
        color: '',
      }),
    },
  },
  methods: {
    onColorChange(color) {
      this.value.color = color; // AntDV 1.7.8 color 直接为 hex 字符串
    },
  },
};
</script>