import React, { Component } from 'react'
import { Tabs } from 'antd';
import { config, request, util } from 'utils'
const { WXMpAPI } = config
import router from 'umi/router';
import ProductListSeach from '../productList/productListSeach';
// import homeHeader from '../homeHeader/index';
import { GetQueryString } from '../getCommonId';
import styles from './index.less';

class TabsList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            MeunList: [],
            activeKey: "",
            pameDate: [],
            defaultActiveKey: ""
        }
    }
    componentWillMount() {
        this.getProductList();
    }
    handlChange = key => {
        // classificationId
        // console.log(key,this.state.MeunList[key])
        this.getProductListItem(key)
        this.setState({
            activeKey: key
        })
    }
    
    getProductList = () => {
        let that = this
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        const data = {
            "pageIndex": 1,
            "pageSize": 10,
            "filters": [
                {
                    "field": "classification_column_id",
                    "operate": "equal",
                    "value": columnId
                }
            ],
        }
        request({
            url: WXMpAPI + '/wx/content/classification/queryAllClassifications',
            method: "post",
            data: data
        }).then((data) => {
            const obj = {
                classificationName: "全部",
                classificationId: ""
            }
            let newData = data.items
            newData.splice(0, 0, obj)
            that.setState({
                MeunList: newData,
            })
        });
    }
    onClickRouter = (path) => {
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        router.push({ pathname: '/viewHome/contentDetails', query: { articleId: path.articleId,columnId:columnId } })
    }
    // 首页栏目
    getProductListItem = (id) => {
        let that = this
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        const data = {
            "pageIndex": 1,
            "pageSize": 10,
            "filters": [

            ],
        }
        if (id) {
            const obj = {
                "field": "classification_id",
                "operate": "contains",
                "value":id
            }
            data.filters.push(obj)
        } else {
            const obj = {
                "field": "article_column_id",
                "operate": "equal",
                "value": columnId
            }
            data.filters.push(obj)
        }
        request({
            url: WXMpAPI + '/wx/content/article/queryArticlesFront',
            method: "post",
            data: data
        }).then((sussess) => {
            const defaultValueData = sussess.items
            // if(!id){
            //   const select = [3]
            //   const typeTop = defaultValueData // 数据源
            //   console.log(typeTop)
            //   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) // 匹配数据
            //             typeTop.splice(typeTop.findIndex(item => item.articleId === _id), 1)
            //             var newArr =  Screened.concat(typeTop)
            //          }
                   
            //       }
            //   }
            // } else {
            //     const select = [1]
            //     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) // 匹配数据
            //             typeTop.splice(typeTop.findIndex(item => item.articleId === _id), 1)
            //             var newArr =  Screened.concat(typeTop)
            //          }
            //         }
            //     }
            // }
            
            that.setState({
                list:defaultValueData
            })
        });
    }
    componentDidMount(){
        this.getProductListItem('')
    }
    render() {
        let SsoToken = util.auth.getToken();
        const url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        const { TabPane } = Tabs;
        return (
            <div className={styles.productList}>
                <Tabs defaultActiveKey={this.state.defaultActiveKey} onChange={this.handlChange} activeKey={this.state.activeKey}>
                    {
                        this.state.MeunList.map((item, key) => {
                            return <TabPane tab={item.classificationName} key={item.classificationId} >
                                {/* <ProductListSeach selectKey={ this.state.activeKey } pameDate={ this.state.pameDate}></ProductListSeach> */}

                                <div className={styles.productList_item}>
                                    <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>

                            </TabPane>
                        })
                    }
                </Tabs>
            </div>
        )
    }
}

export default TabsList
