import React, { Component } from 'react';
import pathToRegexp from 'path-to-regexp';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Modal, Button } from 'antd';
import RBDragSortTable from '../../../components/RBDragSortTable';
import Selector from '../../../components/RBTableSelector/Selector';
import FooterToolbar from '../../../components/FooterToolbar/index';

@connect(({ loading, merchant, shelves }) => ({
  shelves,
  merchant,
  sLoading: loading.models.product,
  submitting: loading.models.merchant,
}))
export default class RecommendEditPage extends Component {
  state = {
    productSelectorDestroy: true,
  };
  componentDidMount() {
    this.props.dispatch({
      type: 'merchant/queryMerchantRecommend',
      payload: { merchantId: this.getMerchantId() },
    });
  }
  getMerchantId = () => {
    const match = pathToRegexp('/frontend/recommend/edit/:id')
      .exec(this.props.location.pathname);
    return match[1];
  }
  handleSelectorModalShow = () => {
    this.setState({ productSelectorDestroy: false });
    this.props.dispatch({
      type: 'shelves/fetchCourseItemList',
      payload: { merchantId: this.getMerchantId() },
    });
  }
  handleSelectorChange = (params) => {
    this.props.dispatch({
      type: 'shelves/fetchCourseItemList',
      payload: params,
    });
  }
  handleSelectorFinish = (rows) => {
    this.setState({ productSelectorDestroy: true });
    this.props.dispatch({
      type: 'merchant/fixRecommendList',
      payload: rows,
    });
  }
  handleSelectorCancel = () => {
    this.setState({ productSelectorDestroy: true });
  }
  handleDragSortTableChange = (rows) => {
    this.props.dispatch({
      type: 'merchant/fixRecommendList',
      payload: rows,
    });
  }
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/frontend/recommend',
      state: this.props.location.state,
    }));
  }
  handlePageSubmit = () => {
    const { merchant } = this.props;
    const { recommendList } = merchant;
    const idList = recommendList.map(item => item.pid);
    this.props.dispatch({
      type: 'merchant/updateMerchantRecommend',
      payload: {
        idList,
        merchantId: this.getMerchantId(),
      },
    });
  }

  render() {
    const { productSelectorDestroy } = this.state;
    const { merchant, shelves, sLoading, submitting } = this.props;
    const { recommendList } = merchant;
    const productColumns = [{
      title: '课程编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '课程名称',
      key: 2,
      dataIndex: 'name',
    }];
    const getProductModal = () => {
      return (
        <Modal
          visible
          width={1100}
          footer={null}
          title="课程资源"
          maskClosable={false}
          onCancel={this.handleSelectorCancel}
        >
          <Selector
            multiple
            loading={sLoading}
            selectorName="Course"
            selectedRows={recommendList}
            list={shelves.list}
            pageNo={shelves.pageNo}
            pageSize={shelves.pageSize}
            totalSize={shelves.totalSize}
            onCancel={this.handleSelectorCancel}
            onChange={this.handleSelectorChange}
            onFinish={this.handleSelectorFinish}
          />
        </Modal>
      );
    };
    return (
      <div>
        <Card
          title={<a onClick={this.handleSelectorModalShow}>选择课程</a>}
          style={{ marginBottom: 70 }}
        >
          <RBDragSortTable
            columns={productColumns}
            data={recommendList}
            onChange={this.handleDragSortTableChange}
          />
          {!productSelectorDestroy && getProductModal()}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={this.handlePageBack}
            style={{ marginRight: 10 }}
          >取消
          </Button>
          <Button
            type="primary"
            loading={submitting}
            onClick={this.handlePageSubmit}
          >提交
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}