Hotax/src/routes/Shelves/Package/PackageCreate.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { message, Modal, Table, Card, Button } from 'antd';
import Selector from '../../../components/AXTableSelector/Selector';
import FooterToolbar from '../../../components/FooterToolbar';
import { Hotax } from '../../../utils/config';
import { renderCategory, statusCodeToName } from '../../../utils/utils';
import styles from './PackageCreate.less';

const Message = message;

@connect(({ loading, shelves, product, merchant }) => ({
  product,
  shelves,
  merchant,
  mLoading: loading.models.merchant,
  pLoading: loading.models.product,
  submitting: loading.models.shelves,
}))
export default class PackageCreatePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productItem: {},
      merchantItem: {},
      productSelectorDestroy: true,
      merchantSelectorDestroy: true,
    };
  }
  handleProductSelectorModalShow = () => {
    this.setState({
      productSelectorDestroy: false,
    });
    this.props.dispatch({
      type: 'product/fetchPackageList',
      payload: {},
    });
  };
  handleMerchantSelectorModalShow = () => {
    this.setState({
      merchantSelectorDestroy: false,
    });
    this.props.dispatch({
      type: 'merchant/fetchMerchantList',
      payload: {},
    });
  };
  handleProductSelectorChange = (params) => {
    this.props.dispatch({
      type: 'product/fetchPackageList',
      payload: params,
    });
  };
  handleMerchantSelectorChange = (params) => {
    this.props.dispatch({
      type: 'merchant/fetchMerchantList',
      payload: params,
    });
  };
  handleProductSelectorFinish = (rows) => {
    this.setState({
      productSelectorDestroy: true,
      productItem: rows[0],
    });
  };
  handleMerchantSelectorFinish = (rows) => {
    this.setState({
      merchantSelectorDestroy: true,
      merchantItem: rows[0],
    });
  };
  handleProductSelectorCancel = () => {
    this.setState({
      productSelectorDestroy: true,
    });
  };
  handleMerchantSelectorCancel = () => {
    this.setState({
      merchantSelectorDestroy: true,
    });
  };
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/shelves/package/list',
      state: this.props.location.state,
    }));
  };
  handlePageSubmit = (e) => {
    e.preventDefault();
    const { productItem, merchantItem } = this.state;
    const { pid } = productItem;
    const { id } = merchantItem;
    if (!pid) {
      Message.error('请选择要上架的套餐包!');
      return;
    }
    if (!id) {
      Message.error('请选择要上架的渠道!');
      return;
    }
    this.props.dispatch({
      type: 'shelves/createItem',
      payload: {
        pid,
        merchantId: id,
        status: Hotax.STATUS_NORMAL,
      },
      states: this.props.location.state,
    });
  };

  render() {
    const { submitting, pLoading, mLoading, merchant, product } = this.props;
    const {
      productSelectorDestroy, merchantSelectorDestroy, productItem, merchantItem,
    } = this.state;

    // format selected data
    const productItemFormatter = () => {
      const { code, name, status } = productItem;
      return [{
        key: '套餐包编号:',
        value: code,
      }, {
        key: '套餐包名称:',
        value: name,
      }, {
        key: '套餐包状态:',
        value: statusCodeToName(status),
      }];
    };
    const merchantItemFormatter = () => {
      const { code, name, status, simple, contactName, mobile, domain } = merchantItem;
      return [{
        key: '商户编号:',
        value: code,
      }, {
        key: '商户名称:',
        value: name,
      }, {
        key: '商户简称:',
        value: simple,
      }, {
        key: '商户类型:',
        value: renderCategory(domain),
      }, {
        key: '商户联系人:',
        value: contactName,
      }, {
        key: '联系人电话:',
        value: mobile,
      }, {
        key: '商户状态:',
        value: statusCodeToName(status),
      }];
    };

    // table columns
    const columns = [{
      title: '字段名',
      key: 1,
      dataIndex: 'key',
      width: '15%',
    }, {
      title: '字段值',
      key: 2,
      dataIndex: 'value',
      width: '65%',
    }];

    // render modal selector
    const getProductModal = () => {
      return (
        <Modal
          visible
          width={900}
          footer={null}
          title="套餐包列表"
          maskClosable={false}
          onCancel={this.handleProductSelectorCancel}
        >
          <Selector
            multiple={false}
            loading={pLoading}
            selectorName="Course"
            list={product.list}
            pageNo={product.pageNo}
            pageSize={product.pageSize}
            totalSize={product.totalSize}
            onCancel={this.handleProductSelectorCancel}
            onChange={this.handleProductSelectorChange}
            onFinish={this.handleProductSelectorFinish}
          />
        </Modal>
      );
    };
    const getMerchantModal = () => {
      return (
        <Modal
          visible
          width={1100}
          footer={null}
          title="商户列表"
          maskClosable={false}
          onCancel={this.handleMerchantSelectorCancel}
        >
          <Selector
            multiple={false}
            loading={mLoading}
            selectorName="Merchant"
            list={merchant.list}
            pageNo={merchant.pageNo}
            pageSize={merchant.pageSize}
            totalSize={merchant.totalSize}
            onCancel={this.handleMerchantSelectorCancel}
            onChange={this.handleMerchantSelectorChange}
            onFinish={this.handleMerchantSelectorFinish}
          />
        </Modal>
      );
    };

    // render card title
    const renderProductCardName = () => {
      return (
        <div className={styles.cardName}>
          <span>
            <a onClick={this.handleProductSelectorModalShow}>
              选择套餐包
            </a>
          </span>
        </div>
      );
    };
    const renderMerchantCardName = () => {
      return (
        <div className={styles.cardName}>
          <span>
            <a onClick={this.handleMerchantSelectorModalShow}>
              选择商户
            </a>
          </span>
        </div>
      );
    };

    return (
      <div>
        {/* 产品选择Card */}
        <Card title={renderProductCardName()} style={{ marginBottom: 16 }}>
          <Table
            bordered
            showHeader={false}
            pagination={false}
            columns={columns}
            className={styles.table}
            dataSource={productItemFormatter()}
          />
          {!productSelectorDestroy && getProductModal()}
        </Card>
        {/* 渠道选择Card */}
        <Card title={renderMerchantCardName()} style={{ marginBottom: 70 }}>
          <Table
            bordered
            showHeader={false}
            pagination={false}
            columns={columns}
            className={styles.table}
            dataSource={merchantItemFormatter()}
          />
          {!merchantSelectorDestroy && getMerchantModal()}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={this.handlePageBack}
            style={{ marginRight: 10 }}
          >取消
          </Button>
          <Button
            type="primary"
            loading={submitting}
            onClick={this.handlePageSubmit}
          >提交
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}