import React, {Component} from 'react'
import {http, getParam, browser, SendMessageToApp} from '@/utils'
import PythonDes from './pythomDes'
import PythonStudy from './pythonStudy'
import {connect} from "react-redux"
import {addDays} from "date-fns"
import cookie from "js-cookie"
import {setCurrentUser, startFetchUser} from "@/store/userAction"


@connect(state => ({
        user: state.user
    }),
    {setCurrentUser, startFetchUser}
)
class Python extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isPay: '',
            userInfoList: [],
            isAppUpdate: false,
            backwardVersion: false, // 默认是新版本
        }
    }

    componentDidMount() {
        document.title = 'Python人工智能 [P1级，驰援武汉 本图文小课注册即送] - 七月在线'
        const _this = this
        this.fetchCourseInfo()
        // 获取App登录信息
        window['loginInfo'] = result => {
            _this.loginInfo(result)
        }
    }

    // 获取app登录数据
    loginInfo = (result) => {
        this.setState({
            userInfoList: result
        }, () => {
            if (this.state.userInfoList.length) {
                this.props.startFetchUser()
                this.appLogin()
            }
        })

    }

    // 保存cookie
    appLogin = () => {
        let expires = addDays(new Date(), 90)
        this.state.userInfoList.map((item, index) => {
            cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'})
            cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'})
            cookie.set("uid", item.uid, {expires, path: '/', domain: '.julyedu.com'})
            cookie.set("uname", item.uname, {expires, path: '/', domain: '.julyedu.com'})
            cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: '.julyedu.com'})
        })

        if (cookie.get("token") && cookie.get("uid")) {
            this.setState({
                isAppUpdate: true
            })
            this.fetchCourseInfo();
        }

        this.props.setCurrentUser(this.transformUser(this.state.userInfoList));
    }

    transformUser = res => {
        let payload

        res.map((item, index) => {
            payload = {
                hasError: false,
                data: {
                    username: item.uname,
                    avatar: item.avatar_file,
                    token: item.token,
                    uid: item.uid
                },
                isFetching: false
            }
        })

        return payload
    }


    fetchCourseInfo = () => {
        const id = getParam('id')
        http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
            const {data, code} = res.data
            if (code === 200) {
                let version = getParam('version')
                if(version) {
                    version = version.replace(/\./g, '').slice(0, 3)
                    if(browser.isAndroidApp && version < 453) { // 安卓的低版本
                        this.setState({
                            backwardVersion: true,
                            isPay: 0,
                        })
                    }else if(browser.isIOSApp && version < 380) { // ISO的低版本
                        this.setState({
                            backwardVersion: true,
                            isPay: 0,
                        })
                    }else{ // 安卓/IOS 的高版本
                        if(data.course_info.is_pay === 1) { // 在APP内未登录-去登陆-登录后还显示此页；如果是已购买的用户 就需要跳转到 APP已购买的原生页面
                            SendMessageToApp('toSyllabusChapter', id); // 跳转到APP的已购买详情页 id 是课程ID
                            return;
                        }
                        this.setState({
                            backwardVersion: false,
                            isPay: data.course_info.is_pay
                        })
                    }
                } else {
                    this.setState({
                        backwardVersion: false,
                        isPay: data.course_info.is_pay
                    })
                }
            }
        })
    }

    render() {
        const {isPay, isAppUpdate, backwardVersion} = this.state;
        // 旧版本 无论购买未购买 都跳转到 未购买的详情页； 如果是已购买就提示更新APP
        return (
            <div>
                {
                    isPay === 0 && (
                        <PythonDes 
                            backwardVersion={backwardVersion}
                            history={this.props.history} 
                            isAppUpdate={isAppUpdate}
                            isPay={isPay}
                        />
                    )
                }
                {
                    (isPay === 1 && !getParam('version')) && <PythonStudy isAppUpdate={isAppUpdate}/>
                }
            </div>
        )
    }
}

export default Python