
import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import { config, request, permission, util } from 'utils'
const { WXMpAPI } = config
import styles from './index.less';
import router from 'umi/router';
import { GetQueryString } from '../getCommonId';
class contentDetails extends Component {
    constructor(props) {
        super(props)
        this.state = {
            Id: "",
            Content: "",
            list: [

            ]
        }
    }
    componentDidMount() {
        const articleId = this.props.location.query.articleId
        if(articleId){
            this.requsetData(articleId);
        }
    }
    requsetData = ( articleId ) => {
        request({
            url: WXMpAPI + '/wx/content/article/queryArticleByArticleId/' + articleId,
            method: "get",
        }).then((data) => {
            this.setState({
                Content: data.result
            })
        });
    }
    onLeftClick = callback => {
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        router.push({ pathname: '/viewHome', query: {columnId:columnId} })
    }

    render() {
        const type = "<div>没有查询到文章</div>"
        return (
            <div className={styles.home}>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    cancelText="确定"
                    showCancelButton={true}
                    onLeftClick={() => this.onLeftClick()}
                >详情</NavBar>
                <div className={styles.title}>{this.state.Content.articleTitle} </div>
                <div className={styles.edsc}>
                    <div className={styles.name}>{this.state.Content.articleAuthor}</div>
                    <div className={styles.time}>{this.state.Content.articleCreateDate}  </div>
                </div>
                <div dangerouslySetInnerHTML={{ __html: this.state.Content.articleContent ? this.state.Content.articleContent : type }} style={{ textAlign: "center" }} className={styles.contentText}></div>
                <div className={styles.readingvolume}>
                        <div className={styles.title}>阅读量</div>
                        <div className={styles.code}>{this.state.Content.articleCardinalnumber}</div>
                </div>
            </div>
        )
    }
}

export default contentDetails
