<template>
  <div>
    <!-- 企事业单位 -->
    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions" :scroll="{ x }">
      <!-- <template #tableHeader>
        <a-space>
          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
        </a-space>
      </template> -->
    </TableProMax>
    <a-modal v-model:open="visible" :title="title" @ok="submit" @cancel="closeModal">
      <!-- <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions" /> -->
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
// import { storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
import api from '@/axios'
import { ref, reactive } from 'vue'
import TableProMax from '@/components/table/TableProMax.vue'
import { TableProMaxProps } from '@/types/components/table/index.ts'
import { ComponentExposed } from 'vue-component-type-helpers'
import { dictSelectNodes } from '@/config/dict.ts'
import { publicUnitPagerQueryParams, FromItem } from '@/types/views/publicUnit.ts'
// import FormProMax from '@/components/form/FormProMax.vue'
import { FormProMaxItemOptions } from '@/types/components/form//index.ts'
import { FormExpose } from 'ant-design-vue/es/form/Form'
import { message } from 'ant-design-vue'

const formRef = ref<FormExpose>(null)
type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
const reqApi: TableProps['requestApi'] = (params) => api.post('/management/police/enterprisesUnitPager', params) //分页

const columns: TableProps['columns'] = [
  {
    dataIndex: 'name',
    title: '单位名称',
  },
  // {
  //   dataIndex: 'code',
  //   title: '单位代码',
  // },
  {
    dataIndex: 'provinceName',
    title: '行政区划',
    customRender: ({ record }) => {
      return `${record?.provinceName}/${record?.cityName}/${record?.districtsName}/${record?.streetName}`
    },
  },

  // {
  //   dataIndex: 'isEnable',
  //   title: '是否启用',
  //   customRender: ({ text }) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
  //   width: 150,
  // },
  // {
  //   dataIndex: 'checkStatus',
  //   title: '是否审核',
  //   customRender: ({ record }) => {
  //     return record.checkStatus?.extData?.color === 'success' ? <a-tag color='green'>{record?.checkStatus?.label}</a-tag> : <a-tag color='#f50'>{record?.checkStatus?.label}</a-tag>
  //   },
  // },
  {
    dataIndex: 'address',
    title: '详细地址',
  },

  {
    dataIndex: 'contactPersonInfo',
    title: '联系人姓名',
    customRender: ({ record }) => {
      return record?.contactPersonInfo?.name
    },
  },
  {
    dataIndex: 'contactPersonInfo',
    title: '联系人手机号',
    customRender: ({ record }) => {
      return record?.contactPersonInfo?.telephone
    },
  },
  {
    dataIndex: 'createTime',
    title: '创建时间',
  },
  {
    dataIndex: 'remark',
    title: '备注',
  },
]
const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
const visible = ref(false)
const title = ref('新增用户')
const addUserManagement = () => {
  visible.value = true
  title.value = ''
}

// const getTree = async () => {
//   // 先尝试从缓存中加载数据
//   const cachedData = await loadTreeFromCache()
//   if (cachedData) {
//     console.log('未发请求')
//     // 如果缓存存在，直接使用缓存数据
//     return cachedData
//   } else {
//     console.log('发起了请求')
//     // 如果缓存不存在，发起 API 请求
//     const res = await api.get<any>('/common/administrativeDivisionTree')
//     await storeTreeData(res.data)
//     return res.data
//   }
// }
// const loadOptions = async () => {
//   const treeData = await getTree()
//   searchFormOptions.treeSelect.options = treeData
// }
// loadOptions()
const searchFormOptions = reactive<TableProps['searchFormOptions']>({
  name: {
    type: 'input',
    label: '名称',
  },
  treeSelect: {
    // type: 'cascader',
    type: 'administrativeDivisionTree',
    label: '行政区划',
  },
  telephone: {
    type: 'input',
    label: '手机号',
  },
  // isEnable: {
  //   type: 'select',
  //   label: '是否启用',
  //   options: [
  //     {
  //       value: null,
  //       label: '全部',
  //     },
  //     ...dictSelectNodes('IsEnable'),
  //   ],
  // },
})

const formParams = ref<{
  snowFlakeId?: string
  name: string
  sex: number
  telephone: string
  isEnable: any
  remark?: string
}>({
  name: '',
  sex: 0,
  telephone: '',
  isEnable: 0,
})

const submit = async () => {
  // await formRef.value.validate()
}
const closeModal = () => {
  visible.value = false
}
const formItemOptions = ref<FormProMaxItemOptions<FromItem>>({
  name: {
    type: 'input',
    label: '姓名',
    required: true,
  },
  sex: {
    type: 'radioGroup',
    label: '性别',
    options: dictSelectNodes('Sex'),
    required: true,
  },
  telephone: {
    type: 'input',
    label: '手机号',
    required: true,
  },
  isEnable: {
    type: 'radioGroup',
    label: '启用状态',
    options: dictSelectNodes('IsEnable'),
    required: true,
  },
  remark: {
    type: 'inputTextArea',
    label: '备注',
  },
})
</script>