<template>
  <div class="inputnumber-prop">
    <FormItem label="标题字号">
      <Input v-model="info.form.fontSize" placeholder="请输入标题字号" clearable />
    </FormItem>
    <FormItem label="标题颜色">
      <ColorPicker recommend v-model="info.form.color" />
    </FormItem>
    <FormItem label="背景颜色">
      <ColorPicker recommend v-model="info.form.backgroundColor" />
    </FormItem>
    <FormItem label="标题文字">
      <Input v-model="info.form.text" placeholder="请输入按钮文字" clearable />
    </FormItem>
  </div>
</template>

<script>
const DEFAULT_LIST = [
  { key: 'text', default: '主要标题' },
  { key: 'fontSize', default: '16' },
  { key: 'color', default: '' },
  { key: 'backgroundColor', default: '' },
]

export default {
  name: 'TitleProp',
  props: {
    info: {
      type: Object,
      default() {
        return {
          form: {
            options: [],
          },
        }
      },
    },
  },
  watch: {
    'info.name': {
      handler() {
        const { form } = this.info
        if (Object.keys(form).length !== 1) { return }
        for (const val of DEFAULT_LIST) {
          if (!form[val.key] && form[val.key] !== 0) {
            this.$set(form, val.key, val.default)
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>