<!--
 * @jixuanyu: jixuanyu
 * @Date: 2022-05-10 14:24:05
 * @LastEditors: jixuanyu
 * @Description: input 表单属性组件
-->
<template>
  <z-form :label-col="{ style: { width: '80px' } }">
    <z-row>
      <z-col :span="12">
        <z-form-item label="表单渲染">
          <z-switch v-model:checked="formForm.isDraw" checked-value="1" un-checked-value="0" />
        </z-form-item>
      </z-col>
      <z-col :span="12">
        <z-form-item label="个性化">
          <z-switch v-model:checked="formForm.personal" checked-value="1" un-checked-value="0" />
        </z-form-item>
      </z-col>
    </z-row>
    <z-form-item v-show="formForm.personal == '1'" label="表头文本">
      <z-input v-model:value="formForm.headText" />
    </z-form-item>
    <z-form-item label="默认值">
      <z-input v-model:value="formForm.value" />
    </z-form-item>
    <z-form-item label="占位符">
      <z-input v-model:value="formForm.placeHolder" />
    </z-form-item>
    <z-form-item label="行占位">
      <z-select v-model:value="formForm.spanWidth">
        <z-select-option v-for="(item, index) in rowOpt" :key="index" :value="item.value">{{ item.label }}</z-select-option>
      </z-select>
    </z-form-item>
    <z-form-item label="必填">
      <z-switch v-model:checked="formForm.required" checked-value="1" un-checked-value="0" />
    </z-form-item>
    <z-form-item label="禁用">
      <z-switch v-model:checked="formForm.disabled" checked-value="1" un-checked-value="0" />
    </z-form-item>
    <z-form-item label="最大值">
      <z-input v-model:value="formForm.max" />
    </z-form-item>
    <z-form-item label="最小值">
      <z-input v-model:value="formForm.min" />
    </z-form-item>
    <z-form-item label="校验规则">
      <a-checkbox-group v-model:value="checkedList" :options="plainOptions" />
    </z-form-item>
    <z-form-item label="自定义校验">
      <z-textarea v-model:value="formForm.customVaild" />
    </z-form-item>
    <z-form-item label="计步器步长">
      <z-input v-model:value="formForm.step" />
    </z-form-item>
    <z-form-item label="精度">
      <z-input v-model:value="formForm.accuracy" />
    </z-form-item>
  </z-form>
</template>
<script>
import { defineComponent, toRef } from 'vue'
export default defineComponent({
  name: 'InputForm',
  props: {
    formProperty: {
      type: Object,
      default: undefined
    },
    plainOptions: {
      type: Array,
      default: undefined
    }
  },
  setup(props) {
    const formForm = toRef(props, 'formProperty')
    const rowOpt = [{
      label: '1/4',
      value: '1'
    }, {
      label: '1/3',
      value: '2'
    }, {
      label: '1/2',
      value: '3'
    }, {
      label: '1',
      value: '4'
    }]
    return {
      formForm,
      rowOpt
    }
  }
})
</script>
