import * as React from 'react';
import { Props, State,RankData } from './type';
import styled from 'styled-components'
import { get } from '../utils/request'
import { BaseComponent } from '../base-component'
import {
    Header, Rank, WorkName, Author, Vote, Content, ContentItem, 
    IndexItem, WorkItem, AuthorItem, VoteItem, NullList, ShowMore,
} from './index.style';
export class LofterRank extends React.Component<Props, State> {
    public static defaultProps = new Props();
    public state = new State();
    private changeShowMore = (isShowMore: boolean) => {
        this.setState({
            isShowMore: !isShowMore
        })
    }
    async getList(group: number) {
        const params = {
            group: group // 根据group区分列表
        }
        let res = await get('//www.lofter.com/spread/vitality/story/ranks', params)
        if (res.code === 200) {
            return res.data.rank.items;
        }
        else return [];
    }
    componentDidMount() {
        this.getList(this.props.property).then(
            (data) => {
                this.setState({
                    rankData: data
                })
            }
        )
    }
    public render() {
        let {
            isShowMore,
            rankData
        } = this.state

        const addZero = (index: number) => {
            if (index < 9) return '0' + (index + 1).toString(10);
            else return index + 1;
        }
        // 超过100000四舍五入
        const scoreShow = (score: number) => {
            if (score < 100000) return score;
            else {

                let temp = Math.round(score/10000 * 100) / 100
                return temp.toString(10) + '万'; 
            } 
        }
        const openUrl = (url: string) => {
            window.location.href = url;
        }
        const Item = (item: RankData, index: number) => {
            return (
            <ContentItem key={index}>
            <IndexItem>
                {addZero(index)}
            </IndexItem>
            <WorkItem onClick={() => openUrl(item.url)} dangerouslySetInnerHTML={{__html:item.name.replace(/<[^>]+>/g, '') }}></WorkItem>
            <AuthorItem onClick={() => openUrl(item.blogHomePage)}>{item.blogNickName}</AuthorItem>
            <VoteItem>{scoreShow(item.score)}</VoteItem>
            </ContentItem>
            )
        }
        // 0-悬疑 ； 1-喜剧； 2-幻想； 3-短篇
        return (
            <BaseComponent {...this.props} key={this.props.property}>
                <Header>
                    <Rank>排名</Rank>
                    <WorkName>作品名</WorkName>
                    <Author>作者</Author>
                    <Vote>票数</Vote>
                </Header>
                <Content >
                    {
                        rankData?.length > 0 && isShowMore && rankData?.map((item: RankData, index: number) => (
                            Item(item,index)
                        ))
                    }
                    {
                        rankData?.length > 0 && !isShowMore && rankData?.slice(0, 10).map((item: any, index: number) => (
                            Item(item,index)
                        ))
                    }
                    {
                        rankData?.length === 0 && <NullList>榜单正在计算中......</NullList>
                    }
                    {
                        rankData?.length > 10 && !isShowMore && <ShowMore onClick={() => this.changeShowMore(isShowMore)}>
                            加载更多 {' >'}
                        </ShowMore>
                    }
                    {
                        rankData?.length > 10 && isShowMore &&
                        <ShowMore onClick={() => this.changeShowMore(isShowMore)}>
                            收起 {' >'}
                        </ShowMore>

                    }
                </Content>
            </BaseComponent>
        )
    }
}