<template>
  <!-- 背景色覆盖整个页面，并且能够正常滚动内容，同时固定内层内容的位置 -->
  <body style="margin: 0; padding: 0; overflow: auto">
    <!-- 背景色层 -->
    <div class="bg-gray-100" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1"></div>
    <!-- 内容层 -->
    <div class="flex justify-center" style="position: relative; margin: 20px auto">
      <!-- 卡片盒子 -->
      <div class="w-full max-w-3xl p-6 bg-white rounded-xl shadow-md">
        <!-- type="card" -->
        <a-tabs v-model:activeKey="activeKey" :tabBarGutter="300" centered>
          <a-tab-pane key="1" tab="注册">
            <div style="max-height: 500px; overflow-y: auto">
              <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout" @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
                <div style="height: 100%">
                  <a-form-item v-if="options.length > 0" label="行政区划">
                    <a-cascader
                      :field-names="{ label: 'label', value: 'value', children: 'children' }"
                      @change="cascaderChange"
                      style="width: 300px"
                      v-if="options.length > 0"
                      v-model:value="value"
                      :options="options"
                      :show-search="{ filter }"
                      placeholder="请输入搜索关键词"
                    />
                  </a-form-item>
                  <a-form-item v-else label="行政区划">
                    <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp数据加载中～～～ -->

                    <div class="flex justify-center items-center" style="width: 200px"><a-spin /></div>
                  </a-form-item>
                </div>
                <!-- 用户根据单位代码去查询 审核状态 -->
                <a-form-item has-feedback label="单位代码" name="code">
                  <a-input v-model:value="formState.code" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="单位名称" name="name">
                  <a-input v-model:value="formState.name" autocomplete="off" />
                </a-form-item>

                <a-form-item has-feedback label="详细地址" name="address">
                  <a-input v-model:value="formState.address" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="联系人姓名" name="contactPersonInfo">
                  <a-input v-model:value="formState.contactPersonInfo.name" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="联系人电话" name="contactPersonInfo">
                  <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" />
                </a-form-item>
                <!--  -->
                <a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" /> </a-form-item
                ><a-form-item has-feedback label="联系人电话" name="contactPersonInfo">
                  <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" />
                </a-form-item>
                <!--  -->
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                  <a-button type="primary" html-type="submit">提交</a-button>
                  <a-button style="margin-left: 10px" @click="resetForm">重置表单</a-button>
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="查询注册结果">
            <div class="flex items-center justify-center flex-col" style="max-height: 500px; overflow-y: auto">
              <a-card v-if="isLogin" class="mb-8" style="width: 300px">
                <div>账户：{{ account }}</div>
                <div>密码：{{ password }}</div>
              </a-card>
              <a-button v-if="isHasAccount" size="large" type="primary" :loading="loading" @click="getCheckStatus"> 查询审核状态 </a-button>
              <a-button v-if="isLogin" size="large" type="primary" @click="toLogin"> 去登录 </a-button>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </body>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

import { message } from 'ant-design-vue'
// import type { CascaderProps } from 'ant-design-vue';
import api from '@/axios/index.ts'
import type { ShowSearchType } from 'ant-design-vue/es/cascader'
import { onMounted, reactive, ref } from 'vue'
onMounted(() => {
  getTree()
})
const filter: ShowSearchType['filter'] = (inputValue, path) => {
  return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
}
const value = ref<string[]>([])
const options = ref<any[]>([])
const cascaderChange = (value: any, selectedOptions: any): void => {
  formState.administrativeDivisionCodes = [...value]
}

const getTree = async () => {
  const res = await api.get<any>('/common/administrativeDivisionTree')
  console.log(res)
  options.value = res.data
}
import type { Rule } from 'ant-design-vue/es/form'
import type { FormInstance } from 'ant-design-vue'

interface FormState {
  name: string
  code: number | string
  administrativeDivisionCodes: any[]

  address: string
  contactPersonInfo: ContactPersonInfo
}
const formRef = ref<FormInstance>()
interface ContactPersonInfo {
  telephone: string
  name: string
}
const formState = reactive<FormState>({
  name: '',
  code: '',
  administrativeDivisionCodes: [],
  // province: '',
  // city: '',
  // districts: '',
  // street: '',
  address: '',
  contactPersonInfo: {
    telephone: '',
    name: '',
  },
})

const checkIsNull = async (_rule: Rule, value: string) => {
  if (value === '') {
    return Promise.reject('请输入')
  } else {
    return Promise.resolve()
  }
}
const checkOBJ = async (_rule: Rule, value: ContactPersonInfo) => {
  console.log('🚀 ~ checkOBJ ~ value:', value)

  if (value.telephone !== '' && value.name !== '') {
    return Promise.resolve()
  } else {
    // return Promise.reject('请填写完整的联系人信息')
    // return Promise.reject('请输入')
  }
}

const rules: Record<string, Rule[]> = {
  name: [{ required: true, validator: checkIsNull, trigger: 'change' }],
  code: [{ required: true, validator: checkIsNull, trigger: 'change' }],
  address: [{ required: true, validator: checkIsNull, trigger: 'change' }],

  contactPersonInfo: [{ required: true, validator: checkOBJ, trigger: 'change' }],
}
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
}

const register = (values: any) => {
  if (value.value.length === 0) {
    message.error('请选择行政区划')
    return
  } else {
    api.post<any>('/common/policeUnitRegister', { ...formState }).then((res) => {
      console.log(res)
      if (res.code === 200) {
        message.success('提交成功')
      }
    })
  }
}

const handleFinish = (values: FormState) => {
  console.log(values, formState)
  register(values)
}
const handleFinishFailed = (errors: any) => {
  console.log(errors)
}
const resetForm = () => {
  formRef.value.resetFields()
}
const handleValidate = (...args: any[]) => {
  console.log(args)
}

const activeKey = ref('1')
const loading = ref<boolean>(false)
const account = ref<string>('')
const password = ref<string>('')
const isHasAccount = ref<boolean>(true)
const isLogin = ref<boolean>(false)

const getCheckStatus = () => {
  loading.value = true
  api.post<any>('/management/getCheckStatus', { onlyCode: 'dawda', unitOptType: 'POLICE_UNIT' }).then((res) => {
    console.log('🚀 ~ api.post<any> ~ res:', res)
    if (res.code === 200) {
      loading.value = false
      isHasAccount.value = false
      isLogin.value = true
      account.value = res.data.account
      password.value = res.data.password
    }
  })
}
const toLogin = () => {
  router.replace({ path: '/login' })
}
</script>
