<!-- wyf 2022-5-12 -->
<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 v-if="formForm.isDraw == '1'" :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>
    <template v-if="formForm.isDraw == '1'">
      <z-form-item v-if="formForm.personal == '1'" label="表头文本">
        <z-input v-model:value="formForm.headText" />
      </z-form-item>
      <z-form-item label="默认值">
        <z-switch v-model:checked="formForm.value" />
      </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="校验规则">
        <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>
    </template>
  </z-form>
</template>
<script>
import { defineComponent, toRef } from 'vue'
export default defineComponent({
  name: 'SwitchForm',
  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>
