<template>
  <div style="overflow-y: auto">
    <h1>表单校验</h1>
    <div>姓名：{{form.name}}</div>
    <div>船舶类型：{{form.type}}</div>
    <div>创建日期：{{form.date}}</div>
    <div>修改时间：{{form.updateDateTime}}</div>
    <div>案件类型：{{form.caseType}}</div>
    <div>港岙口类型：{{form.portType}}</div>
    <div>IP：{{form.ip}}</div>
    <div>地点：{{form.location}}</div>
    <el-button @click="onSubmit">校验</el-button>
    <CusForm labelWidth="80px" ref="ref_form" @handleEnter="onSubmit">
      <CusFormColumn
          required
          label="姓名:"
          defaultErrorMsg="默认的必填项校验提示文本"
          v-model:param="form.name"/>
      <CusFormColumn
          required
          link="select"
          label="船舶类型："
          v-model:param="form.type"
          :options="$store.state.dictionary.pboatTypeList"/>
      <CusFormColumn
          required
          link="date"
          label="创建日期:"
          v-model:param="form.createDate"/>
      <CusFormColumn
          required
          link="datetime"
          label="修改时间"
          v-model:param="form.updateDateTime"/>
      <CusFormColumn
          required
          link="cascader"
          label="案件类型"
          v-model:param="form.caseType"
          :options="$store.state.dictionary.caseTypeTree"/>
      <CusFormColumn
          :span="18"
          required
          link="checkbox"
          label="港岙口类型"
          v-model:param="form.portType"
          :options="$store.state.dictionary.tempPortTypeList"/>
      <CusFormColumn
          required
          label="IP"
          v-model:param="form.ip"
          :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格式错误'
              }
          ]"/>
      <h2 style="width: 100%">表单内容插槽  #cus="{handleValidate校验方法}  默认input</h2>
      <CusFormColumn
          required
          label="地点"
          v-model:param="form.location">
        <template #cus="{handleValidate}">
          <el-input v-model="form.location" placeholder="表单插槽" @input="handleValidate"></el-input>
        </template>
      </CusFormColumn>
      <CusFormColumn
          ref="ref_tag"
          required
          label="标签"
          v-model:param="form.dynamicTags">
        <template #cus="{handleValidate}">
          <el-tag
              v-for="tag in form.dynamicTags"
              :key="tag"
              class="mx-1"
              closable
              :disable-transitions="false"
              @close="form.dynamicTags.splice(form.dynamicTags.indexOf(tag), 1)"
          >
            {{ tag }}
          </el-tag>
          <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="ml-1 w-20"
              size="small"
              @blur="form.dynamicTags.push(inputValue), inputVisible = false"
          />
          <el-button v-else class="button-new-tag ml-1" size="small" @click="inputVisible = true">
            + New Tag
          </el-button>
        </template>
      </CusFormColumn>
      <CusFormColumn
          required
          label="打分"
          v-model:param="form.rate"
          :rules="[
              {
                type: 'default',
                message: '必须大于2分',
                handle: val => val > 2
              }
          ]">
        <template #cus="{handleValidate}">
          <el-rate
              allow-half
              v-model="form.rate"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              @change="handleValidate"/>
        </template>
      </CusFormColumn>
    </CusForm>
  </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: {
        name: null,
        type: null,
        createDate: null,
        updateDateTime: null,
        caseType: null,
        portType: [],
        ip: null,
        location: null,
        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
        rate: 0
      },
      inputVisible: false,
      inputValue: null,
    })
    const ref_form = ref()
    const onSubmit = () => {
      ref_form.value.submit().then(() => {
        console.log('校验通过')
      }).catch((e: any) => {
        console.log('校验失败')
        console.log(e)
      })
    }
    const initDictionary = () => {
      store.dispatch("dictionary/LOAD_DICT_LIST", "pboat_type");
      store.dispatch("dictionary/LOAD_DICT_LIST", "temp_port_type");
      store.dispatch("dictionary/LOAD_CASE_TYPE");
    }
    const ref_tag = ref()
    watch(() => state.form.dynamicTags, () => {
      ref_tag.value.handleValidate()
    }, {deep: true})
    onMounted(() => {
      initDictionary()
    })
    return {
      ...toRefs(state),
      ref_form,
      onSubmit,
      ref_tag
    }
  },
})
</script>

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