import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Button, Popover, message } from 'antd';
import { StandardTableList } from '../../../components/RBList/index';
import { addRowKey, renderOrderStatus, renderOrderSplitStatus, provinceCodeToName } from '../../../utils/utils';

const Message = message;
@connect(({ loading, trade }) => ({
  trade,
  loading: loading.models.trade,
}))
export default class OrderListPage extends Component {
  constructor(props) {
    super(props);
    const { state } = props.location;
    this.state = {
      UIParams: (state || {}).UIParams, // 组件的状态参数
      Queryers: (state || {}).Queryers, // 查询的条件参数
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'trade/fetchOrderList',
      payload: { ...this.state.Queryers },
    });
  }
  handleCreateOperation = () => {
  }
  handleFilterOperation = (params, states) => {
    this.props.dispatch({
      type: 'trade/fetchOrderList',
      payload: params,
    });
    this.setState({
      UIParams: states,
      Queryers: params,
    });
  }
  handleBatchOperation = () => {
    Message.info('暂不支持批量操作!');
  }

  render() {
    const { loading, trade } = this.props;
    const { list, totalSize, pageSize, pageNo } = trade;

    const renderOperation = () => {
      return (
        <div>
          <Button
            size="small"
            type="primary"
          >详情
          </Button>
        </div>
      );
    };
    const batchActions = [{
      key: 'delete',
      name: '批量清空',
    }, {
    }];
    const basicSearch = {
      keys: [{
        name: '订单编号',
        field: 'code',
      }, {
        name: '终端编号',
        field: 'userCode',
      }],
    };
    const pagination = {
      pageNo,
      pageSize,
      totalSize,
    };
    const columns = [{
      title: '订单编号',
      key: 1,
      dataIndex: 'serialNo',
      width: '13%',
    }, {
      title: '用户信息',
      key: 2,
      width: '27%',
      render: (_, record) => {
        const { userCode, provinceCode, cityName, zoneName, merchantName } = record;
        return (
          <div>
            <p>
              <span>终端编号:&nbsp;</span>
              {userCode}
            </p>
            <p>
              <span>所属校区:&nbsp;</span>
              {`${provinceCodeToName(provinceCode)}${cityName}${zoneName}`}
            </p>
            <p>
              <span>所属渠道:&nbsp;</span>
              {merchantName}
            </p>
          </div>
        );
      },
    }, {
      title: '价格信息',
      key: 3,
      width: '15%',
      render: (_, record) => {
        const { originPrice, adjustPrice, finalPrice } = record;
        return (
          <div>
            <p>
              <span>初始价格:&nbsp;</span>
              {originPrice}
            </p>
            <p>
              <span>优惠价格:&nbsp;</span>
              {adjustPrice}
            </p>
            <p>
              <span>实际售价:&nbsp;</span>
              {finalPrice}
            </p>
          </div>
        );
      },
    }, {
      title: '收货信息',
      key: 4,
      width: '8%',
      render: (_, record) => {
        const { name, mobile, address } = record;
        return (
          <Popover
            placement="top"
            content={
              <div>
                <p>
                  <span>收货人:&nbsp;</span>
                  {name}
                </p>
                <p>
                <span>手机号码:&nbsp;</span>
                {mobile}
                </p>
                <p>
                <span>收货地址:&nbsp;</span>
                {address}
                </p>
              </div>
            }
          >
            {name}
          </Popover>
        );
      },
    }, {
      title: '拆单状态',
      key: 5,
      dataIndex: 'splitStatus',
      render: text => renderOrderSplitStatus(text),
      width: '8%',
    }, {
      title: '订单状态',
      key: 6,
      dataIndex: 'orderStatus',
      render: text => renderOrderStatus(text),
      width: '8%',
    }, {
      title: '下单时间',
      key: 7,
      dataIndex: 'gmtCreated',
      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
      width: '16%',
    }, {
      title: '操作',
      key: 8,
      dataIndex: 'operation',
      render: (_, record) => renderOperation(record),
      width: '5%',
    }];
    return (
      <Card>
        <StandardTableList
          columns={columns}
          loading={loading}
          showStatusSelect={false}
          dataSource={addRowKey(list)}
          header={{
            basicSearch,
            onFilterClick: this.handleFilterOperation,
            onCreateClick: this.handleCreateOperation,
          }}
          footer={{
            pagination,
            batchActions,
            onBatchClick: this.handleBatchOperation,
          }}
          keepUIState={{ ...this.state.UIParams }}
        />
      </Card>
    );
  }
}