import React from 'react';
import { Form, Row, Col, Avatar, Button } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import TableLayout from '@src/layouts/TableLayout';
import { formatDate, getMap, formatMoney } from '@src/services/Tools';
import { UserUrl, PrepareStatus, PrepareExaminationTime, ServiceKey, PayModule } from '../../../../Constant';
import { User } from '../../../stores/user';
import { Exercise } from '../../../stores/exercise';

const PrepareStatusMap = getMap(PrepareStatus, 'value', 'label');
const PrepareExaminationTimeMap = getMap(PrepareExaminationTime, 'value', 'label');
const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');
const PayModuleMap = getMap(PayModule, 'value', 'label');

export default class extends Page {
  constructor(props) {
    super(props);
    this.categoryMap = {};
  }

  init() {
    Exercise.allStruct().then(result => {
      this.categoryMap = getMap(result.filter(row => row.level === 2).map(row => { row.title = `${row.titleZh}/${row.titleEn}`; row.value = row.id; return row; }), 'id', 'title');
      this.setState({ exercise: result });
    });
    this.columns = [{
      title: '订单时间',
      dataIndex: 'createTime',
      render: (text) => {
        return formatDate(text);
      },
    }, {
      title: '购买',
      dataIndex: 'module',
      render: (text, record) => {
        const m = PayModuleMap[text];
        switch (text) {
          case 'service':
            return `${m}: ${ServiceKeyMap[record.moduleExtend]} ${record.isUse ? '已使用' : ''}`;
          case 'class':
            return `${m}: ${this.categoryMap[record.moduleExtend]} ${record.isUse ? '已使用' : ''}`;
          case 'data':
          default:
            return `${m || text}`;
        }
      },
    }, {
      title: '消费金额',
      dataIndex: 'money',
      render: (text) => {
        return formatMoney(text);
      },
    }];
  }

  initData() {
    const { id } = this.params;
    let handler;
    if (id) {
      handler = User.get({ id });
    } else {
      handler = Promise.resolve();
    }
    handler
      .then(result => {
        this.setState({ data: result });
        this.refreshPay(this.state.search.page, this.state.search.size);
      });
  }

  refreshPay(p, size) {
    const { id } = this.params;
    const { page } = this.state;
    page.current = p || 1;
    page.pageSize = size || 20;
    this.setState({ page });
    User.listPay({ user_id: id, page: page.current, size: page.pageSize })
      .then(result => {
        this.setTableData(result.list, result.total);
      });
  }

  renderBase() {
    const { data = {} } = this.state;
    return <Block>
      <h1>用户基本信息</h1>
      <Form>
        <div className="group">
          <h2>个人资料</h2>
          <Row>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户ID'>
                {data.id}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户昵称'>
                {data.nickname}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户手机'>
                {data.mobile}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户微信'>
                {data.wechatOpenidPc !== '' ? '已绑定' : '未绑定'}，{data.wechatOpenidWechat !== '' ? '已关注' : '未关注'}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='邮箱'>
                {data.email !== '' ? '已绑定' : '未绑定'}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='注册时间'>
                {formatDate(data.createTime)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='头像'>
                <Avatar src={data.avatar} />
              </Form.Item>
            </Col>
          </Row>
        </div>

        <div className="group">
          <h2>实名认证</h2>
          <Row>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='身份证id'>
                {data.realIdentity}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='真实姓名'>
                {data.realName}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='地区'>
                {data.realAddress}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='身份证照片'>
                <Avatar src={data.realPhoto} />
              </Form.Item>
            </Col>
          </Row>
        </div>
        <div className="group">
          <h2>备考信息</h2>
          <Row>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='身份'>
                {PrepareStatusMap[data.prepareStatus]}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='考试时间'>
                {PrepareExaminationTimeMap[data.PrepareExaminationTime]}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='出分时间'>
                {data.prepareScoreTime ? formatDate(data.prepareScoreTime) : ''}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='目标成绩'>
                {data.prepareGoal}
              </Form.Item>
            </Col>
          </Row>
        </div>
      </Form>
    </Block>;
  }

  renderService() {
    const { data = {} } = this.state;
    return <Block>
      <h1>服务开通</h1>
      <div className="group">
        <h2>累计消费金额</h2>
        <span>{data.totalMoney}</span>
      </div>
      <div className="group">
        <h2>已开通服务</h2>
        {(data.services || []).map(service => {
          return <p>{ServiceKeyMap[service.service]}: {formatDate(service.startTime)} - {formatDate(service.expireTime)}</p>;
        })}
      </div>
      <div className="group">
        <h2>已开通课程</h2>
        {(data.classes || []).map(cls => {
          return <p>{this.categoryMap[cls.category]}: {formatDate(cls.startTime)} - {formatDate(cls.expireTime)}</p>;
        })}
      </div>
      <div className="group">
        <h2>消费记录</h2>
        <TableLayout
          columns={this.columns}
          list={this.state.list}
          pagination={this.state.page}
          loading={this.props.core.loading}
          onChange={(pagination) => this.refreshPay(pagination.current, pagination.pageSize)}
        />
      </div>
    </Block>;
  }

  renderStudy() {
    return <Block>
      <h1>学习统计</h1>
      <div className="group">
        <h2>累计学习时间</h2>

      </div>
      <div className="group">
        <h2>学习数据</h2>
        <Button onClick={() => {
          User.token({ id: this.params.id || 1 })
            .then(token => {
              const w = window.open('about:blank');
              w.location.href = `${UserUrl}/my/data?token=${token}`;
            });
        }}>查看</Button>
      </div>
    </Block>;
  }

  renderView() {
    return <div flex>
      {this.renderBase()}
      {this.renderService()}
      {this.renderStudy()}
    </div>;
  }
}