Hotax/src/routes/Frontend/Personalize/PersonalizeEdit.js

/* eslint-disable no-trailing-spaces */
import React, { Component } from 'react';
import pathToRegexp from 'path-to-regexp';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Card, Table, Modal, Form, Tooltip, Popconfirm, Switch, Button, Input } from 'antd';
import Selector from '../../../components/AXTableSelector/Selector';
import AXDragSortTable from '../../../components/AXDragSortTable';
import FooterToolbar from '../../../components/FooterToolbar';
import { renderStatus, statusToBool, boolToStatus, renderProductType } from '../../../utils/utils';
import { Hotax } from '../../../utils/config';
import styles from './PersonalizeEdit.less';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
    md: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
    md: { span: 22 },
  },
};

@Form.create()
@connect(({ loading, terminal, shelves, tagType, tag }) => ({
  tag,
  shelves,
  terminal,
  tagType,
  loading,
  sLoading: loading.models.shelves,
  tLoading: loading.models.tagType,
  mtLoading: loading.models.tag,
}))
export default class PersonalizeEditPage extends Component {
  constructor(props) {
    super(props);
    const { location } = props;
    const { state } = location;
    const match = pathToRegexp('/frontend/personalize/edit/:id').exec(location.pathname);
    this.state = {
      uid: match[1],
      mid: state.merchantId,
      tagModalDestroy: true,
      tagModalName: '新建用户标签',
      tagTypeSelecting: false, // 标签类型处于选择状态
      recModalDestroy: true,
      productSelecting: false, // 产品处于选择状态
      merchantTagModalDestroy: true,
      targetRow: {},
    };
  }
  componentDidMount() {
    // 加载用户标签数据
    this.props.dispatch({
      type: 'terminal/fetchTerminalTagList',
      payload: { uid: this.state.uid },
    });
    // 加载用户推荐课程
    this.props.dispatch({
      type: 'terminal/fetchTerminalRecommendCourse',
      payload: { uid: this.state.uid },
    });
    // 加载全部
    this.props.dispatch({
      type: 'tagType/fetchTagTypeList',
      payload: { pageSize: 1000 },
    });
  }

