<template>
  <div class="inputnumber-prop">
    <FormItem label="按钮图标">
      <Input v-model="info.form.icon" placeholder="请输入按钮图标" clearable>
        <Button slot="append" icon="ios-link" @click="$emit('selectIncon', 'icon')">选择</Button>
      </Input>
    </FormItem>
    <FormItem label="按钮类型">
      <Select v-model="info.form.formType" clearable>
        <Option value="default">default</Option>
        <Option value="primary">primary</Option>
        <Option value="dashed">dashed</Option>
        <Option value="text">text</Option>
        <Option value="info">info</Option>
        <Option value="success">success</Option>
        <Option value="warning">warning</Option>
        <Option value="error">error</Option>
      </Select>
    </FormItem>
    <FormItem label="按钮文字">
      <Input v-model="info.form.text" placeholder="请输入按钮文字" clearable />
    </FormItem>
  </div>
</template>

<script>
const DEFAULT_LIST = [
  { key: 'type', default: 'default' },
  { key: 'text', default: '主要按钮' },
]

export default {
  name: 'ButtonProp',
  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>