import {
  fetchRoleListByMenu,
  fetchRoleListByRoleId,
  UnLinkRoleAccountItem
} from '@/services/permission'
import { DeleteOutlined } from '@ant-design/icons'
import { PageContainer } from '@ant-design/pro-layout'
import { message, Popconfirm, Table, Tabs } from 'antd'
import type { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { useRequest } from 'umi'
import ConnectModal from './components/ConnectModal'
import RoleLeftMenu from './components/RoleLeftMenu'
import SetPermission from './components/SetPermission'

const Role = () => {
  const [state, setState] = useState({
    ID: '',
    roleStaff: [],
    activeKey: ''
  })
  const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
  const onSelect = (ID: string) => {
    setState({ ...state, ID })
  }
  const { TabPane } = Tabs
  // const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
  //   manual: true,
  //   onSuccess: result => {
  //     setMenuRoles(result)
  //     // setState({ ...state, ID: result[0]['ID'] })
  //   }
  // })
  const { run: tryGetRoleStaffList } = useRequest(
    (roleID: string) => fetchRoleListByRoleId({ roleID }),
    {
      manual: true,
      onSuccess: result => {
        setState({ ...state, roleStaff: result.items })
      }
    }
  )
  const { run: tryUnLinkRoleAccount } = useRequest(
    (params: API.LinkAccountItem) => UnLinkRoleAccountItem(params),
    {
      manual: true,
      onSuccess: async () => {
        message.success('移除成功')
        await tryGetRoleStaffList(state.ID)
      }
    }
  )
  useEffect(() => {
    // tryFetchRoleListByMenu()
    if (state.ID) {
      tryGetRoleStaffList(state.ID)
    }
  }, [state.ID])
  const columns: ColumnsType<API.MenuByRoleIdItem> = [
    {
      title: '账号',
      dataIndex: 'account',
      width: '15%'
    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: '15%'
    },
    {
      title: '企事业名称',
      dataIndex: 'institutionID',
      width: '35%',
      render: (_, record) => record.institution.name
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '10%',
      render: (_, record) => (
        <Popconfirm
          title="确定移除吗？"
          okText="确定"
          cancelText="取消"
          onConfirm={() => tryUnLinkRoleAccount({ ID: state.ID, accountID: record.ID })}>
          <span className="text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
            <DeleteOutlined />
          </span>
        </Popconfirm>
      )
    }
  ]
  return (
    <PageContainer title={false}>
      <div className="h-full w-full flex flex-row">
        <RoleLeftMenu onSelect={onSelect}></RoleLeftMenu>
        <div className="w-6/7 ml-8 bg-white p-4 rounded-20px relative">
          <div className="absolute right-4 top-4 z-100">
            {state.ID && (
              <ConnectModal dataId={state.ID} onReload={() => tryGetRoleStaffList(state.ID)} />
            )}
          </div>
          <div>
            <Tabs>
              <TabPane tab="用户列表" key="1">
                <Table<API.MenuByRoleIdItem>
                  columns={columns}
                  dataSource={state.roleStaff}
                  rowKey={row => row.id}
                />
              </TabPane>
              <TabPane tab="功能权限" key="2">
                <SetPermission activeKey={state.activeKey} />
              </TabPane>
            </Tabs>
          </div>
        </div>
      </div>
    </PageContainer>
  )
}

export default Role