import React from 'react';
import { connect } from 'dva';
import Modal from './Modal';
import { DataTable } from '../../../components';
import { Switch } from 'antd';

const Role = ({ dispatch, roles, loading }) => {
  const { list, total, currentItem, modalVisible, mode } = roles;

  const domain = 'roles';

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    roles,
    record: currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: '80%',
    confirmLoading: mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`],
    readOnly: mode === 'view',
    title: '角色菜单管理',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
    },
  };

  const tableProps = {
    scroll: { x: '100%', y: 350 },
    domain,
    dispatch,
    loading,
    total,
    showDelete: false,
    dataSource: list,
    filter: [{
      title: '授权角色',
      dataIndex: 'roleLike',
    }],
    columns: [{
      title: '角色名称',
      dataIndex: 'name',
      width: '20%',
    }, {
      title: '用户层级',
      dataIndex: 'layerName',
      width: '20%',
    }, {
      title: '用户领域',
      dataIndex: 'fieldName',
      width: '20%',
    }, {
      title: '是否生效',
      dataIndex: 'deleteFlag',
      width: '15%',
      render: (value, record, index) => (value ? '否' : '是')
    }, {
      title: '开关',
      dataIndex: '',
      width: '15%',
      render: (value, record, index) =>
        <Switch size="small" checked={!record.deleteFlag}
                onChange={(checked) => {
                  dispatch({
                    type: checked ? `${domain}/enable` : `${domain}/disable`,
                    payload: {
                      id: record.id,
                    }
                  });
                }}/>
    }],
  };

  return (
    <div className="content-inner">
      <DataTable {...tableProps} />
      {modalVisible && <Modal {...modalProps} />}
    </div>
  );
};
export default connect(({ roles, loading }) => ({ roles, loading }))(Role);
