import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Table, Form, Spin, Input, Button, Icon } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ProductSelectModal from './product';

@Form.create()
@connect(state => ({
  comboDetail: state.comboDetail,
  product: state.product,
}))
export default class PackageProfile extends PureComponent {

  handleEditProuctClick = () => {
    this.props.dispatch({ type: 'comboDetail/showModal' });
    this.props.dispatch({ type: 'product/query' });
  }

  handleProductModalOk = () => {

  }

  handleProductModalCancel = () => {
    this.props.dispatch({ type: 'comboDetail/hideModal' });
  }

  handleProductModalSearch = () => {

  }

  handleProductModalTableChange = () => {

  }

  render() {
    const { form, comboDetail, product } = this.props;
    const { modalShow, currentItem, itemLoading } = comboDetail;
    const { list, listLoading, pagination } = product;
    const { products } = currentItem;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const tableFormLayout = {
      wrapperCol: { offset: 7, span: 12 },
    };

    const columns = [{
      title: '产品封面',
      dataIndex: 'coverUrl',
      key: 'coverUrl',
      render: (text, record) => {},
    },{
      title: '产品编号',
      dataIndex: 'code',
      key: 'code',
    },{
      title: '产品名称',
      dataIndex: 'name',
      key: 'name',
    },{
      title: '供应商',
      dataIndex: 'cpName',
      key: 'cpName',
    },{
      title: '供应商价格',
      dataIndex: 'cpPrice',
      key: 'cpPrice',
    }];

    return (
      <PageHeaderLayout>
        <Spin spinning={itemLoading}>
          <Card>
            <Form layout="horizontal">
              <Form.Item label="产品包编号" { ...formItemLayout }>
                {getFieldDecorator('code', {
                  rules: [{ required: true, type: 'string', message: '编号为必填项!' }],
                })(<Input placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="产品包名称" { ...formItemLayout }>
                {getFieldDecorator('name', {
                  rules: [{ required: true, type: 'string', message: '名称为必填项!' }],
                })(<Input placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="选择产品" { ...formItemLayout }>
                <Button onClick={this.handleEditProuctClick} type="primary" size="small" icon="select">选择</Button>
              </Form.Item>
              <Form.Item { ...tableFormLayout }>
                <Table
                  simple
                  bordered
                  columns={columns}
                  dataSource={[]}
                  pagination={false}
                  rowKey={record => record.id}
                  locale={{
                    emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
                      该产品包内暂无相关产品，请选择!</span>
                  }}
                />
              </Form.Item>
              <Form.Item { ...submitFormLayout } style={{ marginTop: 32 }}>
                <Button onClick={this.handlePageCancel}>取消</Button>
                <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
              </Form.Item>
            </Form>
            {/*产品选择模态框*/}
            <ProductSelectModal
              rowKeyName="id"
              modalVisible={modalShow}
              selTableData={products || []}
              style={{ top: 20 }}
              fsTableDataSource={list}
              fsTableLoading={listLoading}
              fsTablePagination={pagination}
              onOk={this.handleProductModalOk}
              onCancel={this.handleProductModalCancel}
              onSearch={this.handleProductModalSearch}
              fsTableOnChange={this.handleProductModalTableChange}
            />
          </Card>
        </Spin>
      </PageHeaderLayout>
    );
  }
}