import React, { Component, Select } from 'react'
import { SearchBar, NavBar, Icon, Accordion, Picker, List } from 'antd-mobile';
import ProductListSeach from '../productList/ProductListSeach';
import { config, request, util } from 'utils'
import router from 'umi/router';
import styles from './index.less';
import { GetQueryString } from '../getCommonId';
const { WXMpAPI } = config
// import styles from './index.less';
class TabsList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            department: [],
            classification: [],
            activeKey: "",
            pameDate: [],
            classification_id: "",
            department_id: "",
            seachName: "",
            queryAllSearchTerms: [],
            pathname: "/viewHome/productDetails",
            colorValue: true,
            deepState: false,
            classDescription: false,
            deep: [],
            classList: [],
            deepList: [],
            showModal:false,
            columnId:""
        }
    }
    componentDidMount() {
        const columnId = this.props.location.query.columnId
        console.log(columnId,'我是详情页');
        this.setState({
            columnId:columnId
        })
        this.props.history.listen(route => {
            if (route.pathname == "/viewHome/productDetails" && !route.query.code) {
                this.setState({
                    department_id: route.query.departmentId,
                    pameDate: [],
                }, () => {
                    this.querySeachList();
                })
            } else {
                this.querySeachHot()
            }
        })
        this.getClassList()
        this.getDeepList()
    }
    querySeachHot = () => {
        let that = this
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        const data = {
            "pageIndex": 1,
            "pageSize": 10,
            "filters": [
                {
                    "field": "search_term_column_id",
                    "operate": "equal",
                    "value": columnId
                },
            ],
        }
        request({
            url: WXMpAPI + '/wx/content/searchTerm/queryAllSearchTerms',
            method: "post",
            data: data
        }).then((sussess) => {
            that.setState({
                queryAllSearchTerms: sussess.items
            })
        });
    }
    // 获取分类
    getClassList = () => {
        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) => {
            that.setState({
                classList: data.items
            })
        });
    }
    //获取科室
    getDeepList = () => {
        let that = this
        // const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        const data = {
            "pageIndex": 1,
            "pageSize":100,
            // "filters": [
            //     {
            //         "field": "column_id",
            //         "operate": "equal",
            //         "value": ""
            //     },
            // ],

            // queryAllSecondDepartments
        }
        request({
            url: WXMpAPI + '/wx/content/department/queryAllSecondDepartments',
            method: "post",
            data: data
        }).then((data) => {
            that.setState({
                deepList: data.items
            })
        });
    }

    querySeachList = () => {
        let that = this
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        const data = {
            "pageIndex": 1,
            "pageSize": 10,
            "filters": [
                {
                    "field": "article_column_id",
                    "operate": "equal",
                    "value":columnId,
                },
                {
                    "field": "department_id",
                    "operate": "contains",
                    "value": this.state.department_id,
                },
                {
                    "field": "classification_id",
                    "operate": "contains",
                    "value": this.state.classification_id
                },
                {
                    "field": "article_title",
                    "operate": "contains",
                    "value": this.state.seachName
                }
            ],
        }
        request({
            url: WXMpAPI + '/wx/content/article/queryArticlesFront',
            method: "post",
            data: data
        }).then((sussess) => {
            that.setState({
                pameDate: sussess.items
            })
        });
    }
    eliminate = e =>{
        this.setState({
            seachName:"",
        }, () => {
            
        })
    }
    seachChange = e => {
        // console.log(e.target.value)
        this.setState({
            seachName: e.target.value,
            deepState: false,
            classDescription: false,
        }, () => {
            this.querySeachList()
        })
    }
    onLeftClick = callback => {
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        router.push({ pathname: '/viewHome', query: { columnId:columnId } })
    }
    onClick = (type, data, key) => {
        console.log(data);
        if (type == "deep") {
            this.setState({
                department_id: data.departmentId,
                deepState: false,
                classDescription: false,
                showModal:false,
            }, () => {
                this.querySeachList()
            })
        } else {
            this.setState({
                classification_id: data.classificationId,
                deepState: false,
                classDescription: false,
                showModal:false ,
            }, () => {
                this.querySeachList()
            })
        }
    }
    clone = ()=>{
        this.setState({
            showModal:false,
        })
    }
    handleClick = (index) => {
        if (index) {
            this.setState({
                deepState: !this.state.deepState,
                showModal:true ,
                classDescription: false
            })
        } else {
            this.setState({
                classDescription: !this.state.classDescription,
                showModal:true,
                deepState: false
            }, () => {

            })
        }
    }
    render() {
        return (
            <div className={styles.productDetails}>
                {/* <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.onLeftClick()}
                >搜索页</NavBar> */}
                {/* <SearchBar
                    placeholder="搜索你想要的商品"
                    onChange={(e) => this.seachChange(e)}
                /> */}

                <div className={styles.header}>
                    <Icon type="left" style={{fontsize:"30"}} onClick={()=>this.onLeftClick()}/>
                    <input onChange={(e)=>this.seachChange(e)} value={this.state.seachName} placeholder="搜索你想要的商品"/>
                    <div onClick={(e)=> this.eliminate(e)}  style={{marginLeft:'10px'}}>取消</div>
                </div>   
                <div className={styles.content_deep} style={{ display: this.state.pameDate.length>0 ? "block" : "none" }} style={{marginBottom:"30px"}}>
                <div className={styles.modal} style={{ display:this.state.showModal? "block" : "none" }} onClick={()=>this.clone()}>
                
                </div>
                   
                    <div className={styles.selectTitle}>
                        <div className={styles.meun_left} onClick={() => this.handleClick(true)}>科室搜索 </div>
                        <div className={styles.meun_right} onClick={() => this.handleClick(false)}>分类搜索 </div>
                    </div>

                    <div className={styles.contentViewList} style={{ display: this.state.deepState ? "block" : "none" }}>
                        {
                            this.state.deepList.map((item, index) => {
                                return (
                                    <div className={styles.selectList}  onClick={() => this.onClick('deep', item, index)}>{item.departmentName}</div>
                                )
                            })
                        }

                    </div>

                    <div className={styles.contentViewList} style={{ display: this.state.classDescription ? "block" : "none" }}>
                        {
                            this.state.classList.map((item, index) => {
                                return (
                                    <div className={styles.selectList} onClick={() => this.onClick('class', item, index)}>{item.classificationName}</div>
                                )
                            })
                        }
                    </div>
                </div>

                <div className={styles.hotClass} style={{ display: this.state.pameDate.length <= 0 ? "block" : "none" }}>热词搜索</div>
                <ProductListSeach  pathname={this.state.pathname} queryAllSearchTerms={this.state.queryAllSearchTerms} pameDate={this.state.pameDate} columnId={this.state.columnId}></ProductListSeach>
            </div>
        )
    }
}

export default TabsList
