import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { asyncSMessage } from '@src/services/AsyncTools';
import { getMap, formatMoney, formatDate } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import menu from '../index';
import UserTable from '../../../components/UserTable';
import { Order } from '../../../stores/order';
import { RecordSource, ServiceKey } from '../../../../Constant';
import More from '../../../components/More';

const RecordSourceMap = getMap(RecordSource, 'value', 'label');
const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');
function formatTitle(record) {
  if (record.productType === 'course-package') {
    return (record.coursePackage || {}).title;
  }
  if (record.productType === 'course') {
    return (record.course || {}).title;
  }
  if (record.productType === 'data') {
    return (record.data || {}).title;
  }
  if (record.productType === 'service') {
    return `${ServiceKeyMap[record.service]}`;
  }
  return '';
}
const columns = [
  { title: '订单编号', key: 'id' },
  {
    title: '服务',
    key: 'title',
    render: (text, record) => {
      const actionList = [];
      if (record.canInvoice && !record.hasInvoice) {
        actionList.push({ key: 'invoice', label: '开发票' });
      }
      actionList.push({ key: 'detail', label: '订单详情' });
      const onAction = (key) => {
        switch (key) {
          case 'invoice':
            this.setState({ showInvoice: true, invoice: { orderId: record.id, money: record.invoiceMoney } });
            break;
          case 'detail':
            openLink(`/order/detail/${record.id}`);
            break;
          default:
        }
      };
      if (record.checkouts.length > 3) {
        return <span>{formatTitle(record.checkouts[0])}<br />等{record.checkouts.length}个商品<More actionList={actionList} onAction={onAction} /></span>;
      }
      return record.checkouts.map(row => {
        return formatTitle(row);
      });
    },
  },
  {
    title: '购买时间',
    key: 'createTime',
    render: (text) => {
      return formatDate(text, 'YYYY-MM-DD\nHH:mm:ss');
    },
  },
  {
    title: '付款方式',
    key: 'payMethod',
    render: (text) => {
      return RecordSourceMap[text];
    },
  },
  {
    title: '付款金额',
    key: 'money',
    render: (text) => {
      return formatMoney(text);
    },
  },
];

export default class extends Page {
  constructor(props) {
    props.size = 15;
    super(props);
  }

  initState() {
    return {};
  }

  initData() {
    Order.list(this.state.search)
      .then(result => {
        this.setState({ list: result.list, total: result.total, page: this.state.search.page });
      });
  }

  onChangePage(page) {
    this.search({ page });
  }

  submitInvoice(invoice) {
    Order.openInvoice(invoice)
      .then(() => {
        this.refresh();
        this.setState({ showFinish: true, showInvoice: false, invoice: {} });
      })
      .catch(e => {
        asyncSMessage(e.message, 'error');
      });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  }

  renderTable() {
    const { list, total, page } = this.state;
    return (
      <div className="table-layout">
        <UserTable
          size="small"
          columns={columns}
          data={list}
          onChange={p => this.onChangePage(p)}
          total={total}
          current={page}
        />
      </div>
    );
  }
}