<template>
  <div class="base-prop">
    <FormItem label="标题">
      <Input v-model="info.title.content" placeholder="请输入标题"></Input>
    </FormItem>
    <FormItem label="字段名" v-show="useSelectedField">
      <Select
          filterable
          v-model="info.name"
          placeholder="请选择字段名">
        <Option v-for="fieldInfo in fieldList" :value="fieldInfo.fieldName" :key="fieldInfo.fieldName">{{fieldInfo.label}}</Option>
      </Select>
    </FormItem>

    <!-- 标题icon -->
    <FormItem label="标题icon" v-if="!isLayoutComponent">
      <i-switch v-model="info.title.icon.show" />
    </FormItem>
    <div v-if="!isLayoutComponent&&info.title.icon.show" class="bg-grey">
      <FormItem label="icon位置">
        <RadioGroup
          v-model="info.title.icon.iconPosition"
          type="button"
          button-style="solid">
          <Radio label="left">左侧</Radio>
          <Radio label="right">右侧</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="icon类型">
        <RadioGroup
          v-model="info.title.icon.icontype"
          type="button"
          button-style="solid">
          <Radio label="iview">iview</Radio>
          <Radio label="icon">icon</Radio>
          <Radio label="img">img</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="icon名字">
        <Input v-model="info.title.icon.iconName"></Input>
      </FormItem>
      <FormItem label="提示内容">
        <Input v-model="info.title.icon.tips"></Input>
      </FormItem>
    </div>
    <FormItem label="表单栅格">
      <Slider
        v-model="info.layout"
        :min="1"
        :max="24"
        :marks="{12:''}">
      </Slider>
    </FormItem>
    <FormItem
      label="默认值"
      v-show="!isLayoutComponent"
      v-if="!noDefault.includes(info.form.type)">
      <Input v-model="info.defaultValue" placeholder="请输入默认值" :disabled="disabled"></Input>
    </FormItem>
    <!-- <FormItem label="隐藏标签">
      <i-switch v-model="info.title.hide" />
    </FormItem> -->
    <!-- <FormItem v-show="!isLayoutComponent" label="是否禁用">
      <i-switch v-model="info.form.disabled" />
    </FormItem> -->
    <FormItem v-show="!isLayoutComponent" label="是否必填">
      <i-switch v-model="info.required" @on-change="changeRequired" />
    </FormItem>
  </div>
</template>
<script>
import  { formItemMixins } from '../../../mixins'
export default {
  name: 'BaseProp',
  mixins: [ formItemMixins ],
  props: {
    info: Object,
    fieldList: {
      type: Array,
      default: () => [],
    },
    useSelectedField: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //独有默认值处理  在组件中独立处理
      noDefault: ['Slider', 'Select', 'Checkbox', 'TimePicker', 'DatePicker', 'Cascader', 'SelectRemote'],
    }
  },
  computed: {
    isLayoutComponent() {
      return this.layoutItems.some(v => v.type === this.info.form.type)
    },
    disabled() {
      return !this.info.isNew
    },
  },
  methods: {
    changeRequired() {
      if (this.info.required) {
        this.info.validateRules.push({
          pattern: '/[\\S]+/',
          message: '请输入必填项',
          trigger: ['change'],
          type: 'required',
          rulesType: ['required' ], //用于回显
          id: new Date().getTime(),
          isShow: false, //是否展示 正则与触发规则
        })
      } else {
        const index = this.info.validateRules.findIndex(v => v.type === 'required')
        this.info.validateRules.splice(index >>> 0, 1)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.base-prop{
 ::v-deep  .ivu-form-item {
    margin-bottom: 16px;
  }
  .bg-grey{
    background: #f8f8f8;
    padding: 10px;
    border-radius:4px;
  }
}
</style>