import styles from '@/page/Home/User/index.module.scss'
import { useEffect, useState } from "react";
import Operation from '@/components/Operation';
import { Button, Input, Table, Pagination, Modal, message, Select } from "antd";
import { SearchOutlined } from '@ant-design/icons';
import { GetUserList, PostUser, PutUser, DeleteUser, PutUserPwd, GetRoleDpList } from '@/api/Home/User';
import { md5 } from 'js-md5';
const { Column } = Table
const User: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [isCreateUser, setIsCreateUser] = useState(false);
  const [list, setList] = useState({
    data: [],
    searchKeywod: '',
    total: 0,
    pageIndex: 1,
    pageSize: 6,
  })
  const [roleList, setRoleList] = useState([])
  const [addUserModal, setAddUserModal] = useState(false)
  const [addUserFrom, setAddUserFrom] = useState({
    Id: "",
    Account: "",
    RoleId: null,
    Pwd: "",
    UserName: ""
  })
  const [changeUserPawModal, setChangeUserPawModal] = useState(false)
  const [changeUserPawFrom, setChangeUserPawFrom] = useState({
    Pwd: "",
    newPwd: '',
  })
  const [deleteUserPawModal, setDeleteUserPawModal] = useState(false)

  useEffect(() => {
    getUserList()
  }, [list.pageIndex]);

  const getUserList = async (): Promise<void> => {
    await GetUserList({
      pageIndex: list.pageIndex,
      pageSize: list.pageSize,
      searchKeywod: list.searchKeywod,
    }).then(res => {
      if (res.code === 200) {
        setList({
          ...list,
          total: res.data.total,
          data: res.data.items.map((item: any) => {
            return {
              ...item,
              key: item.id,
            }
          }),
        })
      }
    })
  }

  const getRoleDpList = async (callBack: Function): Promise<void> => {
    await GetRoleDpList().then(res => {
      if (res.code === 200) {
        setRoleList(res.data.map((item: any) => {
          return {
            ...item,
            value: item.id,
            label: item.roleName
          }
        }))
        callBack(true)
      }
    })
  }
  return (
    <>
      <div className={styles.user}>
        <div className={styles.userOperation}>
          <Operation></Operation>
        </div>
        <div className={styles.userBtns}>
          <div className={`${styles.userBtnsLeft} drag`}>
            <Button type="primary"
              onClick={() => {
                getRoleDpList((bool: boolean) => {
                  if (bool) {
                    setIsCreateUser(true)
                    setAddUserFrom({
                      Id: "",
                      Account: "",
                      RoleId: null,
                      Pwd: "",
                      UserName: "",
                    })
                    setAddUserModal(true)
                  }
                })
              }}
              icon={<img src="/src/assets/icon8.png" alt="" />}
              className='m-ant-btn'>
              添加用户
            </Button>
            <Button type="primary"
              icon={<img src="/src/assets/icon21.png" alt="" />}
              className={styles.userBtnsDel}
              onClick={() => {
                setDeleteUserPawModal(true)
              }}
            >
              删除用户
            </Button>
          </div>
          <div className={`${styles.userBtnsRight} drag`}>
            <Input
              placeholder="请输入用户名"
              prefix={<SearchOutlined style={{ color: 'white' }} />}
              onChange={(e) => {
                setList({
                  ...list,
                  searchKeywod: e.target.value,
                })
              }}
            />
            <Button className='m-border-ant-button' onClick={() => {
              if (list.pageIndex === 1) {
                getUserList()
              } else {
                setList({
                  ...list,
                  pageIndex: 1
                })
              }
            }}>查询</Button>
          </div>
        </div>
        <div className={`${styles.userContent} drag`}>
          <Table
            size={'small'}
            rowSelection={{
              selectedRowKeys,
              onChange: (newSelectedRowKeys: React.Key[]) => {
                setSelectedRowKeys(newSelectedRowKeys);
              }
            }}
            dataSource={list.data}
            pagination={false}
            scroll={{ y: '70vh' }}
            style={{ width: '81.4vw', flexGrow: 1 }}
          >
            <Column title="姓名" dataIndex="userName" key="userName" />
            <Column title="账号" dataIndex="account" key="account" />
            <Column title="角色" dataIndex="roleName" key="roleName" />
            <Column title="在线状态" render={(item) => (
              <>
                <div style={{ color: '#02B188' }}>{item.account}</div>
              </>
            )} />
            <Column title="操作" render={(item) => (
              <>
                <Button
                  type="primary"
                  style={{ backgroundColor: '#0085FF30', marginRight: '14px' }}
                  size={'small'}
                  onClick={() => {
                    getRoleDpList((bool: boolean) => {
                      if (bool) {
                        setIsCreateUser(false)
                        setAddUserFrom({
                          ...addUserFrom,
                          Id: item.id,
                          Account: item.account,
                          RoleId: item.roleId,
                          UserName: item.userName,
                        })
                        setAddUserModal(true)
                      }
                    })
                  }}>编辑</Button>
                <Button
                  type="primary"
                  style={{ backgroundColor: '#715AFF40', marginRight: '14px' }}
                  size={'small'}
                  onClick={() => {
                    setChangeUserPawFrom({
                      Pwd: "",
                      newPwd: '',
                    })
                    setAddUserFrom({
                      ...addUserFrom,
                      Id: item.id,
                      Account: item.account,
                      RoleId: item.roleId,
                      UserName: item.userName,
                    })
                    setChangeUserPawModal(true)
                  }}>更改密码</Button>
              </>
            )} />
          </Table>
          <div className={styles.userContentPagination}>
            <span>共{list.total}项数据</span>
            <Pagination size="small" total={list.total} onChange={(e) => {
              setList({
                ...list,
                pageIndex: e
              })
            }} pageSize={list.pageSize} current={list.pageIndex} hideOnSinglePage={true} />
          </div>
        </div>
      </div>
      <Modal title={isCreateUser ? '添加用户' : '编辑用户'} open={addUserModal} footer={null} closable={false} centered width={'40vw'}>
        <div>
          <div className={styles.addUserModal}>
            <div>
              <span>账号：</span>
              <Input
                placeholder="请输入账号"
                value={addUserFrom.Account}
                onChange={(e) => {
                  setAddUserFrom({
                    ...addUserFrom,
                    Account: e.target.value,
                  });
                }}
              />
            </div>
            <div>
              <span>角色：</span>
              <Select
                placeholder='请选择角色'
                options={roleList}
                style={{ flexGrow: 1 }}
                value={addUserFrom.RoleId} onChange={(e) => {
                  setAddUserFrom({
                    ...addUserFrom,
                    RoleId: e
                  });
                }} />;
            </div>
            {isCreateUser ? <div>
              <span>密码：</span>
              <Input.Password
                placeholder="请输入密码"
                style={{ flexGrow: 1 }}
                value={addUserFrom.Pwd}
                onChange={(e) => {
                  setAddUserFrom({
                    ...addUserFrom,
                    Pwd: e.target.value,
                  });
                }}
              />
            </div> : null}
            <div>
              <span>用户名称：</span>
              <Input
                placeholder="请输入用户名称"
                style={{ flexGrow: 1 }}
                value={addUserFrom.UserName}
                onChange={(e) => {
                  setAddUserFrom({
                    ...addUserFrom,
                    UserName: e.target.value,
                  });
                }}
              />
            </div>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'center'
          }}>
            <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setAddUserModal(false)}>取消</Button>
            <Button type="primary" className='m-ant-btn' onClick={async () => {
              if (!addUserFrom.Account) {
                return message.error('请输入账号！')
              }
              if (!addUserFrom.RoleId) {
                return message.error('请选择角色！')
              }
              if (!addUserFrom.Pwd && isCreateUser) {
                return message.error('请输入密码！')
              }
              if (!addUserFrom.UserName) {
                return message.error('请输入用户名称！')
              }
              if (isCreateUser) {
                await PostUser({
                  ...addUserFrom,
                  Pwd: md5(addUserFrom.Pwd)
                }).then(res => {
                  if (res.code === 200) {
                    setAddUserModal(false)
                    message.success('添加成功！')
                  }
                })
              } else {
                await PutUser({
                  Id: addUserFrom.Id,
                  Account: addUserFrom.Account,
                  RoleId: addUserFrom.RoleId,
                  UserName: addUserFrom.UserName
                }).then(res => {
                  if (res.code === 200) {
                    setAddUserModal(false)
                    message.success('修改成功！')
                  }
                })
              }
              await getUserList()
            }}>{isCreateUser ? '添加' : '修改'}</Button>
          </div>
        </div>
      </Modal>
      <Modal title='更改密码' open={changeUserPawModal} footer={null} closable={false} centered width={'40vw'}>
        <div>
          <div className={styles.addUserModal}>
            <div>
              <span>新密码：</span>
              <Input.Password
                placeholder="请输入新密码"
                style={{ flexGrow: 1 }}
                value={changeUserPawFrom.Pwd}
                onChange={(e) => {
                  setChangeUserPawFrom({
                    ...changeUserPawFrom,
                    Pwd: e.target.value,
                  });
                }}
              />
            </div>
            <div>
              <span>确认密码：</span>
              <Input.Password
                placeholder="再次输入密码"
                style={{ flexGrow: 1 }}
                value={changeUserPawFrom.newPwd}
                onChange={(e) => {
                  setChangeUserPawFrom({
                    ...changeUserPawFrom,
                    newPwd: e.target.value,
                  });
                }}
              />
            </div>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'center'
          }}>
            <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setChangeUserPawModal(false)}>取消</Button>
            <Button type="primary" className='m-ant-btn' onClick={async () => {
              if (!changeUserPawFrom.Pwd || !changeUserPawFrom.newPwd) {
                return message.error('请输入密码！')
              }
              if (changeUserPawFrom.Pwd !== changeUserPawFrom.newPwd) {
                return message.error('新密码与确认密码不一致！')
              }
              await PutUserPwd({ id: addUserFrom.Id, pwd: md5(changeUserPawFrom.Pwd) }).then(res => {
                if (res.code === 200) {
                  setChangeUserPawModal(false)
                  message.success('修改成功')
                }
              })
              await getUserList()
            }}>修改</Button>
          </div>
        </div>
      </Modal>
      <Modal title='' open={deleteUserPawModal} footer={null} centered width={'24vw'}>
        <div>
          <div style={{ color: 'white', fontSize: '18px', textAlign: 'center', marginBottom: '20px' }}>
            是否确认删除该用户？
          </div>
          <div style={{
            display: 'flex', justifyContent: 'center'
          }}>
            <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }}
              onClick={() => setDeleteUserPawModal(false)}>取消</Button>
            <Button type="primary" className='m-ant-btn' onClick={() => {
              DeleteUser(selectedRowKeys).then(res => {
                if (res.code === 200) {
                  setDeleteUserPawModal(true)
                  setSelectedRowKeys([])
                  message.success('删除成功！')
                  getUserList()
                }
              })
            }}>确定</Button>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default User