<template>
  <div>
    <div v-if="isSetting">
      <item-box-setting class-suffix="input">
        <el-form-item label="字段名">
          <el-input v-model="data.fieldId" />
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="data.label" />
        </el-form-item>
        <el-form-item label="提示字符">
          <el-input v-model="data.placeholder" />
        </el-form-item>
        <el-form-item v-if="data.type === 'number'" label="最小值">
          <el-input v-model="data.min" />
        </el-form-item>
        <el-form-item label="最大长度">
          <el-input v-model="data.maxlength" />
        </el-form-item>
        <el-form-item label="是否自动对焦">
          <el-switch
            v-model="data.autofocus"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="作为查询条件">
          <el-switch
            v-model="data.isQuery"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="表格中隐藏">
          <el-switch
            v-model="data.hideInTable"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="导出中隐藏">
          <el-switch
            v-model="data.hideInExport"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="必填">
          <el-switch
            v-model="required"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <!-- <el-form-item v-if="required" label="必填提示">
          <el-input
            v-model="data.rules.required.message"
            placeholder="必填提示文本"
          />
        </el-form-item> -->
        <regx-add v-model="data.rules" />
      </item-box-setting>
    </div>
    <div v-else>
      <el-input
        v-if="model"
        v-model="model[data.fieldId]"
        :type="data.type"
        :placeholder="data.placeholder"
      />
      <el-input
        v-else
        v-model="data.defaultValue"
        :type="data.type"
        :placeholder="data.placeholder"
      />
    </div>
  </div>
</template>

<script>
import { ItemBoxSetting, RegxAdd, checkRequiredMixin } from '@/test-npm'

export default {
  name: 'CustomInput',
  components: { ItemBoxSetting, RegxAdd },
  mixins: [checkRequiredMixin],
  props: {
    isSetting: Boolean,
    data: {
      type: Object,
      required: true
    },
    model: {
      type: [Object, null],
      default: null
    }
  },
  watch: {
    data(v) {
      this.required = v.rules.required ? v.rules.required.required : false
    }
  }
}
</script>
