import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Checkbox, DatePicker, Input, Select } from 'antd';
import Modal from './Modal';
import { DataTable, SuggestSelect } from '../../../components';
import { dataUtils } from '../../../utils';

const Option = Select.Option;

const domain = 'logs';
const domainCN = '操作日志';

// 搜索部
const buildFilter = authOnly => [{
  title: '用户名',
  dataIndex: 'userId',
  tag: <SuggestSelect placeholder="请输入" apiName="users"/>,
}, {
  title: '模块',
  dataIndex: 'moduleId',
  tag: <Input disabled={authOnly}/>
}, {
  title: '功能',
  dataIndex: 'funcId',
  tag: <Input disabled={authOnly}/>
}, {
  title: 'API',
  dataIndex: 'path',
  tag: <Input disabled={authOnly}/>
}, {
  title: '状态',
  dataIndex: 'status',
  tag: <Select>{[2, 3, 4, 5].map(s => <Option key={s} value={s * 100}>{s}XX</Option>)}</Select>
}, {
  title: '开始时间',
  dataIndex: 'sinceTime',
  tag: <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime style={{ width: '100%' }}/>,
}, {
  title: '结束时间',
  dataIndex: 'untilTime',
  tag: <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime style={{ width: '100%' }}/>,
}, {
  title: '仅显示认证记录',
  dataIndex: 'auth',
  tag: <Checkbox/>,
}];

// 数据列
const columns = [{
  title: '时间',
  dataIndex: 'timestamp',
  sorter: true,
  width: '15%',
  render: (value, row, index) => {
    return dataUtils.dtm(value);
  },
}, {
  title: '用户名',
  dataIndex: 'userName',
  width: '15%',
}, {
  title: 'IP',
  dataIndex: 'client',
  width: '10%',
}, {
  title: '模块ID',
  dataIndex: 'moduleId',
  width: '10%',
}, {
  title: '功能ID',
  dataIndex: 'funcId',
  width: '10%',
}, {
  title: '功能名',
  dataIndex: 'permName',
  width: '10%',
}, {
  title: '请求方式',
  dataIndex: 'method',
  width: '5%',
}, {
  title: 'API',
  dataIndex: 'path',
  width: '20%',
  className: 'alignLeft',
}, {
  title: '状态',
  dataIndex: 'status',
  width: '5%',
}];

// 数据表属性
const buildTableProps = (dispatch, model, loading) => {
  const { list, total, authOnly } = model;
  const onFilterChanged = function (field) {
    //console.log('field', field);
    if (field === 'auth') {
      dispatch({ type: `${domain}/${field}Changed` });
    }
  };
  return {
    scroll: { x: '100%', y: 400 },
    rowKey: 'id',
    sortBy: 'timestamp',
    sortDirection: 'DESC',
    domain,
    dispatch,
    loading,
    total,
    enableDoubleClick: false,
    enableSelection: false,
    showAdd: false,
    showDelete: false,
    showEdit: false,
    showView: false,
    dataSource: list,
    filter: buildFilter(authOnly),
    columns,
    onFilterChanged,
  };
};

// 对话框属性
const buildModalProps = (dispatch, model, loading) => {
  const { currentItem, modalVisible, mode } = model;
  return {
    dispatch,
    loading,
    mode,
    domain,
    record: currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`],
    readOnly: mode === 'view',
    title: mode === 'create' ? `新增${domainCN}` : (mode === 'update' ? `修改${domainCN}` : `查看${domainCN}`),
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
    },
  };
};

// EDP-TMS 访问日志视图
const TmsTraceView = ({ dispatch, model, loading }) => {
  //console.log({ dispatch, model, loading });
  const tableProps = buildTableProps(dispatch, model, loading);
  const modalProps = buildModalProps(dispatch, model, loading);
  return (
    <div className="content-inner">
      <DataTable {...tableProps} />
      {model.modalVisible && <Modal {...modalProps} />}
    </div>
  );
};

TmsTraceView.propTypes = {
  dispatch: PropTypes.func,
  logs: PropTypes.object,
  loading: PropTypes.object,
};

export default connect(({ logs: model, loading }) => ({ model, loading }))(TmsTraceView);
