import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'
import styles from './index.scss';
import { fetchNavList } from '../../actions/nav';

export default @connect(({ header: { headers } }) => ({
  headers
}), dispatch => ({
  fetchNavList: () => (dispatch(fetchNavList()))
}))
class Header extends React.Component {
  componentDidMount() {
    const { props: { fetchNavList } } = this;
    fetchNavList();
  }

  render() {
    const { headers } = this.props;
    return (
      <div>
        <div className={styles.search}>
          <div className={styles.close}>
            <div className={styles.indexHeader}>
              <div className={styles.headerLeft}>
                <button type="button">登录</button>
              </div>
              <div className={styles.headerTitle}>
                <div className={styles.vSearch}>
                  <div className={styles.searchHeader}>
                    <form action="" className={styles.searchbar}>
                      <div className={styles.searchbarInner}>
                        <input type="search" maxLength="20" autoComplete="off" className={styles.searchbarCore} />
                        <div className={styles.placeholder}>搜索品牌或商品</div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
              <div className={styles.headerRight}>
                <a href="//h5.vip.com/list/mobile-search.html?wapid=classify_wap_107" className={styles.headerRightButton}>
                  <i className={styles.iconClassify} />
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className={styles.tabBar}>
          <div className={styles.tabBarInner}>
            <ul className={styles.equalTable}>
              {headers.map(v => (
                <li key={v.id}>
                  <Link to={v.link}><span>{v.nav}</span></Link>
                </li>
              ))}
            </ul>
          </div>

          <div className={styles.tabBarMore}>
            <div className={styles.more}>
              <i className={styles.iconArrowDown} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}