import React, { Component } from 'react';
import { Card, Modal, Form, Button, Tag, Icon } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import TableForm from './TableForm';
import FooterToolbar from '../../../components/FooterToolbar';
import Selector from '../../../components/AXTableSelector/Selector';
import { addRowKey } from '../../../utils/utils';
import { Hotax } from '../../../utils/config';

@connect(({ loading, shelves, tag }) => ({
  tag,
  shelves,
  tLoading: loading.models.tag,
  submitting: loading.models.shelves,
}))
@Form.create()
export default class PackageEdit extends Component {
  constructor(props) {
    super(props);
    const { location } = props;
    const { state } = location;
    const { merchantId, pid, productType } = state;
    this.state = {
      pid,
      merchantId,
      productType,
      tagSelectorDestroy: true,
    };
  }
  componentDidMount() {
    const { merchantId, pid } = this.state;
    this.props.dispatch({
      type: 'shelves/fetchItemDetail',
      payload: {
        pid,
        merchantId,
      },
    });
  }
  handleGoodsCreate=(data) => {
    const { pid, merchantId } = this.state;
    this.props.dispatch({
      type: 'shelves/createItemPrice',
      payload: {
        ...data,
        ...this.state,
        productType: Hotax.PRODUCT_PACKAGE,
        status: Hotax.STATUS_NORMAL,
      },
      states: {
        pid,
        merchantId,
      },
    });
  };
  handleGoodsUpdate=(data) => {
    const { pid, merchantId } = this.state;
    this.props.dispatch({
      type: 'shelves/updateItemPrice',
      payload: {
        ...data,
        ...this.state,
      },
      states: {
        pid,
        merchantId,
      },
    });
  };
  handleGoodsDelete=(data) => {
    const { pid, merchantId } = this.state;
    this.props.dispatch({
      type: 'shelves/deleteItemPrice',
      payload: data,
      states: {
        pid,
        merchantId,
      },
    });
  };
  handleTagClose=(index) => {
    const { pid, merchantId } = this.state;
    const { shelves } = this.props;
    const { currentItem } = shelves;
    const { tags } = currentItem;
    const newTags = tags.filter((item, location) => location !== index);
    const newTagIds = newTags.map(item => item.id);
    this.props.dispatch({
      type: 'shelves/updateItemTags',
      payload: {
        pid,
        merchantId,
        tags: newTagIds,
      },
      states: {
        pid,
        merchantId,
      },
    });
  };
  handleTagSelectorModalShow = () => {
    this.setState({
      tagSelectorDestroy: false,
    });
    const { merchantId } = this.state;
    this.props.dispatch({
      type: 'tag/fetchTagList',
      payload: { merchantId },
    });
  };
  handleTagSelectorCancel = () => {
    this.setState({
      tagSelectorDestroy: true,
    });
  };
  handleTagSelectorChange = (params) => {
    const { merchantId } = this.state;
    this.props.dispatch({
      type: 'tag/fetchTagList',
      payload: { merchantId, ...params },
    });
  };
  handleTagSelectorFinish = (rows) => {
    const { pid, merchantId } = this.state;
    const newTagIds = (rows || []).map(row => row.id);
    this.props.dispatch({
      type: 'shelves/updateItemTags',
      payload: {
        pid,
        merchantId,
        tags: newTagIds,
      },
      states: {
        pid,
        merchantId,
      },
    });
    this.setState({
      tagSelectorDestroy: true,
    });
  };
  handlePageBack=() => {
    this.props.dispatch(routerRedux.push({
      pathname: '/shelves/package',
      state: this.props.location.state,
    }));
  };
  render() {
    const { tagSelectorDestroy } = this.state;
    const { submitting, tLoading, shelves, tag, form } = this.props;
    const { getFieldDecorator } = form;
    const { currentItem } = shelves;
    const { goods, tags } = currentItem;

    return (
      <div>
        <Card title="价格管理" style={{ marginBottom: 16 }}>
          {getFieldDecorator('goods', {
            initialValue: addRowKey(goods),
          })(
            <TableForm
              loading={submitting}
              onCreate={this.handleGoodsCreate}
              onUpdate={this.handleGoodsUpdate}
              onDelete={this.handleGoodsDelete}
            />
          )}
        </Card>
        <Card title="栏目管理" style={{ marginBottom: 70 }}>
          {tags && tags.map((item, index) => (
            <Tag
              closable
              afterClose={() => this.handleTagClose(index)}
              color="#87d068"
              key={item.id}
            >
              {item.name}
            </Tag>
          ))}
          <Tag
            style={{ borderStyle: 'dashed' }}
            onClick={this.handleTagSelectorModalShow}
          >
            <Icon type="plus" />添加栏目
          </Tag>
          {!tagSelectorDestroy && (
            <Modal
              width={1100}
              footer={null}
              visible
              title="标签列表"
              maskClosable={false}
              onCancel={this.handleMerchantSelectorCancel}
            >
              <Selector
                multiple
                loading={tLoading}
                selectorName="Tag"
                list={tag.list}
                pageNo={tag.pageNo}
                pageSize={tag.pageSize}
                totalSize={tag.totalSize}
                selectedRows={tags}
                onCancel={this.handleTagSelectorCancel}
                onChange={this.handleTagSelectorChange}
                onFinish={this.handleTagSelectorFinish}
              />
            </Modal>
          )}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            type="primary"
            onClick={this.handlePageBack}
            style={{ marginRight: 10 }}
          >返回上一页
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}