import React, { Component } from 'react';
import { connect } from "react-redux";
import './videoList.css'
const mapStateToProps = (state) => ({

});

const mapDispatchToProps = (dispatch) => ({

});

class VideoListViews extends Component {
    /*
    * 构造函数
    *
    * */
    constructor() {
        super();
        this.state = {
            subject:1,
            list:[{}],
            configList: [{
                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu1jiao.png',
                title: "科目一",
                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu1Bg.png"
            }, {
                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu2jiao.png',
                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu2Bg.png",
                title: "科目二"
            }, {
                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu3jiao.png',
                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu3Bg.png",
                title: "科目三"
            }, {
                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu4jiao.png',
                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu4Bg.png",
                title: "科目四"
            }]

        };
    }




    /*
    *
    * 生命周期一
    *
    * */
    componentWillMount() {
        /*
        *
        * 如果是ios设备默认第一次不是播放状态，android没事
        *
        * */


        /*
        *
        *  请求数据
        *
        *
        * */

    }



    /*
    *
    * 生命周期二
    *
    * */
    componentDidMount() {
       let query= new URLSearchParams(window.location.search);
       console.log(query)
       this.setState({
        subject:query.get('subject')||1
       })
    }

    /*
    * 渲染
    * */
    render() {
        return (
            <div className="container">
                <div className="list">

                    <div className="list-title">书籍视频解说</div>
                    {
                        this.state.list.map((item, index) => {
                            return (<a key={index} href={'https://mp.weixin.qq.com/s?__biz=Mzg2OTkwMDU0OA==&mid=2247483656&idx=1&sn=61381ded69ebe20d8c0fedc7e77ee0ce&chksm=ce974963f9e0c075bb209fde63d128a97936eb65694d373853c6352584acc645085f42f7b9d5#rd'}>
                                <div className='list-item'>
                                    <img className='list-item-jiao' alt='' src={this.state.configList[this.state.subject-1].jiao} />
                                    <img className='list-item-play' alt='' src='https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/play.png' />
                                    <img style={{width:'100%'}} alt='' src={this.state.configList[this.state.subject-1].bg} />
                                    <div className='list-item-name'>ABS题</div>
                                </div>


                            </a>)
                        })

                    }
                </div>
            </div>

        )
    }

    componentWillUnmount() {

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(VideoListViews);