<template>
  <TableProMax
      ref="tableRef"
      :request-api="reqApi"
      :columns="columns"
      :searchFormOptions="searchFormOptions"
  >
  </TableProMax>
</template>

<script setup lang="tsx">
import TableProMax from "@/components/table/TableProMax.vue";
import {ref} from "vue";
import {ComponentExposed} from "vue-component-type-helpers";
import {TableProMaxProps} from "@/types/components/table";
import {
  PoliceUnitPagerQueryParams,
  PoliceUnitPagerVo
} from "@/types/views/unitManage/police/policeUnit.ts";
import api from "@/axios";
import {dictSelectNodes} from "@/config/dict.ts";
import {message} from "ant-design-vue";
import {UNIT_TYPE} from "@/config";
import {showEnterprisesUnit} from "@/views/unitManage/police/unitManage/index.tsx";

type TableProps = TableProMaxProps<PoliceUnitPagerVo, PoliceUnitPagerQueryParams>

const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
const reqApi: TableProps['requestApi'] = (params) => api.post('/management/super/policeUnit/pager', params)
const columns: TableProps['columns'] = [
  {
    dataIndex: 'name',
    title: '名称'
  }, {
    dataIndex: 'code',
    title: '代码'
  }, {
    dataIndex: 'contactPersonInfo',
    title: '联系人',
    customRender({record}) {
      return record.contactPersonInfo?.name + "/" + record.contactPersonInfo?.telephone
    },
  }, {
    dataIndex: 'provinceName',
    title: '行政区划',
    customRender: ({record}) => [record.provinceName, record.cityName, record.districtsName, record.streetName].filter(Boolean).join('/')
  }, {
    dataIndex: 'isEnable',
    title: '是否启用',
    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
  }, {
    dataIndex: 'checkStatus',
    title: '审核状态',
    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
  }, {
    dataIndex: 'createTime',
    title: '创建时间'
  }, {
    dataIndex: 'opt',
    title: '操作',
    customRender({record}) {
      if (record.checkStatus.value === 1) {
        return <a-space>
          <a-popconfirm
              title="确认审核通过嘛?"
              onConfirm={async () => {
                const resp = await api.post('/management/checkPass', {
                  checkDataId: record.snowFlakeId,
                  unitOptType: UNIT_TYPE.police
                })
                message.success(resp.message)
                await tableRef.value?.requestGetTableData()
              }}>
            <a-button type="primary">审核通过
            </a-button>
          </a-popconfirm>
        </a-space>
      }
      return <a-space>
        <a-button
            class="btn-success"
            onClick={() => showEnterprisesUnit(record)}
        >企事业单位
        </a-button>
        <a-button
            class={record.isEnable.value === 0 ? 'btn-danger' : 'btn-success'}
            onClick={async () => {
              const resp = await api.post('/management/disableOrEnable', {
                dataId: record.snowFlakeId,
                unitOptType: UNIT_TYPE.police
              })
              message.success(resp.message)
              await tableRef.value?.requestGetTableData()
            }}
        >{record.isEnable.value === 0 ? '禁用' : '启用'}</a-button>
      </a-space>
    },
  }
]
const searchFormOptions = ref<TableProps["searchFormOptions"]>({
  name: {
    type: 'input',
    label: '名称'
  }, code: {
    type: 'input',
    label: '代码'
  }, administrativeDivisionCodes: {
    type: 'administrativeDivisionTree',
    label: '行政区划',
  }, isEnable: {
    type: 'select',
    label: '是否启用',
    options: [
      {
        value: null,
        label: '全部'
      }, ...dictSelectNodes('IsEnable')
    ]
  }, checkStatus: {
    type: 'select',
    label: '审核状态',
    options: [
      {
        value: null,
        label: '全部'
      }, ...dictSelectNodes('CheckStatus')
    ]
  }
})

</script>

<style scoped lang="scss">

</style>
