import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css';
import { WhiteSpace, NoticeBar, ListView, List, Badge, Flex} from 'antd-mobile';
import { Http } from '../../Utils/help';
import './less/list.less';

const Item = List.Item;
const Brief = Item.Brief;
export default class alertlist extends React.Component {
    constructor(props) {
        super(props);
        this.NUM_SECTIONS = 1;
        this.NUM_ROWS_PER_SECTION = 50;
        // const { func } = this.props.location.state?{func:{}};
        this.genData = this.genData.bind(this);
        this.foreachTopic = this.foreachTopic.bind(this);
        this.addalertlist = this.addalertlist.bind(this);
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });
        // localStorage.removeItem("newData")
        // localStorage.removeItem("datalength")
        this.state = {
            dataSource: dataSource,
            // func: func,
            nodata: true,
            //主题数据
            data: [],
            //子档数据
            alertlist:[]
            
        };
    }
    componentWillMount(){
        console.log('componentWillMount!')
        this.dataAjax = Http.getJSON2("showmessage", {}, this.foreachTopic)
    }
    componentDidMount() {
        console.log("componentDidMount")
        //this.dataAjax = Http.getJSON2("showmessage", {}, this.foreachTopic)
            this.dataAjax.done((data) => {
                console.log("this.dataAjax.done:",JSON.stringify(data))
                try {
                    console.log(JSON.stringify(this.state.data))
                    this.genData(data);
                    this.setState({
                    dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                    data:data,
                    nodata:!data||data.length==0
                    });
                    console.log(this.state)
                } catch (err) {
                    console.error(err.message);
                    console.error(err.stack);
                }
             });
            
    }
    // foreachTopic=(result)=>{
    //     console.log('foreacheTopic Result:', result)
    //    result.map((item,index) =>{
    //        if(item.ExtraDatas.unreadnum > 0){
    //         Http.getJSON2("showmessage/items", { "topicid": item.Topicid, "page":1,"pageSize":1 }, (alertItem)=>{
    //             if(alertItem.data !== null && alertItem.data.length>0){
    //                 item.content = alertItem.data[0].ExtraDatas.content
    //                 item.createTime = alertItem.data[0].CreateTime.slice(5,10)
    //                 this.state.data.push(JSON.parse(JSON.stringify(item)))
    //             }
    //         })
    //        }
    //         this.state.data.push(JSON.parse(JSON.stringify(item)))
    //         newresult.push(JSON.parse(JSON.stringify(item)))
    //     })
    //     console.log(JSON.stringify(result))
    // }
    foreachTopic=(result)=>{
       result.map((item,index) =>{
           if(item.ExtraDatas.unreadnum > 0){
            Http.getJSON2("showmessage/items", { "topicid": item.Topicid, "page":1,"pageSize":1 }, this.addalertlist)
           }
        })
    }

    addalertlist=(data)=>{
        console.log(data.data)
        let that = this
        if(data.data && data.data.length>0){
            var c = that.state.alertlist.concat(data.data)
            that.setState({
                alertlist:c
            })
        }
        console.log(that.state.alertlist)
    }
    genData = (datas) => {
        this.dataBlobs = {};
        this.sectionIDs = [];
        this.rowIDs = [];
        if (!datas)
            return;

        let pIndex = 0;
        this.NUM_ROWS_PER_SECTION = datas.length;
        for (let i = 0; i < this.NUM_SECTIONS; i++) {
            const ii = (pIndex * this.NUM_SECTIONS) + i;
            const sectionName = `Section ${ii}`;
            this.sectionIDs.push(sectionName);
            this.dataBlobs[sectionName] = sectionName;
            this.rowIDs[ii] = [];

            for (let jj = 0; jj < this.NUM_ROWS_PER_SECTION; jj++) {
                const rowName = `S${ii}, R${jj}`;
                this.rowIDs[ii].push(rowName);
                this.dataBlobs[rowName] = datas[jj];
            }
        }
        this.sectionIDs = [...this.sectionIDs];
        this.rowIDs = [...this.rowIDs];
    }

    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#F5F5F9',
                    height: 8,
                    borderTop: '1px solid #ECECED',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );


        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID} >
                <List className="am-list-content">
                <Item multipleLine onClick={() => { 
                    console.log("rowData", rowData)
                    if (null != rowID && '' != rowID) {
                        const { history } = this.props;
                        history.push({
                            pathname: '/alertdetail',
                            state: {
                                func: this.state.func,//没有这段代码，页面不能跳转
                                rowData: rowData,
                            }
                        });
                    }
                }} 
                >
                <div>

                    <div style={{float:'left', width:'20%'}}>
                        <div style={{textAlign:'center'}}>
                        {rowData.ExtraDatas.unreadnum >0 ? <Badge dot style={{background:'#FF0033'}}></Badge> : ''}
                        <img  style={{ width: '70%', height: '70%' }} src={require('../../images/bell.png')} />
                        </div>
                    </div>

                    <div style={{float:'right', width:'80%'}}>
                        <div>
                            <Flex>
                                { 
                                    console.log(this.state.alertlist.filter(item => item.Topicid ===rowData.Topicid))
                                    
                                }
                                <Flex.Item style={{ overflow: 'hidden',textOverflow:'ellipsis'}}>{rowData.ExtraDatas.topicname}</Flex.Item> 
                                <div style={{marginRight:'2px'}}><Flex.Item>{this.state.alertlist.filter(item => item.Topicid ===rowData.Topicid).length>0?this.state.alertlist.filter(item => item.Topicid ===rowData.Topicid)[0].CreateTime.slice(5,10):''}</Flex.Item></div>
                            </Flex>
                            <Brief>{rowData.FilterTags == null ? '没有标签': rowData.FilterTags}</Brief>
                            <Flex><Flex.Item style={{ overflow: 'hidden',textOverflow:'ellipsis'}}> <brief>{rowData.ExtraDatas.unreadnum}条 </brief>{ this.state.alertlist.filter(item => item.Topicid ===rowData.Topicid).length>0?this.state.alertlist.filter(item => item.Topicid ===rowData.Topicid)[0].ExtraDatas.content:''}</Flex.Item></Flex> 
                        </div>
                    </div>
                 
                </div>
                
                </Item>
                </List>
                </div>
            );
        };
        return (
            <div>
                <div style={{paddingLeft:"15px"}}> <h3>消息主题</h3> </div>
                {this.state.data && this.state.data.length>0 ? null : <div style={{paddingLeft:"15px"}}>没有数据!</div>}
                <ListView className= "am-list-header"
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    //renderHeader={() => <span><h3>品质警报</h3><div >信息总数：{this.state.datalength} 未读信息数：{this.state.arraylength}</div></span>}
                    renderRow={row}
                    renderSeparator={separator}
                    className="am-list"
                    initialListSize={40}
                    useBodyScroll
                    onScroll={() => { console.log('scroll'); }}
                    scrollRenderAheadDistance={500}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                />
            </div>
        );
    }
}