import {
  addRoleMenu,
  delRoleMenu,
  fetchRoleListByMenu,
  updateRoleMenu
} from '@/services/permission'
import {
  DeleteOutlined,
  FormOutlined,
  PlusOutlined,
  QuestionCircleOutlined
} from '@ant-design/icons'
import { ModalForm, ProFormText } from '@ant-design/pro-form'
import { Button, Input, message, Popconfirm, Popover } from 'antd'
import React, { useEffect, useState } from 'react'
import { useRequest } from 'umi'
import './index.less'

const RoleLeftMenu = ({ onSelect }) => {
  const [state, setState] = useState({
    value: ''
  })
  const [activeId, setActiveId] = useState('')
  const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
  const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
    manual: true,
    onSuccess: result => {
      setMenuRoles(result)
      // setActiveId(result[0]['ID'])
    }
  })
  const { run: tryAddRole } = useRequest((params: API.CreateRoleParams) => addRoleMenu(params), {
    manual: true,
    onSuccess: () => {
      tryFetchRoleListByMenu()
    }
  })
  const onChangeName = value => {
    setState({ ...state, name: value })
  }
  const { run: tryUpdateRole } = useRequest(
    (ID: string, name: string) => updateRoleMenu({ ID, name }),
    {
      manual: true,
      onSuccess: () => {
        message.success('修改成功')
        tryFetchRoleListByMenu()
      }
    }
  )
  const { run: tryDelRole } = useRequest((ID: string) => delRoleMenu({ ID }), {
    manual: true,
    onSuccess: () => {
      message.success('删除成功')
      tryFetchRoleListByMenu()
    }
  })
  useEffect(() => {
    tryFetchRoleListByMenu()
  }, [])
  const handleItemClick = (id: string) => {
    setActiveId(id)
    if (onSelect) {
      onSelect(id)
    }
  }
  return (
    <div
      className="w-216px rounded-20px"
      style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
      <div className="p-5 menu-title flex items-center justify-around">
        <span className="text-16px text-opacity-85">角色列表</span>
        <ModalForm
          title="新建角色"
          width="500px"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          layout="horizontal"
          trigger={
            <Button size="small" type="primary" ghost>
              <PlusOutlined />
              添加
            </Button>
          }
          onFinish={async values => {
            await tryAddRole(values)
            message.success('添加成功')
            return true
          }}>
          <ProFormText name="" hidden />
          <ProFormText
            name="name"
            label="角色名称"
            rules={[{ required: true, message: '请输入角色名' }]}
          />
        </ModalForm>
      </div>
      <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
        <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
          {menuRoles.map(item => (
            <Popover
              key={item.id}
              placement="right"
              content={
                <div>
                  {item.roleType !== 'system' ? (
                    <span>
                      <Popconfirm
                        title={
                          <Input
                            placeholder="角色名称"
                            name="name"
                            onChange={e => onChangeName(e.currentTarget.value)}
                          />
                        }
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => tryUpdateRole(item.ID, state.name)}
                        icon="">
                        <FormOutlined className="pr-1" />
                      </Popconfirm>
                      <Popconfirm
                        title="确定删除该角色"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => tryDelRole(item.ID)}
                        icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
                        <DeleteOutlined />
                      </Popconfirm>
                    </span>
                  ) : null}
                </div>
              }>
              <li
                key={item.id}
                className={[
                  'flex justify-between items-center py-2 px-5 cursor-pointer',
                  item.ID === activeId ? 'scale-up-center' : ''
                ].join(' ')}
                onClick={() => handleItemClick(item.ID)}>
                <span>{item.name}</span>
              </li>
            </Popover>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default RoleLeftMenu