
import React, { Component } from 'react'
import { Carousel } from 'antd';
import HomeHeaderView from './homeHeader/index';
import HomeHav from './categoryEntry/index';
import ProductList from './productList/index';
import TabsList from './TabsList/index';
import { config, request, permission, util } from 'utils'
const { WXMpAPI } = config
import { connect } from 'dva';
import qs from 'qs';
import router from 'umi/router';
import styles from './index.less';
import { GetQueryString } from './getCommonId';

// @connect(({ Home }) => ({ Home }))
class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [

            ],
            itemDate: false
        }
    }
    componentDidMount() {
        this.getBannerList();
    }
    getBannerList = () => {
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        let that = this
        const data = {
            "filters": [
                {
                    "field": "rotation_graph_column_id",
                    "operate": "equal",
                    "value": columnId
                }
            ],
        }
        request({
            url: WXMpAPI + '/wx/content/rotationGraph/queryAllRotationGraphs',
            method: "post",
            data: data
        }).then((sussess) => {
            that.setState({
                list: sussess.items,
                itemDate: true
            })
        });
    }
    handleClick = () => {
        const columnId = GetQueryString('columnId') ? GetQueryString('columnId') : 1
        router.push({ pathname: '/viewHome/productDetails', query: {columnId:columnId, code: 1 } })
    }
    render() {
        let SsoToken = util.auth.getToken();
        return (
            <div className={styles.home}>
                <div className={styles.home_h}>
                    <header className={styles.m_header}>
                        <div className={styles.m_header_box} id="my_search" style={{ display: "flex", justifyContent: "space-between" }}>
                            {/* <a href="#" className={styles.styles}>亮剑集团</a> */}
                            <form action="#">
                                <span className={styles.icon_search}></span>
                                <input type="search" className={styles.search} style={{ background: "#fffff"}} placeholder="科室搜索" onClick={this.handleClick} />
                            </form>
                            {/* <a className={styles.logo_btn}>搜索</a> */}
                        </div>
                    </header>
                </div>

                <Carousel autoplay>
                    {
                        this.state.list && this.state.list.map((item, key) => {
                            return <div>
                                {/* <h3>{item.rotationGraphName}</h3> */}
                                <a href={item.rotationGraphUrl}>
                                    <img src={item.rotationGraphAddress + "?Sso-Token=" + SsoToken} style={{ height: '120px', width: "100%" }} />
                                </a>
                            </div>
                        })
                    }
                </Carousel>
                <HomeHav ></HomeHav>
                <ProductList ></ProductList>
                <TabsList ></TabsList>
            </div>
        )
    }
}

export default Home
