<template>
  <TableProMax
      ref="tableRef"
      :request-api="reqApi"
      :columns="columns"
      :searchFormOptions="searchFormOptions"
      :scroll="{x}"
  >

  </TableProMax>
</template>

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


type TableProps = TableProMaxProps<SecurityUnitPagerVo, SecurityUnitPagerQueryParams>

const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
const reqApi: TableProps['requestApi'] = (params) => api.post('/management/super/securityUnit/pager', params)
const columns: TableProps['columns'] = [
  {
    dataIndex: 'name',
    title: '名称',
    width: 200,
    ellipsis: true
  }, {
    dataIndex: 'socialCode',
    title: '社会编码',
    width: 200,
    ellipsis: true
  }, {
    dataIndex: 'businessLicense',
    title: '营业执照',
    width: 150,
    customRender({text}) {
      return <a-image width={100} height={100} src={__APP_ENV.VITE_APP_MINIO_URL + text}></a-image>
    },
  }, {
    dataIndex: 'legalPersonInfo',
    title: '法人信息',
    width: 200,
    customRender({record}) {
      return record.legalPersonInfo?.name + "/" + record.legalPersonInfo?.telephone
    },
  }, {
    dataIndex: 'provinceName',
    title: '行政区划',
    customRender: ({record}) => [record.provinceName, record.cityName, record.districtsName, record.streetName].filter(Boolean).join('/'),
    width: 200,
    ellipsis: true
  }, {
    dataIndex: 'nature',
    title: '性质',
    width: 200
  }, {
    dataIndex: 'isEnable',
    title: '是否启用',
    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
    width: 150
  }, {
    dataIndex: 'checkStatus',
    title: '审核状态',
    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
    width: 150
  }, {
    dataIndex: 'createTime',
    title: '创建时间',
    width: 150,
    ellipsis: true,
  }, {
    dataIndex: 'opt',
    title: '操作',
    fixed: "right",
    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.security
                })
                message.success(resp.message)
                await tableRef.value?.requestGetTableData()
              }}>
            <a-button type="primary">审核通过
            </a-button>
          </a-popconfirm>
        </a-space>
      }
      return <a-space>
        <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.security
              })
              message.success(resp.message)
              await tableRef.value?.requestGetTableData()
            }}
        >{record.isEnable.value === 0 ? '禁用' : '启用'}</a-button>
      </a-space>
    },
    width: 200
  }
]
const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
const searchFormOptions: TableProps["searchFormOptions"] = {
  name: {
    type: 'input',
    label: '名称'
  }, socialCode: {
    type: 'input',
    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>
