/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [账号列表]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Card, Form, Input, Button, Table, Divider, Tooltip, Select, Switch } from 'antd';
import { EditOutlined, RedoOutlined } from '@ant-design/icons';
import { paginations } from '@/constants';
import ModalUpdateAccount from './ModalUpdateAccount';
import ModalResetPassword from './ModalResetPassword';
import { StyledPageContainer, StyledPageHeader, StyledPageContent } from '@/components/style';

const FormItem = Form.Item;
const { Option } = Select;

/* SearchForm */
const SearchForm = props => {
  const [form] = Form.useForm();
  const { dataSearch, handleReset, handleFinish } = props;

  useEffect(() => {
    form.setFieldsValue({
      ...dataSearch,
    });
  }, [dataSearch]);

  /* 点击搜索 */

  const onFinish = values => {
    handleFinish(values);
  };

  /* 点击重置 */
  const onReset = () => {
    handleReset();
  };

  return (
    <Form name="Form_Account" layout="inline" form={form} onFinish={onFinish}>
      <FormItem label="账号名称" name="keyword">
        <Input placeholder="请输入账号名称" style={{ width: '220px' }} />
      </FormItem>
      <FormItem label="账号状态" name="status">
        <Select placeholder="请选择账号状态" style={{ width: '180px' }}>
          <Option value="ALL">全部</Option>
          <Option value="1">启用</Option>
          <Option value="0">禁用</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" htmlType="submit" className="mr-15">
          搜索
        </Button>
        <Button className="mr-15" htmlType="button" onClick={onReset}>
          重置
        </Button>
      </FormItem>
    </Form>
  );
};

/* DataTable */
const DataTable = props => {
  const {
    dispatch,
    loading,
    handleGetList,
    currentUser: { name },
    dataAccount: { records = [], current, size, total },
  } = props;

  /* 点击分页 */
  const handlePageChange = (current, size) => {
    handleGetList(current, size);
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      width: 100,
      render(t, r, idx) {
        return (current - 1) * size + idx + 1;
      },
    },
    {
      title: '账号',
      dataIndex: 'username',
      align: 'center',
      width: 140,
    },
    {
      title: '姓名',
      dataIndex: 'realName',
      align: 'center',
      width: 140,
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      align: 'center',
      width: 140,
    },
    {
      title: '账号状态',
      dataIndex: 'status',
      align: 'center',
      width: 160,
      render(t, r, idx) {
        return (
          <Switch
            checkedChildren="启用"
            unCheckedChildren="已禁用"
            checked={t === 1}
            disabled={name === r.username}
            onChange={checked => {
              dispatch({
                type: 'Account/changeStatus',
                payload: {
                  id: r.id,
                  status: checked ? 1 : 0,
                },
              });
            }}
          />
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      width: 200,
      render(t, r, idx) {
        return t || '-';
      },
    },
    {
      title: '操作',
      align: 'center',
      width: 160,
      render(t, r) {
        return (
          <>
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ cursor: 'pointer', fontSize: 16 }}
                onClick={() => {
                  dispatch({
                    type: 'Account/changeState',
                    payload: {
                      dataModal: {
                        modalType: 'ACCOUNT_SET_MODAL',
                        modalShow: true,
                        modalData: r,
                      },
                    },
                  });
                }}
              />
            </Tooltip>
            <Divider type="vertical" style={{ margin: '0 16px' }} />
            <Tooltip
              placement="top"
              title="重置密码"
              onClick={() => {
                dispatch({
                  type: 'Account/changeState',
                  payload: {
                    dataModal: {
                      modalType: 'PASSWORD_SET_MODAL',
                      modalShow: true,
                      modalData: r,
                    },
                  },
                });
              }}
            >
              <RedoOutlined style={{ cursor: 'pointer', fontSize: 16 }} />
            </Tooltip>
          </>
        );
      },
    },
  ];
  const pagination = {
    ...paginations,
    total: total,
    pageSize: size,
    current,
    showSizeChanger: total > 10,
    onChange: (current, pageSize) => {
      handlePageChange(current, pageSize);
    },
    onShowSizeChange: (current, pageSize) => {
      handlePageChange(1, pageSize);
    },
    showTotal(total) {
      return `总共 ${total} 条数据`;
    },
  };
  return (
    <Table
      rowKey="id"
      loading={loading}
      dataSource={records}
      columns={columns}
      pagination={pagination}
      scroll={{ y: `calc(100vh - 353px)` }}
    />
  );
};

/* Main */
const Account = props => {
  const {
    dispatch,
    loading,
    dataSearch,
    dataModal,
    currentUser,
    dataAccount,
    dataAccount: { size },
  } = props;

  useEffect(() => {
    handleGetList(1, 10);
  }, []);

  /* 账号列表 */
  const handleGetList = (current, size) => {
    dispatch({
      type: 'Account/getAccountList',
      payload: {
        current: current || 1,
        size: size || 10,
      },
    });
  };

  /* 点击搜索 */
  const handleFinish = values => {
    const { status, keyword } = values;
    dispatch({
      type: 'Account/changeState',
      payload: {
        dataSearch: {
          keyword,
          status,
        },
      },
    });
    handleGetList(0, size);
  };

  /* 点击重置 */
  const handleReset = () => {
    dispatch({ type: 'Account/resetSearch' });
    handleGetList(0, 10);
  };

  // 关闭弹框
  const handleCancelModal = () => {
    dispatch({ type: 'Account/cancelModal' });
  };

  // 点击保存
  const handleOk = values => {
    const { saveType } = values;
    if (saveType === 'ACCOUNT') {
      dispatch({ type: 'Account/updateApplication', payload: { ...values, saveType: undefined } });
    } else if (saveType === 'PASSWORD') {
      dispatch({ type: 'Account/resetPassword', payload: { ...values, saveType: undefined } });
    }
  };

  return (
    <StyledPageContainer>
      <StyledPageHeader>
        <Button
          type="primary"
          onClick={() => {
            dispatch({
              type: 'Account/changeState',
              payload: {
                dataModal: {
                  modalType: 'ACCOUNT_SET_MODAL',
                  modalShow: true,
                  modalData: {},
                },
              },
            });
          }}
        >
          新增用户
        </Button>
      </StyledPageHeader>
      <StyledPageContent>
        <Card bordered={false}>
          <SearchForm
            dataSearch={dataSearch}
            handleReset={handleReset}
            handleFinish={handleFinish}
          />
          <div className="mt-16">
            <DataTable
              dispatch={dispatch}
              loading={loading}
              handleGetList={handleGetList}
              dataAccount={dataAccount}
              currentUser={currentUser}
            />
          </div>
        </Card>
      </StyledPageContent>
      <ModalUpdateAccount
        dataModal={dataModal}
        handleCancelModal={handleCancelModal}
        handleOk={handleOk}
      />
      <ModalResetPassword
        dataModal={dataModal}
        handleCancelModal={handleCancelModal}
        handleOk={handleOk}
      />
    </StyledPageContainer>
  );
};

export default connect(({ Account, user, loading }) => ({
  ...Account,
  currentUser: user.currentUser,
  loading: loading.effects['Account/getAccountList'],
}))(Account);