import React, { Component } from 'react';
import { Card, Form, List, Input, Switch, Tooltip, Button, message } from 'antd';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import queryString from 'query-string';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import CampusSelectModal from './campus';
import { Codes, pageSize } from '../../../utils/config';

@Form.create()
@connect(state => ({
  terminalDetail: state.terminalDetail,
  campus: state.campus,
}))
export default class TerminalProfile extends Component {
  handleCampusSelectClick = () => {
    this.props.dispatch({ type: 'terminalDetail/showModal' });
    this.props.dispatch({
      type: 'campus/query',
      payload: { pageNo: 1, pageSize },
    });
  }

  handleCampusModalOk = (data) => {
    this.props.dispatch({
      type: 'terminalDetail/saveCampus',
      payload: data,
    });
  }

  handleCampusModalCancel = () => {
    this.props.dispatch({ type: 'terminalDetail/hideModal' });
  }

  handleCampusModalSearch = (data) => {
    const newData = { ...data };
    if (newData.keyword) {
      newData[newData.field] = newData.keyword;
    }
    delete newData.field;
    delete newData.keyword;
    this.props.dispatch({
      type: 'campus/query',
      payload: { ...newData, pageNo: 1, pageSize },
    });
  }

  handleCampusModalTableChange = (pagination, filterArgs, filters) => {
    const newFilters = { ...filters };
    if (newFilters.keyword) {
      newFilters[newFilters.field] = newFilters.keyword;
    }
    delete newFilters.field;
    delete newFilters.keyword;
    const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
    const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filterArgs[key]);
      return newObj;
    }, {});

    const data = { ...newFilters, ...tableFilters, pageNo: pagination.current, pageSize: pagination.pageSize };
    Object.keys(data).map(key => (data[key] ? null : delete data[key]));
    this.props.dispatch({ type: 'campus/query', payload: data });
  }

  handlePageCancel = () => {
    const { dispatch, terminalDetail } = this.props;
    const { filters } = terminalDetail;
    dispatch(routerRedux.push({
      pathname: '/terminal/user',
      search: queryString.stringify(filters),
    }));
  }

  handlePageSubmit = (e) => {
    e.preventDefault();

    const { dispatch, form, terminalDetail } = this.props;
    const { validateFields, getFieldsValue } = form;
    const { currentItem, operType, filters } = terminalDetail;
    const { campusId, id, status } = currentItem;

    validateFields((errors) => {
      if (errors) return;
      if (!campusId) {
        message.error('请选择校区!');
        return;
      }

      const data = { ...getFieldsValue(), campusId };
      if (operType === 'create') {
        data.status = Codes.CODE_NORMAL;
      } else if (operType === 'update') {
        data.status = status;
        data.id = id;
      }

      dispatch({
        type: `terminalDetail/${operType}`,
        payload: data,
        callback: () => {
          dispatch(routerRedux.push({
            pathname: '/terminal/user',
            search: queryString.stringify(filters),
          }));
        },
      });
    });
  }

  render() {
    const { form, terminalDetail, campus } = this.props;
    const { currentItem, modalShow, operType } = terminalDetail;
    const { name, password, status, campusId, campusName, merchantName } = currentItem;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
        md: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 8 },
      },
    };

    return (
      <PageHeaderLayout>
        <Card title="终端用户">
          <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
            <Form.Item hasFeedback label="所属校区" {...formItemLayout}>
              <Tooltip placement="top" title="点击选择校区">
                <Button disabled={operType === 'update'} style={{ marginRight: 20 }} type="primary" size="small" icon="select" onClick={this.handleCampusSelectClick}>选择</Button>
              </Tooltip>
              {operType === 'update' ?
                (
                  <List
                    size="small"
                    bordered
                    dataSource={[
                    `所属校区: ${campusName}`,
                    `所属渠道: ${merchantName}`,
                  ]}
                    renderItem={item => <List.Item>{item}</List.Item>}
                  />
                ) : (
                  campusId ? <List size="small" bordered dataSource={[`${campusName}`]} renderItem={item => <List.Item>{item}</List.Item>} /> : null)
              }
            </Form.Item>
            <Form.Item label="终端名称：" hasFeedback {...formItemLayout}>
              {getFieldDecorator('name', {
                initialValue: name,
              })(<Input placeholder="请输入(例: 教室三/教室四...)" />)}
            </Form.Item>
            {operType === 'create' ?
              (
                <Form.Item label="终端密码：" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('password', {
                  rules: [{ required: true, type: 'string', message: '密码为必填项!' }],
                  initialValue: password,
                })(<Input placeholder="请输入" />)}
                </Form.Item>
              ) : (
                <Form.Item label="终端密码：" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('password', {
                  initialValue: password,
                })(<Input placeholder="修改密码时填写" />)}
                </Form.Item>
              )
            }
            <Form.Item label="账号状态：" {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropsName: 'checked',
            })(
              <Switch
                defaultChecked={status === Codes.CODE_NORMAL}
                checkedChildren="使用中"
                unCheckedChildren="禁用中"
              />
            )}
            </Form.Item>
            <Form.Item {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button onClick={this.handlePageCancel}>取消</Button>
              <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
            </Form.Item>
          </Form>
          {/* 校区模态选择框 */}
          <CampusSelectModal
            rowKeyName="id"
            modalVisible={modalShow}
            width={600}
            onOk={this.handleCampusModalOk}
            onCancel={this.handleCampusModalCancel}
            onSearch={this.handleCampusModalSearch}
            fsTableDataSource={campus.list || []}
            fsTableLoading={campus.listLoading}
            fsTablePagination={campus.pagination}
            fsTableOnChange={this.handleCampusModalTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}