import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import { timeRange } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserTable from '../../../components/UserTable';
import UserAction from '../../../components/UserAction';
import UserPagination from '../../../components/UserPagination';
import menu, { refreshQuestionType, refreshStruct } from '../index';
import Tabs from '../../../components/Tabs';
import { TimeRange } from '../../../../Constant';
import { My } from '../../../stores/my';
import { OpenText } from '../../../components/Open';
const columns = [
{
key: 'title',
title: '笔记对象',
width: 140,
render(text, row) {
return row.group ? (
<div className="group">
<Link to="">{text}</Link>
</div>
) : (
<div className="sub">{text}</div>
);
},
},
{
key: 'date',
title: '更新时间',
width: 100,
render(text, row) {
return row.group ? (
<div className="group">
<Link to="">{text}</Link>
</div>
) : (
<div className="sub">
<div className="date">{text.split(' ')[0]}</div>
<div className="date">{text.split(' ')[1]}</div>
</div>
);
},
},
{
key: 'content',
title: '内容',
width: 540,
render(text, row) {
return row.group ? (
<div className="group">
<Link to="">{text}</Link>
</div>
) : (
<OpenText>{text}</OpenText>
);
},
},
];
export default class extends Page {
constructor(props) {
props.size = 10;
super(props);
}
initState() {
return {
filterMap: {},
sortMap: {},
data: [
{
group: true,
title: '语法',
date: ' OG18 #678',
content: '「图形」None of the attempts to specify the causes of crime explains why most of the p',
list: [
{
title: '题目',
date: '2019-07-23 15:20:21',
content:
'从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
},
{
title: '官方解析',
date: '2019-07-23 15:20:21',
content:
'从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
},
],
},
{
group: true,
title: '语法',
date: ' OG18 #678',
content: '「图形」None of the attempts to specify the causes of crime explains why most of the p',
list: [
{
title: '题目',
date: '2019-07-23 15:20:21',
content:
'从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
},
{
title: '官方解析',
date: '2019-07-23 15:20:21',
content:
'从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
},
],
},
],
selectList: [],
allChecked: false,
tab: 'exercise',
timerange: 'today',
};
}
initData() {
const data = Object.assign(this.state, this.state.search);
data.filterMap = this.state.search;
if (data.order) {
data.sortMap = { [data.order]: data.direction };
}
if (data.timerange) {
data.filterMap.timerange = data.timerange;
}
const [startTime, endTime] = timeRange(data.timerange);
refreshQuestionType(this, data.subject, data.questionType, {
all: true,
needSentence: false,
allSubject: true,
}).then(({ questionTypes }) => {
return refreshStruct(this, data.tab, data.one, data.two, {
all: true,
needPreview: false,
needTextbook: false,
}).then(({ structIds, latest, year }) => {
My.listQuestionNote(
Object.assign(
{ module: data.tab, questionTypes, structIds, latest, year, startTime, endTime },
this.state.search,
{
order: Object.keys(data.sortMap)
.map(key => {
return `${key} ${data.sortMap[key]}`;
})
.join(','),
},
),
).then(result => {
this.setState({ list: result.list, total: result.total, page: data.page });
});
});
});
}
onTabChange(tab) {
const data = { tab };
this.refreshQuery(data);
}
onFilter(value) {
this.search(value);
}
onSort(value) {
const keys = Object.keys(value);
// this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
const { sortMap } = this.state;
const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null });
}
onChangePage(page) {
this.search({ page });
}
onAll(checked) {
if (checked) {
const { data = [] } = this.state;
const list = [];
data.forEach(item => {
list.push(item.key);
});
this.setState({ selectList: list, allChecked: true });
} else {
this.setState({ selectList: [], allChecked: false });
}
}
onAction() {}
onSelect(selectList) {
this.setState({ selectList });
}
renderView() {
const { config } = this.props;
return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
}
renderTable() {
const {
tab,
questionSubjectSelect,
questionSubjectMap = {},
oneSelect,
twoSelectMap = {},
filterMap = {},
sortMap = {},
list = [],
} = this.state;
const { selectList = [], allChecked, page, total } = this.state;
return (
<div className="table-layout">
<Tabs
border
type="division"
theme="theme"
size="small"
space={2.5}
width={100}
active={tab}
tabs={[{ key: 'exercise', title: '练习' }, { key: 'examination', title: '模考' }]}
onChange={key => this.onTabChange(key)}
/>
<UserAction
search
selectList={[
{
children: [
{
key: 'subject',
placeholder: '学科',
select: questionSubjectSelect,
},
{
placeholder: '题型',
key: 'questionType',
be: 'subject',
selectMap: questionSubjectMap,
},
],
},
{
label: '范围',
children: [
{
key: 'one',
placeholder: '全部',
select: oneSelect,
},
{
key: 'two',
be: 'one',
placeholder: '全部',
selectMap: twoSelectMap,
},
],
},
{
right: true,
key: 'timerange',
select: TimeRange,
},
]}
filterMap={filterMap}
onFilter={value => this.onFilter(value)}
/>
<UserAction
allCheckbox
allChecked={allChecked}
help
btnList={[{ title: '删除', key: 'remove' }, { title: '导出', key: 'export', tag: 'vip' }]}
sortList={[{ right: true, label: '更新时间', key: 'update_time' }]}
sortMap={sortMap}
onSort={value => this.onSort(value)}
onAll={checked => this.onAll(checked)}
onAction={key => this.onAction(key)}
/>
{list.map((item, index) => {
return (
<div className="group">
<UserTable
theme="dark"
border={false}
size="small"
select
selectList={selectList}
columns={columns}
data={[item]}
header={false}
/>
<UserTable
border={false}
size="small"
select
even="default"
selectList={selectList}
columns={columns}
data={item.list}
header={index === 0}
/>
</div>
);
})}
{total && list.length > 0 && (
<UserPagination total={total} current={page} onChange={p => this.onChangePage(p)} />
)}
</div>
);
}
}