/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [角色列表]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Card, Form, Input, Button, Table, Divider, Tooltip, Modal } from 'antd';
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { paginations } from '@/constants';
import ModalUpdateRole from './ModalUpdateRole';
import { StyledPageContainer, StyledPageHeader, StyledPageContent } from '@/components/style';

const FormItem = Form.Item;

/* 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_Role" layout="inline" form={form} onFinish={onFinish}>
      <FormItem label="角色名称" name="search">
        <Input placeholder="请输入角色名称" style={{ width: '220px' }} />
      </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,
    dataRole: { records = [], current, size, total },
  } = props;

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

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      width: 120,
      render(t, r, idx) {
        return (current - 1) * size + idx + 1;
      },
    },
    {
      title: '角色名称',
      dataIndex: 'name',
      align: 'center',
      width: 160,
    },
    {
      title: '角色描述',
      dataIndex: 'description',
      align: 'center',
      width: 200,
      render: (t, r) => {
        return t || '-';
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      width: 200,
      render(t, r, idx) {
        return t || '-';
      },
    },
    {
      title: '操作',
      align: 'center',
      width: 150,
      render(t, r) {
        return (
          <>
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ cursor: 'pointer', fontSize: 16 }}
                onClick={() => {
                  dispatch({
                    type: 'Role/changeState',
                    payload: {
                      dataModal: {
                        modalType: 'ROLE_SET_MODAL',
                        modalShow: true,
                        modalData: r,
                      },
                    },
                  });
                }}
              />
            </Tooltip>
            <Divider type="vertical" style={{ margin: '0 16px' }} />
            <Tooltip
              placement="top"
              title="删除"
              onClick={() => {
                Modal.confirm({
                  title: '删除',
                  icon: <ExclamationCircleOutlined />,
                  content: '确定删除该角色吗?',
                  centered: true,
                  onOk() {
                    dispatch({
                      type: 'Role/delRole',
                      payload: { id: r.id },
                    });
                  },
                  onCancel() {},
                });
              }}
            >
              <DeleteOutlined 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 Role = props => {
  const {
    dispatch,
    loading,
    dataSearch,
    dataModal,
    currentUser,
    dataRole,
    dataRole: { size },
  } = props;

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

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

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

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

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

  // 点击保存
  const handleOk = values => {
    dispatch({ type: 'Role/updateRole', payload: { ...values } });
  };

  return (
    <StyledPageContainer>
      <StyledPageHeader>
        <Button
          type="primary"
          onClick={() => {
            dispatch({
              type: 'Role/changeState',
              payload: {
                dataModal: {
                  modalType: 'ROLE_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}
              dataRole={dataRole}
              currentUser={currentUser}
            />
          </div>
        </Card>
      </StyledPageContent>
      <ModalUpdateRole
        dataModal={dataModal}
        handleCancelModal={handleCancelModal}
        handleOk={handleOk}
      />
    </StyledPageContainer>
  );
};

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