<template>
  <div style="overflow-y: auto">
    <h1>input</h1>
    <div>
      参数：input1，值：{{form.input1}}
      <CusFormColumn
          label="普通"
          placeholder="输入"
          unit="km/s"
          v-model:param="form.input1"/>
    </div>
    <h2>必填</h2>
    <div>
      <CusFormColumn
          label="必填"
          v-model:param="form.input1"
          required
      />
    </div>
    <h2>长度限制 :minLength="2" :maxLength="7"</h2>
    <div>
      <CusFormColumn label="文本2(长度>=5)" v-model:param="form.input1" :minLength="5"/>
      <CusFormColumn label="文本3(长度<=3)" v-model:param="form.input1" :maxLength="3"/>
      <CusFormColumn label="文本4(长度>=2,<=7)" v-model:param="form.input1" :minLength="2" :maxLength="7"/>
    </div>
    <h2>自定义校验规则 :rules</h2>
    <h2>[{
      handle: (val: any) => 回调方法,
      message: 错误提示,
      type: default  覆盖默认值校验
      }]</h2>
    <h2>required的话默认会有判断是否有值，如果不需要的话1、非必填 2、自定义规则的时候添加type=default，则不自动生成</h2>
    <div>
      <CusFormColumn
          label="ip"
          v-model:param="form.input1"
          :rules="[
              {
                handle: (val) => !val || /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val),
                message: 'ip格式错误'
              }
          ]"
      />
    </div>
    <h2>禁用（原生属性）</h2>
    <div>
      <CusFormColumn v-model:param="form.input1" disabled/>
    </div>
    <h2>文本区域（原生属性）</h2>
    <div>
      <CusFormColumn v-model:param="form.input1" type="textarea"/>
    </div>
    <h2>插槽</h2>
    <div>
      <CusFormColumn v-model:param="form.input1">
        <template #prefix>prefix</template>
      </CusFormColumn>
      <CusFormColumn v-model:param="form.input1">
        <template #suffix>suffix</template>
      </CusFormColumn>
      <CusFormColumn v-model:param="form.input1">
        <template #prepend>prepend</template>
      </CusFormColumn>
      <CusFormColumn v-model:param="form.input1">
        <template #append>append</template>
      </CusFormColumn>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      form: {
        input1: null,
        input2: null,
      }
    })
    return {
      ...toRefs(state)
    }
  },
})
</script>

<style scoped lang="scss">
</style>
