<!-- wyf 2022-5-11 -->
<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-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-button type="primary" @click="addOptions">
        <template #icon>
          <plus-outlined />
        </template>
        添加选项
      </z-button>
    </z-form-item>
    <options-item v-if="formForm.addOption.length > 0" :form-property="formForm" />
    <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>
  </z-form>
</template>
<script>
import { defineComponent, toRef } from 'vue'
import OptionsItem from '@/components/customForm/options/optionsItem'
export default defineComponent({
  name: 'RadioForm',
  components: { OptionsItem },
  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'
      }
    ]
    const deleteOptions = (index) => {
      formForm.value.addOption.splice(index, 1)
    }
    const addOptions = () => {
      const length = formForm.value.addOption.length + 1
      formForm.value.addOption.push({
        value: length.toString(),
        label: `选项${length}`
      })
    }
    return {
      formForm,
      rowOpt,
      deleteOptions,
      addOptions
    }
  }
})
</script>
