import React, { Component } from 'react'
import { Empty, Tabs, } from 'antd-mobile';
import { config, request, permission, util } from 'utils'
const { WXMpAPI } = config
import router from 'umi/router';
import styles from './productListSeach.less';
class productListSeach extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [
            ],
            queryAllSearchTerms: [],
            seachName: ""
        }
    }
    componentWillReceiveProps(nextProps) {
        if (!this.props.pathname) {
        } else {
            this.setState({
                list: nextProps.pameDate,
                queryAllSearchTerms: nextProps.queryAllSearchTerms
            })
        }
    }
    // 热搜
    querySeachList = () => {
        let that = this
        const data = {
            "pageIndex": 1,
            "pageSize": 10,
            "filters": [
                {
                    "field": "article_title",
                    "operate": "contains",
                    "value": this.state.seachName
                }
            ],
        }
        request({
            url: WXMpAPI + '/wx/content/article/queryArticlesFront',
            method: "post",
            data: data
        }).then((sussess) => {
            const select = [2]
            const defaultValueData = sussess.items
            // const typeTop = defaultValueData // 数据源
            // var Screened = []
            // for (let i = 0; i < typeTop.length; i++) {
            //     const typographicTypeList = typeTop[i].typographicTypeList
            //     for (let k = 0; k < typographicTypeList.length; k++) {
            //         const id = typographicTypeList[k].typographicTypeId
            //         if (select.includes(id)) {
            //             let obj = typeTop[i]
            //             Screened.unshift(obj)
            //         }
            //         if (!select.includes(id)) {
            //             let obj = typeTop[i]
            //             Screened.push(obj)
            //         }
            //     }
            // }
            that.setState({
                list: defaultValueData
            })
        });
    }
    getShopingList = (value) => {
        this.setState({
            seachName: value
        }, () => {
            this.querySeachList()
        })
    }
    onClickRouter = (path) => {
        router.push({ pathname: '/viewHome/contentDetails', query: { articleId: path.articleId,columnId:this.props.columnId } })
    }
    render() {
        const { TabPane } = Tabs;
        let SsoToken = util.auth.getToken();
        const url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        return (
            <div className={styles.productList}>
                <div className={styles.hotSeach} >
                    {
                        this.state.queryAllSearchTerms && this.state.queryAllSearchTerms.map((item, index) => {
                            return (
                                <div className={styles.hotSeach_list} style={{ display: this.state.list.length < 1 ? "block" : "none" }} onClick={() => this.getShopingList(item.searchTermName)}>{item.searchTermName}</div>
                            )
                        })
                    }
                </div>
                {
                    this.state.list && this.state.list.map((item, index) => {
                        return (
                            <div className={styles.list} onClick={() => this.onClickRouter(item)}>
                                <div className={styles.left}>
                                    <img src={item.articlePhotoaddress ? item.articlePhotoaddress + "?Sso-Token=" + SsoToken
                                        : url} className={styles.handleImg} />
                                </div>
                                <div className={styles.right}>
                                    <div className={styles.name}>{item.articleTitle}</div>
                                    <div className={styles.desc}>{item.articleSummary}</div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

export default productListSeach
