<template>
  <div>
    <!-- 小程序用户 -->
    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions"
                 :scroll="{ x }">
    </TableProMax>
  </div>
</template>

<script setup lang="tsx">
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 {FormExpose} from 'ant-design-vue/es/form/Form'

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

const columns: TableProps['columns'] = [
  {
    dataIndex: 'name',
    title: '用户名',
  },

  {
    dataIndex: 'isEnable',
    title: '是否启用',
    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,

  },
  {
    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: 'identity',
    title: '身份',
    customRender: ({record}) => {
      return record?.identity?.label
    },
  },
  {
    dataIndex: 'telephone',
    title: '手机号',
  },

  {
    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/passMiniProgramUser', {
                  dataId: record.snowFlakeId,
                  unitOptType: 'POLICE_UNIT'
                })
                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.police
              })
              message.success(resp.message)
              await tableRef.value?.requestGetTableData()
            }}
        >{record.isEnable.value === 0 ? '禁用' : '启用'}</a-button>
      </a-space>
    },
  }

]
const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
const searchFormOptions = reactive<TableProps['searchFormOptions']>({
  name: {
    type: 'input',
    label: '用户名',
  },

  telephone: {
    type: 'input',
    label: '手机号',
  },
  isEnable: {
    type: 'select',
    label: '是否启用',
    options: [
      {
        value: null,
        label: '全部',
      },
      ...dictSelectNodes('IsEnable'),
    ],
  },
  CheckStatus: {
    type: 'select',
    label: '是否审核',
    options: [
      {
        value: null,
        label: '全部',
      },
      ...dictSelectNodes('CheckStatus'),
    ],
  },
  // MiniProgramUserIdentity: {
  //   type: 'select',
  //   label: '身份选择',
  //   options: [
  //     {
  //       value: null,
  //       label: '全部',
  //     },
  //     ...dictSelectNodes('MiniProgramUserIdentity'),
  //   ],
  // },
})

</script>
