<template>
  <div class="input-props">
    <FormItem label="占位提示">
      <Input v-model="info.form.placeholder" placeholder="请输入占位提示"></Input>
    </FormItem>
    <!-- Text 或 Password -->
    <FormItem label="前置内容" v-if="inputType">
      <Input v-model="info.form.prepend" placeholder="请输入前置内容"></Input>
    </FormItem>
    <FormItem label="后置内容" v-if="inputType">
      <Input v-model="info.form.append" placeholder="请输入后置内容"></Input>
    </FormItem>
    <FormItem label="前缀图标" v-if="inputType">
      <Input v-model="info.form.prefix" placeholder="请输入前缀图标">
        <Button slot="append" icon="ios-link" @click="$emit('selectIncon', 'prefix')">选择</Button>
      </Input>
    </FormItem>
    <FormItem label="后缀图标" v-if="inputType">
      <Input v-model="info.form.suffix" placeholder="请输入后缀图标">
        <Button slot="append" icon="ios-link" @click="$emit('selectIncon', 'suffix')">选择</Button>
      </Input>
    </FormItem>
    <!-- Textarea -->
    <!-- <FormItem label="最小行数" v-if="textAreaType">
      <InputNumber v-model="info.form.min" :min="0" controls-outside></InputNumber>
    </FormItem>
    <FormItem label="最大行数" v-if="textAreaType">
      <InputNumber v-model="info.form.max" :min="0" controls-outside></InputNumber>
    </FormItem> -->
    <FormItem label="最大输入长度" v-if="textAreaType">
      <Input v-model="info.form.maxlength"></Input>
    </FormItem>
    <FormItem label="输入统计" v-if="textAreaType">
      <i-switch v-model="info.form.showWordLimit" />
    </FormItem>
    <!-- <FormItem label="是否只读">
      <i-switch v-model="info.form.readonly" />
    </FormItem> -->
    <FormItem label="是否清空">
      <i-switch v-model="info.form.clearable" />
    </FormItem>
  </div>
</template>

<script>
export default {
  name: 'InputProp',
  props: {
    info: {
      type: Object,
      default() {
        return {
          form: {
            options: [],
          },
        }
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    inputType() {
      return this.info.form.type === 'Input' || this.info.form.type === 'Password'
    },
    textAreaType() {
      return this.info.form.type === 'Textarea'
    },
  },
}
</script>