  /**
   * 用户标签创建/编辑模态框展现及数据加载控制
   * @param userTagId
   */
  handleUserTagModalShow = (userTagId) => {
    // 展现模态框前清空下currentUserTagItem内容
    this.props.dispatch({
      type: 'terminal/resetUserTagItem',
    });
    // 展现模态框
    this.setState({ tagModalDestroy: false });
    // 如果编辑标签则发获取详情请求
    if (userTagId) {
      this.props.dispatch({
        type: 'terminal/fetchTerminalTagItem',
        payload: { userTagId },
      });
      this.setState({ tagModalName: '编辑用户标签' });
    }
  };
  /**
   * 用户推荐课程模态框的展现
   */
  handleUserRecModalShow = () => {
    this.setState({ recModalDestroy: false });
  };
  handleMerchantTagModalShow = (record) => {
    this.setState({
      targetRow: record,
      merchantTagModalDestroy: false,
    });
    this.props.dispatch({
      type: 'tag/fetchTagList',
      payload: { merchantId: this.state.mid },
    });
  };
  /**
   * 模态框的取消操作
   * @param modalName
   */
  handleModalHide = (modalName) => {
    this.setState({ [modalName]: true });
  };
  /**
   * 用户标签内卡片切换操作
   * @param name
   */
  handleCardSwitch = (name) => {
    if (name === 'tagType') {
      this.props.dispatch({
        type: 'tagType/fetchTagTypeList',
        payload: {},
      });
      this.setState({ tagTypeSelecting: true });
    }
    if (name === 'product') {
      this.props.dispatch({
        type: 'shelves/fetchItemList',
        payload: { merchantId: this.state.mid },
      });
      this.setState({ productSelecting: true });
    }
    if (name === 'course') {
      this.props.dispatch({
        type: 'shelves/fetchCourseItemList',
        payload: { merchantId: this.state.mid },
      });
      this.setState({ productSelecting: true });
    }
  };
  /**
   * 标签类型/关联产品取消选择操作
   * @param name
   */
  handleSelectingCardCancel = (name) => {
    if (name === 'tagType') {
      this.setState({ tagTypeSelecting: false });
    }
    if (name === 'product' || name === 'course') {
      this.setState({ productSelecting: false });
    }
  };
  /**
   * 标签类型/关联产品筛选操作
   * @param name
   * @param data
   */
  handleSelectingCardChange = (name, data) => {
    if (name === 'tagType') {
      this.props.dispatch({
        type: 'tagType/fetchTagTypeList',
        payload: data,
      });
    }
    if (name === 'product') {
      this.props.dispatch({
        type: 'shelves/fetchItemList',
        payload: { merchantId: this.state.mid, ...data },
      });
    }
    if (name === 'course') {
      this.props.dispatch({
        type: 'shelves/fetchCourseItemList',
        payload: { merchantId: this.state.mid, ...data },
      });
    }
    if (name === 'tag') {
      this.props.dispatch({
        type: 'tag/fetchTagList',
        payload: { merchantId: this.state.uid, ...data },
      });
    }
  };
  /**
   * 标签类型/关联产品完成操作
   * @param cardName
   * @param data
   */
  handleSelectingCardFinish = (cardName, data) => {
    if (cardName === 'tagType') {
      const tagType = data[0] || {};
      const { code, name } = tagType;
      this.props.dispatch({
        type: 'terminal/fixCurrentUserTagItem',
        payload: {
          typeCode: code,
          typeName: name,
        },
      });
      this.setState({ tagTypeSelecting: false });
    }
    if (cardName === 'product') {
      this.props.dispatch({
        type: 'terminal/fixCurrentUserTagItem',
        payload: { productList: data },
      });
      this.setState({ productSelecting: false });
    }
    if (cardName === 'course') {
      this.props.dispatch({
        type: 'terminal/fixUserRecCourse',
        payload: (data || []).slice(0, 5),
      });
      this.setState({ productSelecting: false });
    }
  };
  /**
   * 用户标签内关联产品/推荐课程排序操作
   * @param rows
   * @param tabName
   */
  handleDragSortTableChange = (rows, tabName) => {
    if (tabName === 'tag') {
      this.props.dispatch({
        type: 'terminal/fixCurrentUserTagItem',
        payload: { productList: rows },
      });
    }
    if (tabName === 'rec') {
      this.props.dispatch({
        type: 'terminal/fixUserRecCourse',
        payload: rows,
      });
    }
  };
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/frontend/personalize/list',
      state: this.props.location.state,
    }));
  };
  handleUserTagSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { sort, name, status } = values;
        const { uid } = this.state;
        const { terminal } = this.props;
        const { currentUserTagItem } = terminal;
        const { id, typeCode, productList } = currentUserTagItem;
        const pidList = (productList || []).map(product => product.pid);
        const newStatus = boolToStatus(status);
        if (!id) {
          this.props.dispatch({
            type: 'terminal/createTerminalTagItem',
            payload: { sort, uid, name, typeCode, status: newStatus, productList: pidList },
          });
        } else {
          this.props.dispatch({
            type: 'terminal/updateTerminalTagItem',
            payload: { id, sort, uid, name, typeCode, status: newStatus, productList: pidList },
          });
        }
        this.setState({ tagModalDestroy: true });
      }
    });
  };
  handleUserTagCopyOperation = (data) => {
    const { targetRow } = this.state;
    const merchantTag = (data || [])[0] || {};
    this.props.dispatch({
      type: 'terminal/copyMerchantTagToUser',
      payload: { uid: this.state.uid, userTagId: targetRow.id, tagId: merchantTag.id },
    });
    this.setState({ merchantTagModalDestroy: true });
  };
  handleUserTagDelete = (userTagId) => {
    this.props.dispatch({
      type: 'terminal/deleteTerminalTagItem',
      payload: { uid: this.state.uid, userTagId },
    });
  };
  handleUserRecCourseSubmit = () => {
    const { uid } = this.state;
    const { terminal } = this.props;
    const { userRecCourse } = terminal;
    const idList = (userRecCourse || []).map(product => product.pid);
    this.props.dispatch({
      type: 'terminal/updateTerminalRecommendCourse',
      payload: { uid, idList },
    });
    this.setState({ recModalDestroy: true });
  };
  render() {
    const {
      tagModalDestroy,
      tagModalName,
      tagTypeSelecting,
      productSelecting,
      recModalDestroy,
      merchantTagModalDestroy,
    } = this.state;
    const {
      sLoading, tLoading, mtLoading, loading, terminal, shelves, tagType, tag, form,
    } = this.props;
    const { getFieldDecorator } = form;
    const { userTagList, userRecCourse, currentUserTagItem } = terminal;
    const { sort, name, status, productList, typeCode, typeName } = currentUserTagItem;

    // 用户标签列表表头
    const tagColumns = [{
      title: '标签位置',
      dataIndex: 'sort',
      width: '10%',
    }, {
      title: '标签名称',
      dataIndex: 'name',
      width: '25%',
    }, {
      title: '标签类型',
      dataIndex: 'typeCode',
      width: '25%',
      filters: (tagType.list || []).map(item => ({ text: item.name, value: item.code })),
      onFilter: (value, record) => record.typeCode.indexOf(value) === 0,
    }, {
      title: '标签状态',
      dataIndex: 'status',
      width: '15%',
      render: text => renderStatus(text),
      filters: [{
        text: '正常',
        value: Hotax.STATUS_NORMAL,
      }, {
        text: '删除',
        value: Hotax.STATUS_DELETE,
      }],
      onFilter: (value, record) => record.status === value,
      align: 'center',
    }, {
      title: '操作',
      width: '25%',
      align: 'right',
      render: (_, record) => (
        <div>
          <Button
            size="small"
            className="editBtn"
            onClick={() => this.handleUserTagModalShow(record.id)}
          >编辑
          </Button>
          <Tooltip title="复制渠道标签进行关联产品">
            <Button
              size="small"
              className="recBtn"
              onClick={() => this.handleMerchantTagModalShow(record)}
            >复制
            </Button>
          </Tooltip>
          <Popconfirm
            placement="top"
            title="确定要删除该用户标签？"
            okText="确定"
            cancelText="取消"
            onConfirm={() => this.handleUserTagDelete(record.id)}
          >
            <Button
              size="small"
              className="delBtn"
            >删除
            </Button>
          </Popconfirm>
        </div>
      ),
    }];
    // 推荐课程
    const courseColumns = [{
      title: '课程编号',
      dataIndex: 'code',
      key: 1,
      width: '40%',
    }, {
      title: '课程名称',
      dataIndex: 'name',
      key: 2,
      width: '40%',
    }, {
      title: '课程状态',
      dataIndex: 'status',
      key: 3,
      render: text => renderStatus(text),
      width: '20%',
    }];

    /* ************************ modal1: 用户标签创建 ************************* */
    const getTagCreateModal = () => {
      const tagTypeColumns = [{
        title: '标签类型编号',
        dataIndex: 'code',
        key: 1,
        width: '50%',
      }, {
        title: '标签类型名称',
        dataIndex: 'name',
        key: 2,
        width: '50%',
      }];
      const tagTypeData = typeCode ? [{ key: 'row-1', name: typeName || '-', code: typeCode }] : undefined;
      const tagTypeSelectCard = (
        <Card title="选择标签类型">
          <Selector
            multiple={false}
            loading={tLoading}
            selectorName="TagType"
            list={tagType.list}
            pageNo={tagType.pageNo}
            pageSize={tagType.pageSize}
            totalSize={tagType.totalSize}
            onCancel={() => this.handleSelectingCardCancel('tagType')}
            onChange={data => this.handleSelectingCardChange('tagType', data)}
            onFinish={data => this.handleSelectingCardFinish('tagType', data)}
          />
        </Card>
      );
      const tagTypeShowCard = (
        <Card title="标签类型信息">
          <Table
            pagination={false}
            dataSource={tagTypeData}
            columns={tagTypeColumns}
            className={styles.tagTable}
            onChange={this.handleUserTagTableChange}
          />
        </Card>
      );
      const productColumns = [{
        title: '产品编号',
        dataIndex: 'code',
        key: 1,
        width: '20%',
      }, {
        title: '产品名称',
        dataIndex: 'name',
        key: 2,
        width: '30%',
      }, {
        title: '产品类型',
        dataIndex: 'type',
        key: 3,
        render: text => renderProductType(text),
      }];
      const productSelectCard = (
        <Card title="选择产品">
          <Selector
            multiple
            loading={sLoading}
            selectorName="Product"
            list={shelves.list}
            pageNo={shelves.pageNo}
            pageSize={shelves.pageSize}
            totalSize={shelves.totalSize}
            selectedRows={productList}
            onCancel={() => this.handleSelectingCardCancel('product')}
            onChange={data => this.handleSelectingCardChange('product', data)}
            onFinish={data => this.handleSelectingCardFinish('product', data)}
          />
        </Card>
      );
      const productShowCard = (
        <Card title="已关联产品列表">
          <AXDragSortTable
            data={productList}
            columns={productColumns}
            onChange={rows => this.handleDragSortTableChange(rows, 'tag')}
          />
        </Card>
      );
      return (
        <Modal
          visible
          width={1100}
          title={tagModalName}
          maskClosable={false}
          cancelText="取消"
          okText="提交"
          onCancel={() => this.handleModalHide('tagModalDestroy')}
          onOk={this.handleUserTagSubmit}
        >
          <Form>
            <Form.Item hasFeedback label="标签名称" {...formItemLayout}>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请填写标签名称' }],
                initialValue: name,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label="标签位置" {...formItemLayout}>
              {getFieldDecorator('sort', {
                initialValue: sort,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label="标签类型" {...formItemLayout}>
              <Button
                disabled={tagTypeSelecting}
                type="primary"
                size="small"
                icon="search"
                onClick={() => this.handleCardSwitch('tagType')}
              >选择
              </Button>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 2, span: 22 }}>
              {tagTypeSelecting ? tagTypeSelectCard : tagTypeShowCard}
            </Form.Item>
            <Form.Item label="关联产品" {...formItemLayout}>
              <Button
                disabled={productSelecting}
                type="primary"
                size="small"
                icon="form"
                onClick={() => this.handleCardSwitch('product')}
              >编辑
              </Button>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 2, span: 22 }}>
              {productSelecting ? productSelectCard : productShowCard}
            </Form.Item>
            <Form.Item label="标签状态" {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropName: 'checked',
                initialValue: statusToBool(status),
              })(
                <Switch checkedChildren="正常" unCheckedChildren="删除" />
              )}
            </Form.Item>
          </Form>
        </Modal>
      );
    };

    /* ************************ modal2: 用户推荐课程修改 ************************* */
    const getRecCourseModal = () => {
      const cColumns = [{
        title: '课程编号',
        dataIndex: 'code',
        key: 1,
        width: '30%',
      }, {
        title: '课程名称',
        dataIndex: 'name',
        key: 2,
        width: '30%',
      }];
      const recCourseSelectCard = (
        <Card title="选择课程">
          <Selector
            multiple
            loading={sLoading}
            selectorName="Course"
            list={shelves.list}
            pageNo={shelves.pageNo}
            pageSize={shelves.pageSize}
            totalSize={shelves.totalSize}
            selectedRows={userRecCourse}
            onCancel={() => this.handleSelectingCardCancel('course')}
            onChange={data => this.handleSelectingCardChange('course', data)}
            onFinish={data => this.handleSelectingCardFinish('course', data)}
          />
        </Card>
      );
      const recCourseShowCard = (
        <Card title="推荐课程列表">
          <AXDragSortTable
            data={userRecCourse}
            columns={cColumns}
            onChange={rows => this.handleDragSortTableChange(rows, 'rec')}
          />
        </Card>
      );
      return (
        <Modal
          visible
          width={1100}
          title="用户推荐课程"
          maskClosable={false}
          cancelText="取消"
          okText="提交"
          onCancel={() => this.handleModalHide('recModalDestroy')}
          onOk={this.handleUserRecCourseSubmit}
        >
          <Form>
            <Form.Item label="推荐课程" {...formItemLayout}>
              <Button
                disabled={productSelecting}
                type="primary"
                size="small"
                icon="search"
                onClick={() => this.handleCardSwitch('course')}
              >选择
              </Button>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 2, span: 22 }}>
              {productSelecting ? recCourseSelectCard : recCourseShowCard}
            </Form.Item>
          </Form>
        </Modal>
      );
    };

    /* ************************ modal3: 渠道标签选择 ************************* */
    const getMerchantTagModal = () => {
      return (
        <Modal
          width={1100}
          footer={null}
          visible
          title="渠道标签列表"
          maskClosable={false}
          onCancel={() => this.handleModalHide('merchantTagModalDestroy')}
        >
          <Selector
            multiple={false}
            loading={mtLoading}
            selectorName="Tag"
            list={tag.list}
            pageNo={tag.pageNo}
            pageSize={tag.pageSize}
            totalSize={tag.totalSize}
            onCancel={() => this.handleModalHide('merchantTagModalDestroy')}
            onChange={data => this.handleSelectingCardChange('tag', data)}
            onFinish={this.handleUserTagCopyOperation}
          />
        </Modal>
      );
    };

    return (
      <div>
        <Card
          title={
            <div>
              用户标签
              <Button onClick={() => this.handleUserTagModalShow()} style={{ float: 'right' }} type="primary">新建标签</Button>
            </div>
          }
          loading={loading.effects['terminal/fetchTerminalTagList']}
          style={{ marginBottom: 16 }}
          className={styles.tagCard}
        >
          <Table
            pagination={{ pageSize: 15 }}
            dataSource={userTagList}
            columns={tagColumns}
            rowKey={record => record.id}
            className={styles.tagTable}
          />
          {!tagModalDestroy && getTagCreateModal()}
          {!merchantTagModalDestroy && getMerchantTagModal()}
        </Card>
        <Card
          title={
            <div>
              推荐课程
              <Button onClick={this.handleUserRecModalShow} style={{ float: 'right' }} type="primary">更换课程</Button>
            </div>
          }
          loading={loading.effects['terminal/fetchTerminalRecommendCourse']}
          style={{ marginBottom: 70 }}
          className={styles.tagCard}
        >
          <Table
            pagination={false}
            dataSource={userRecCourse}
            columns={courseColumns}
            rowKey={record => record.id}
            className={styles.tagTable}
          />
          {!recModalDestroy && getRecCourseModal()}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button type="primary" onClick={this.handlePageBack}>返回上一页</Button>
        </FooterToolbar>
      </div>
    );
  }
}