import React, { Component } from 'react';
import pathToRegexp from 'path-to-regexp';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import {
Form, Modal, Card, Button, Input, Switch, Select, Row, Col,
} from 'antd';
import {
renderStatus, statusToBool, boolToStatus, genAbsolutePicUrl,
} from '../../../utils/utils';
import { Hotax } from '../../../utils/config';
import AXDragSortTable from '../../../components/AXDragSortTable';
import Selector from '../../../components/AXTableSelector/Selector';
import FooterToolbar from '../../../components/FooterToolbar';
import styles from './CourseCreate.less';
const fieldLabels = {
code: '课程编号',
title: '课程标题',
subTitle: '课程副标题',
name: '课程全称',
breadCrumb: '顶部导航名',
merchant: '内容提供商',
digest: '课程概要',
detail: '课程详情',
coverUrl: '课程封面图',
bgUrl: '课程背景图',
status: '课程状态',
};
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 3 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
md: { span: 12 },
},
};
@connect(({ loading, product, lesson, resource, merchant }) => ({
lesson,
product,
resource,
merchant,
lLoading: loading.models.lesson,
pLoading: loading.models.product,
rLoading: loading.models.resource,
submitting: loading.models.product,
}))
@Form.create()
export default class CourseItemCreatePage extends Component {
state = {
bgSelectorDestroy: true,
coverSelectorDestroy: true,
lessonSelectorDestroy: true,
supportSelectorDestroy: true,
};
componentWillMount() {
const match = pathToRegexp('/product/course/create').exec(this.props.location.pathname);
if (match) {
this.cleanPageState();
}
}
componentDidMount() {
const matchId = this.isEdit();
if (matchId) {
this.props.dispatch({
type: 'product/fetchProductItem',
payload: { pid: matchId },
});
}
this.props.dispatch({
type: 'merchant/fetchMerchantList',
payload: { pageSize: 1000 }, // TODO 以后商户多了需要改写交互样式
});
}
isEdit = () => {
const { location } = this.props;
const match = pathToRegexp('/product/course/edit/:id').exec(location.pathname);
if (match) {
return match[1];
}
return false;
};
cleanPageState = () => {
this.props.dispatch({
type: 'product/cleanItemState',
payload: {},
});
};
selectorDataFetcher = (name, params) => {
switch (name) {
case 'cover':
this.props.dispatch({
type: 'resource/fetchImageList',
payload: params,
});
break;
case 'bg':
this.props.dispatch({
type: 'resource/fetchImageList',
payload: params,
});
break;
case 'lesson':
this.props.dispatch({
type: 'lesson/fetchLessonList',
payload: params,
});
break;
case 'support':
this.props.dispatch({
type: 'product/fetchSupportList',
payload: params,
});
break;
default:
break;
}
};
currentItemFormatter = (name, rows) => {
let payload;
switch (name) {
case 'cover':
payload = { coverUrl: rows[0].path };
break;
case 'bg':
payload = { bgUrl: rows[0].path };
break;
case 'lesson':
payload = { subItemList: rows };
break;
case 'support':
payload = { supportList: rows };
break;
default:
break;
}
return payload;
};
handleSelectorModalShow = (name) => {
this.setState({
[`${name}SelectorDestroy`]: false,
});
this.selectorDataFetcher(name);
};
handleSelectorChange = (name, params) => {
this.selectorDataFetcher(name, params);
};
handleSelectorFinish = (name, rows) => {
this.setState({
[`${name}SelectorDestroy`]: true,
});
const payload = this.currentItemFormatter(name, rows);
this.props.dispatch({
payload,
type: 'product/fixCurrentItem',
});
};
handleDragSortTableChange = (name, rows) => {
const payload = this.currentItemFormatter(name, rows);
this.props.dispatch({
payload,
type: 'product/fixCurrentItem',
});
};
handleSelectorCancel = (name) => {
this.setState({
[`${name}SelectorDestroy`]: true,
});
};
handlePageBack = () => {
this.props.dispatch(routerRedux.push({
pathname: '/product/course/list',
state: this.props.location.state,
}));
};
handlePageSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
// 提取表单字段
const { title, subTitle, name, status, ...rest } = values;
const newName = `${title}_${subTitle}`;
const newValues = { title, subTitle, name: newName, status: boolToStatus(status), ...rest };
const { product } = this.props;
const { currentItem } = product;
const { bgUrl, coverUrl, subItemList, supportList } = currentItem;
// 构造subList,supportIdList
let subList;
let supportIdList;
if (subItemList) {
subList = subItemList.map(
item => ({ id: item.id, type: Hotax.PRODUCT_LESSON })
);
}
if (supportList) {
supportIdList = supportList.map(item => item.id);
}
const matchId = this.isEdit();
if (matchId) {
const params = {
bgUrl,
coverUrl,
id: matchId,
subItemList: subList,
supportList: supportIdList,
...newValues,
};
this.props.dispatch({
type: 'product/updateCourseItem',
payload: params,
states: this.props.location.state,
});
} else {
const params = {
bgUrl,
coverUrl,
subItemList: subList,
supportList: supportIdList,
...newValues,
};
this.props.dispatch({
type: 'product/createCourseItem',
payload: params,
states: this.props.location.state,
});
}
}
});
};
render() {
const {
form, submitting, rLoading, lLoading, pLoading, lesson, product, resource, merchant,
} = this.props;
const {
lessonSelectorDestroy, supportSelectorDestroy, coverSelectorDestroy, bgSelectorDestroy,
} = this.state;
const { currentItem } = product;
const {
code, title, subTitle, name, digest, detail, status, coverUrl, bgUrl, cpId,
breadCrumb, subItemList = [], supportList = [],
} = currentItem;
const { getFieldDecorator } = form;
const lessonColumns = [{
title: '课编号',
dataIndex: 'code',
key: 1,
width: '20%',
render: (text, record) => (
{text}
),
}, {
title: '课名称',
dataIndex: 'title',
key: 2,
width: '30%',
render: (text, record) => (
{text}
),
}, {
title: '状态',
dataIndex: 'status',
key: 3,
render: text => renderStatus(text),
}];
const supportColumns = [{
title: '配套编号',
dataIndex: 'code',
key: 1,
width: '20%',
render: (text, record) => (
{text}
),
}, {
title: '配套名称',
dataIndex: 'name',
key: 2,
width: '30%',
render: (text, record) => (
{text}
),
}, {
title: '配套状态',
dataIndex: 'status',
key: 3,
render: text => renderStatus(text),
}];
const getMerchants = () => {
const { list } = merchant;
return list.map(item => ({
text: item.name,
key: item.id,
}));
};
const getResourceModal = (isCover) => {
return (