import React from 'react';
import './index.less';
import { Form, Row, Col } from 'antd';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import { getMap, formatDate, formatMoney } from '@src/services/Tools';
import { RecordBuySource, ServiceKey, ServiceParamMap } from '../../../../Constant';
import { User } from '../../../stores/user';

const RecordBuySourceMap = getMap(RecordBuySource, 'value', 'label');

const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');
const ServiceParamRelation = getMap(Object.keys(ServiceParamMap).map(key => {
  return { map: getMap(ServiceParamMap[key], 'value', 'label'), key };
}), 'key', 'map');
export default class extends Page {
  initData() {
    const { id } = this.params;
    let handler;
    if (id) {
      handler = User.getOrder({ id });
    } else {
      handler = Promise.resolve({});
    }
    handler
      .then(result => {
        const courseMap = getMap(result.courses, 'id');
        const dataMap = getMap(result.datas, 'id');
        const packageMap = getMap(result.packages, 'id');
        this.setState({ courseMap, dataMap, packageMap, data: result });
      });
  }

  renderProduct() {
    const { data = {}, courseMap, dataMap, packageMap } = this.state;
    const { checkouts = [] } = data;
    return <Block>
      <h1>包含商品</h1>
      <Form>
        {(checkouts || []).map(row => {
          // 赠送过滤
          if ((row.source || '').indexOf('gift') >= 0) return null;
          let title = '';
          switch (row.productType) {
            case 'course':
              ({ title } = (courseMap[row.productId] || {}));
              break;
            case 'data':
              ({ title } = (dataMap[row.productId] || {}));
              break;
            case 'package':
              ({ title } = (packageMap[row.productId] || {}));
              break;
            case 'service':
              title = `服务：${ServiceKeyMap[row.service]}${row.param ? (ServiceParamRelation[row.service] || {})[row.param] || '' : ''}`;
              break;
            default:
              break;
          }
          return <Row>
            <Col span={10} offset={2}>
              {title}{row.number > 1 ? `X ${row.number}` : ''}
            </Col>
            <Col span={12}>
              {`${formatMoney(row.money)}${row.money !== row.originMoney ? `(${formatMoney(row.originMoney)})` : ''}`}
            </Col>
          </Row>;
        })}
      </Form>
    </Block>;
  }

  renderMoney() {
    const { data = {} } = this.state;
    return <Block>
      <h1>订单金额</h1>
      <Form>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='原价'>
          {formatMoney(data.originMoney)}
        </Form.Item>
        {(data.promote || []).map(info => {
          return <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='优惠金额'>
            <Row>
              <Col span={12} >
                -{formatMoney(info.originMoney - info.money)}
              </Col>
              <Col span={12}>
                {info.message}
              </Col>
            </Row>
          </Form.Item>;
        })}
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='总支付'>
          {formatMoney(data.money)}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderGift() {
    const { data = {} } = this.state;
    return <Block>
      <h1>赠送服务</h1>
      <Form>
        {(data.gift || []).map(row => {
          return <Form.Item >
            {row.message}
          </Form.Item>;
        })}
      </Form>
    </Block>;
  }

  renderTime() {
    const { data = {} } = this.state;
    return <Block>
      <h1>订单时间</h1>
      <Form>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='提交时间'>
          {data.createTime ? formatDate(data.createTime, 'YYYY-MM-DD HH:mm:ss') : ''}
        </Form.Item>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='支付时间'>
          {data.payTime ? formatDate(data.payTime, 'YYYY-MM-DD HH:mm:ss') : ''}
        </Form.Item>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='支付方式'>
          {RecordBuySourceMap[data.payMethod] || ''}
        </Form.Item>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='付款流水号'>
          {data.transactionNo}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderView() {
    return <div>
      {this.renderProduct()}
      {this.renderMoney()}
      {this.renderGift()}
      {this.renderTime()}
    </div>;
  }
}