import React, { Component } from 'react'
import styles from './index.less';
import { config, request, permission, util } from 'utils'
const { WXMpAPI } = config
import router from 'umi/router';
import {  GetQueryString  } from '../getCommonId';
class categoryEntry extends Component {
    constructor(props) {
        super(props)
        this.state = {
            departmentList: []
        }
    }
    componentWillMount() {
        this.getDepartmentList();
    }
    getDepartmentList = () => {
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        let that = this
        const data = {
            "pageIndex": 1,
            "pageSize": 10,
            "filters": [
                {
                    "field": "column_id",
                    "operate": "equal",
                    "value":columnId
                }
            ],
        }
        request({
            url: WXMpAPI + '/wx/content/department/queryDepartmentsByColumnId',
            method: "post",
            data: data
        }).then((sussess) => {
            console.log(sussess.items)
            that.setState({
                
                departmentList: sussess.items
            })
        });
    }
    onClick = (val) => {
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        router.push({ pathname: '/viewHome/productDetails', query: { departmentId: val.departmentId,columnId:columnId } })
    }
    render() {
        let SsoToken = util.auth.getToken();
        return (
            <div className={styles.home_h}>
                <nav className={styles.m_nav}>
                    <ul style={{ display: "flex", justifyContent: "left", flexWrap: "wrap", paddingTop: "20px", paddingLeft: "0" }}>
                        {
                            this.state.departmentList && this.state.departmentList.map((item, index) => {
                                return <li className={styles.nav_item} onClick={() => this.onClick(item)}>
                                    <a href="javascript:void(0);" className={styles.nav_item_link}>
                                        {
                                            item.departmentIconaddress ? (<img src={item.departmentIconaddress + "?Sso-Token=" + SsoToken} style={{ height: '100%', width: "100%", borderRadius: "50%" }} />) : (<div className={styles.itemStyle}></div>)
                                        }
                                        <span className={styles.title}>{item.departmentName} </span>
                                    </a>
                                </li>
                            })
                        }
                        <li className={styles.nav_item} onClick={() => this.onClick({departmentId:""})} style={{display:this.state.departmentList.length >0 ? "block":"none"}}>
                            <a href="javascript:void(0);" className={styles.nav_item_link}>
                            <div className={styles.itemStyle}></div>
                                <span className={styles.title}>更多</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        )
    }
}
export default categoryEntry

