import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Tabs, WhiteSpace } from 'antd-mobile'
import './index.scss'
import { getParam, http } from "src/utils"
import { Toast } from 'antd-mobile'
import { StickyContainer } from "react-sticky";
import {RenderTabBar} from "src/common";
class OutLine extends Component {
constructor(props) {
super(props)
this.state = {
stageInfo: [],
tab: 0,
}
}
componentDidMount() {
this.getList()
}
htmlDecode = (content) => {
if (content) {
content = content.replace(/</g, '<');
content = content.replace(/>/g, '>');
content = content.replace(/&gt;/g, '');
content = content.replace(/"/g, '"');
content = content.replace(/&nbsp;/g, '');
}
return content;
}
// 获取大纲数据
getList = () => {
http.get(`${API.home}/m/course/syllabuses/${getParam('id')}`).then((res) => {
if (res.data.code === 200) {
this.setState({
stageInfo: res.data.data
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
changeTab = (tab, index) => {
this.setState({
tab: index
})
}
render() {
const tabs = [
{title: '介绍'},
{title: '大纲'}
];
let introduce = ''
if (this.props.data) {
introduce = this.props.data
}
return (
<div className='course-detail'>
<WhiteSpace/>
<StickyContainer>
<Tabs tabs={tabs}
initialPage={0}
swipeable={false}
onTabClick={(tab, index) => this.changeTab(tab, index)}
// renderTabBar={RenderTabBar}
>
</Tabs>
{/*介绍*/}
{
this.state.tab === 0 ? (
<div className='introduce'>
<p>讲师：{introduce.teachers}</p>
<p>课时：{introduce.course_hour}</p>
<p>时间：{introduce.start_time}</p>
<div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div>
</div>
) : null
}
{/*大纲*/}
{
this.state.tab === 1 ? (
<div className='outline'>
{
this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => {
return (
<div className='stagebox' key={index}>
<h1 className='stage text-overflow-1'>{item.stage_name}</h1>
{
item.lesson.map((item, index) => {
return (
<ul key={index}>
<h2 className='classhour'>
<span className='title text-overflow-1'>{item.name}</span>
{/*
class_status
0-未购买未开单集购买
1-未购买已开单集购买
2-已购买直播结束已上传视频
3-已购买未开课、已购买直播结束
4-已购买直播中
5-可试听且有试听权限
6-可试听但无试听权限
7-新试听功能，点击试听跳转播放页
*/}
{ // 试听
!introduce.is_aist && (item.class_status === 6 || item.class_status === 5) &&
<span className='btn-right-10 audition'
onClick={e => this.props.toAudition(introduce.v_course_id, item.video_id)}>试听
<i className='iconfont iconcelluar'></i>
</span>
}
{ // 点击试听跳转播放页
!introduce.is_aist && item.class_status === 7 &&
<Link
to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`}
className='btn-right-10 audition'> <i className='iconfont iconcelluar'></i>试听</Link>
}
{ // 未购买未开单集购买：上锁标志，点击提示购买
!introduce.is_aist && item.class_status === 0 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i>
}
{ // 未购买已开单集购买：显示单集价格，点击购买单集
!introduce.is_aist && item.class_status === 1 &&
<span className='btn-right-10 singleset'
onClick={e => this.props.toSingleset(item)}>¥ {item.class_price}</span>
}
{
!introduce.is_aist && item.class_status === 4 &&
item.video_auth === 1 && item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i
className='iconfont icondanseshixintubiao-23'></i></span>
}
{
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程
!introduce.is_aist && item.class_status === 2 &&
<Link
to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`}
className='iconfont icondanseshixintubiao-23 icon-right-22'></Link>
}
{
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && item.is_open && introduce.is_baoming === 1 &&
<Link
to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`}
className='aist aist_open'></Link>
}
{
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && (!item.is_open || introduce.is_baoming === 0) &&
<i className='aist iconfont iconiconfront-74'></i>
}
</h2>
{
item.point && item.point.length > 0 && item.point.map((item, index) => {
const type = (
<span>
{
item.type === 1 &&
<span>知识点{index + 1}：</span>
}
{
item.type === 2 &&
<span className='red'>实战项目：</span>
}
</span>
)
return (
<li className='points text-overflow-1'
key={index}>{type}{item.name}</li>
)
})
}
{
<>
{
introduce.is_aist && item.practice.title !== "" && (!item.is_open || introduce.is_baoming === 0) &&
<span className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span>
<i className='exam exam_close'/>
</span>
}
{
introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && !item.practice.is_tested &&
<Link to={{
pathname: `/campTest`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {from: `/detail${window.location.search}`}
}} className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span>
</Link>
}
{
introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && item.practice.is_tested &&
<Link to={{
pathname: `/campResolve`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {from: `/detail${window.location.search}`}
}} className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span>
<i className='exam exam_open'/>
</Link>
}
</>
}
</ul>
)
})
}
</div>
)
})
}
</div>
) : null
}
</StickyContainer>
<WhiteSpace/>
</div>
);
}
}
export default OutLine;