<!-- wyf 2022-5-17 -->
<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-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-select v-model:value="formForm.targetType" @change="typeChange">
          <z-select-option v-for="(item, index) in dateType" :key="index" :value="item.value">{{ item.label }}</z-select-option>
        </z-select>
      </z-form-item>
      <z-form-item label="时间格式">
        <z-select v-model:value="formForm.typeFormat" @change="typeFormat">
          <z-select-option v-for="(item, index) in dateFormat" :key="index" :value="item.value">{{ item.label }}</z-select-option>
        </z-select>
      </z-form-item>
      <z-form-item label="最大值">
        <z-time-picker
          v-model:value="formForm.max"
          :value-format="formForm?.typeFormat"
          :format="formForm?.typeFormat"
        />
      </z-form-item>
      <z-form-item label="最小值">
        <z-time-picker
          v-model:value="formForm.min"
          :value-format="formForm?.typeFormat"
          :format="formForm?.typeFormat"
          :max="formForm?.max"
        />
      </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, ref } from 'vue'

export default defineComponent({
  name: 'TimeForm',
  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 dateType = [
      {
        label: '时:分:秒',
        value: '1'
      },
      {
        label: '时:分',
        value: '2'
      },
      {
        label: '时',
        value: '3'
      }
    ]
    const dateFormat = ref([])
    const typeChange = (e) => {
      formForm.value.typeFormat = ''
      formForm.value.max = ''
      formForm.value.min = ''
      formForm.value.value = ''
      switch (e) {
        case '1':
          dateFormat.value = [
            {
              label: 'HH:mm:ss',
              value: 'HH:mm:ss'
            },
            {
              label: 'H:m:s',
              value: 'H:m:s'
            }
          ]
          break
        case '2':
          dateFormat.value = [
            {
              label: 'HH:mm',
              value: 'HH:mm'
            },
            {
              label: 'H:m',
              value: 'H:m'
            }
          ]
          break
        case '3':
          dateFormat.value = [
            {
              label: 'HH',
              value: 'HH'
            },
            {
              label: 'H',
              value: 'H'
            }
          ]
          break
      }
    }
    const typeFormat = (e) => {
      formForm.value.max = ''
      formForm.value.min = ''
      formForm.value.value = ''
    }
    return {
      formForm,
      rowOpt,
      dateType,
      typeChange,
      dateFormat,
      typeFormat
    }
  }
})
</script>
