<!--
 * @author: wyf
 * @Date: 2022-05-27
 * @LastEditors: wyf
 * @Description: 表单模板页面
-->
<template>
  <div class="form-preview">
    <z-form ref="ruleForm" :model="formModel" :rules="ruleList" autocomplete="off">
      <z-row wrap>
        <template v-for="item in formList">
          <z-col v-if="item.formProperty.isDraw === '1'" :key="item.basicProperty.currentKey" :span="getColWidth(item.formProperty.spanWidth)">
            <component :is="formRender(item)" :form-model="formModel" :basic-property="item.basicProperty" :form-property="item.formProperty" />
          </z-col>
        </template>
      </z-row>
      <z-form-item :label-col="{ style: { width: '120px',paddingRight: '6px' } }" label=" ">
        <z-button type="primary" html-type="submit">提交</z-button>
        <z-button style="margin-left: 10px" @click="resetForm">重置</z-button>
      </z-form-item>
    </z-form>
  </div>
</template>
<script>
import { defineComponent, computed, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import InputItem from '@/components/customForm/input/index'
import Textarea from '@/components/customForm/textarea/index'
import InputNumber from '@/components/customForm/input-number/index'
import SelectItem from '@/components/customForm/select/index'
import SwitchItem from '@/components/customForm/switch/index'
import RateItem from '@/components/customForm/rate/index'
import RadioItem from '@/components/customForm/radio/index'
import CheckboxItem from '@/components/customForm/checkbox/index'
import DateItem from '@/components/customForm/date/index'
import TimeItem from '@/components/customForm/time/index'
import DateTimeItem from '@/components/customForm/dateTime/index'

export default defineComponent({
  name: 'FormPreview',
  components: {
    InputItem,
    Textarea,
    InputNumber,
    SelectItem,
    SwitchItem,
    RateItem,
    RadioItem,
    CheckboxItem,
    DateItem,
    TimeItem,
    DateTimeItem
  },
  setup() {
    const store = useStore()

    const formList = computed(() => store.getters.formData)
    console.log(formList, 'formListformList')

    const getRuleList = () => {
      const lists = {}
      formList.value.forEach(list => {
        const rules = [{
          required: list.formProperty.required === '1',
          message: list.formProperty.placeholder
        }]
        if (list.formProperty.max && list.formProperty.max > 0) {
          rules.push({
            max: list.formProperty.max,
            message: '长度不可大于' + list.formProperty.max
          })
        }
        if (list.formProperty.min && list.formProperty.min > 0) {
          rules.push({
            min: list.formProperty.min,
            message: '长度不可小于' + list.formProperty.min
          })
        }
        if (list.formProperty.vaildRule && list.formProperty.vaildRule.length > 0) {
          list.formProperty.vaildRule.forEach(rule => {
            rules.push({
              validator: rule.regValue,
              message: rule.regTips
            })
          })
        }

        if (list.formProperty.customVaild && list.formProperty.customVaild.length > 0) {
          rules.push({
            validator: eval(list.formProperty.customVaild)
          })
        }

        Object.assign(lists, {
          [list.basicProperty.field]: rules
        })
      })
      return lists
    }

    const ruleForm = ref(null)

    const resetForm = () => {
      ruleForm.value.resetFields()
    }

    const ruleList = getRuleList()

    const getFormModel = () => {
      const model = {}
      formList.value.forEach(list => {
        Object.assign(model, {
          [list.basicProperty.field]: list.formProperty.value || ''
        })
      })
      return model
    }

    const formModel = reactive(getFormModel())

    const getColWidth = (span) => {
      let spanWidth = ''
      switch (span) {
        case '1':
          spanWidth = '6'
          break
        case '2':
          spanWidth = '8'
          break
        case '3':
          spanWidth = '12'
          break
        case '4':
          spanWidth = '24'
          break
        default:
          spanWidth = '24'
          break
      }
      return spanWidth
    }

    const formRender = (element) => {
      let componentId = 'InputItem'
      switch (element.basicProperty.type) {
        case 'input':
          componentId = 'InputItem'
          break
        case 'number':
          componentId = 'InputNumber'
          break
        case 'textarea':
          componentId = 'Textarea'
          break
        case 'select':
          componentId = 'SelectItem'
          break
        case 'switch':
          componentId = 'SwitchItem'
          break
        case 'rate':
          componentId = 'RateItem'
          break
        case 'radio':
          componentId = 'RadioItem'
          break
        case 'checkbox':
          componentId = 'CheckboxItem'
          break
        case 'date':
          componentId = 'dateItem'
          break
        case 'time':
          componentId = 'timeItem'
          break
        case 'datetime':
          componentId = 'DateTimeItem'
          break
      }
      return componentId
    }

    return {
      ruleForm,
      resetForm,
      formList,
      formModel,
      ruleList,
      getColWidth,
      formRender
    }
  }
})
</script>
