import React from 'react';
import {Button, Popover} from 'antd';
import {WeaSelect, WeaLocaleProvider} from 'ecCom';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

import ApiSet from '../ApiSet';
import WeesoSearchSet from '../weesoSearchSet';

const store = [
  'weesoStore',
  'weesoSetStore',
  'routing',
  'weesoSeachSetStore'
]
@inject(...store)
@observer
export default class WeesoTop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      setMaskClosable: true
    }
  }
  
  componentDidMount() {
  }
  
  componentWillUnmount() {
  }
  
  render() {
    const {weesoStore} = this.props;
    let {
      setVisible, sysVisible, perVisible, sysadminVisible,
      numberValue, searchValue, sortValue, baseDadas,
      addSubdomainUrl
    } = weesoStore;
    baseDadas = toJS(baseDadas);
    let
      sysBtn = baseDadas.sysBtn || [],
      hotKeyPer = baseDadas.hotKey && baseDadas.hotKey.per || [],
      hotKeySys = baseDadas.hotKey && baseDadas.hotKey.sys || [],
      numperpage = baseDadas.searchSet && baseDadas.searchSet.numperpage || [],
      searchField = baseDadas.searchSet && baseDadas.searchSet.searchField || [],
      sortField = baseDadas.searchSet && baseDadas.searchSet.sortField || [];
    let  hasPer = true, hasSys = true;
    if(baseDadas.hotKey) {
      baseDadas.hotKey.hasPer !== undefined && (hasPer = baseDadas.hotKey.hasPer);
      baseDadas.hotKey.hasSys !== undefined && (hasSys = baseDadas.hotKey.hasSys);
    }

    const {setMaskClosable} = this.state;
    const sysadminContent = (
      <ul className="wea-top-hot-content">
        {sysBtn && sysBtn.length != 0 && sysBtn.map(item => {
          return (
            <li className="weeso-systop-link" title={item.title}><a target="_blank" href={item.link}>{item.title}</a></li>
          )
        })}
      </ul>
    )
    const sysContent = (
      <ul className="wea-top-hot-content">
        { hotKeySys.length ===0 && <li>{getLabel('391116','暂无热点')}</li>}
        {hotKeySys && hotKeySys.length!==0 && hotKeySys.map(item => {
          return (
            <li title={item} onClick={() => {
              weesoStore.sysVisible = false;
              this.hotCommonClick(item);
            }}>{item}</li>
          )
        })}
      </ul>
    )
    const perContent = (
      <ul className="wea-top-hot-content">
        { hotKeyPer.length ===0 && <li>{getLabel('391116','暂无热点')}</li>}
        {hotKeyPer && hotKeyPer.length!==0 && hotKeyPer.map(item => {
          return (
            <li title={item} onClick={() => {
              weesoStore.perVisible = false;
              this.hotCommonClick(item);
            }}>{item}</li>
          )
        })}
      </ul>
    )
    const searchContent = (
      <div className="wea-top-set-content">
        <p className="set-content-search">
            {getLabel(384226, "搜索设置")}
        </p>
        <div className="set-content-advanced" ref="contentWrapper">
          <div className="set-content-count">
            <span title={getLabel(17491, "每页显示记录数")}>{getLabel(17491, "每页显示记录数")}：</span>
            <span className="set-select">
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7aubcb`}
                  value={numberValue}
                  options={this.opt(numperpage)}
                  onChange={(v) => {
                    weesoStore.setState({numberValue: v})
                    this.setState({setMaskClosable: true})
                  }}
                  onFocus={() => {
                    this.setState({setMaskClosable: false})
                  }}
                  onBlur={() => {
                    this.setState({setMaskClosable: true})
                  }}
                  layout={this.refs.contentWrapper}
                />
              </span>
            <span>{getLabel(18256, "条")}</span>
          </div>
          <div>
            <span title={getLabel(19332, "高级设置")}>{getLabel(19332, "高级设置")}：</span>
            <span className="set-select">
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2gt090`}
                  value={searchValue}
                  options={this.opt(searchField)}
                  onChange={(v) => {
                    weesoStore.setState({searchValue: v})
                    this.setState({setMaskClosable: true})
                  }}
                  layout={this.refs.contentWrapper}
                  onFocus={() => {
                    this.setState({setMaskClosable: false})
                  }}
                  onBlur={() => {
                    this.setState({setMaskClosable: true})
                  }}
                  style={{maxWidth:'120px'}}
                />
            </span>
            <span className="set-select">
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6uba9a`}
                  value={sortValue}
                  options={this.opt(sortField)}
                  onChange={(v) => {
                    weesoStore.setState({sortValue: v})
                    this.setState({setMaskClosable: true})
                  }}
                  layout={this.refs.contentWrapper}
                  onFocus={() => {
                    this.setState({setMaskClosable: false})
                  }}
                  onBlur={() => {
                    this.setState({setMaskClosable: true})
                  }}
                  style={{maxWidth:'120px'}}
                />
              </span>
          </div>
        </div>
        <div className="set-content-btn">
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0t2fim`} type="primary" onClick={() => {
            weesoStore.setState({setVisible: false});
            weesoStore.saveSearchSet();
          }}>{getLabel(826, "确定")}</Button>
        </div>
      </div>
    )
    return (
      <div className="weeso-topbox">
        <ul className="weeso-top">
          <li className="top-set">
            <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@8ggo1s`} visible={setVisible} placement="bottomRight" content={searchContent} trigger="click"
                     onVisibleChange={(v) => {
                       weesoStore.setState({setVisible: v})
                     }}
                     mask={true}
                     maskClosable={setMaskClosable}
                     overlayClassName="weeso-style-popover"
            >
              <span className={weesoStore.setVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
                    onClick={() => {
                      weesoStore.setState({setVisible: !setVisible})
                    }}>{getLabel(30747, "设置")}</span>
            </Popover>
          </li>
          {hasPer && <li className="top-hot">
            <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@ouftc1`} visible={perVisible} placement="bottomLeft" content={perContent} trigger="click"
                     onVisibleChange={(v) => {
                       weesoStore.setState({perVisible: v})
                     }}
                     overlayClassName="weeso-style-popover"
            >
              <span className={weesoStore.perVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
                    onClick={() => {
                      weesoStore.setState({perVisible: !perVisible})
                    }}>{getLabel(81784, "个人热点")}</span>
            </Popover>
          </li>}
          {hasSys && <li className="top-hot">
            <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@5nn803`} visible={sysVisible} placement="bottomLeft" content={sysContent} trigger="click"
                     onVisibleChange={(v) => {
                       weesoStore.setState({sysVisible: v})
                     }}
                     overlayClassName="weeso-style-popover"
            >
              <span className={weesoStore.sysVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
                    onClick={() => {
                      weesoStore.setState({sysVisible: !sysVisible})
                    }}>{getLabel(81783, "系统热点")}</span>
            </Popover>
          </li>}

          {weesoStore.showAdmin && sysBtn && sysBtn.length != 0 && sysBtn.length > 4 &&
          <li className="top-hot">
            <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@bdott7`} visible={sysadminVisible} placement="bottomLeft" content={sysadminContent} trigger="click"
                     onVisibleChange={(v) => {
                       weesoStore.setState({sysadminVisible: v})
                     }}
                     overlayClassName="weeso-style-popover"
            >
              <span className={weesoStore.sysadminVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
                    onClick={() => {
                      weesoStore.setState({sysadminVisible: !sysadminVisible})
                    }}>{getLabel(25433, "管理")}</span>
            </Popover>
          </li>
          }
        </ul>

        <ul className="weeso-systop">
          {weesoStore.showAdmin && sysBtn && sysBtn.length != 0 && sysBtn.map((item,index) => {
            if(item.id == 0){
              return <li className='weeso-systop-link'>
                <div className="systop-link-searchset" onClick={() => {
                  const { setState, getCusPageSetList } = this.props.weesoSeachSetStore;
                  setState({ dialogVisible: true }, () => {
                    getCusPageSetList();
                  });
                }}> {item.title} </div>
              </li>
            }
            if(item.id == 1){
              return <li className='weeso-systop-link'><a target="_blank" href={item.link}>{item.title}</a></li>
            }
            if(item.id == 2) {
              return <li className='weeso-systop-link' onClick={() => window.open(addSubdomainUrl('/spa/esearch/static/index.html#/main/esearch/robot'))}><a>{item.title}</a></li>
            }
            if(item.id == 3){
              return <li className='weeso-systop-link' onClick={() => this.props.weesoSetStore.setState({showDialog: true})}><a>{item.title}</a></li>
            }
          })}
        </ul>

        <ApiSet ecId={`${this && this.props && this.props.ecId || ''}_ApiSet@d7208b`} isDialog={true}></ApiSet>
        <WeesoSearchSet ecId={`${this && this.props && this.props.ecId || ''}_WeesoSearchSet@84tb20`} />
      </div>
    )
  }
  
  //系统热点、个人热点--共有方法
  hotCommonClick = (item) => {
    const {weesoStore, routing} = this.props;
    const { search } = routing.location;
    weesoStore.setState({
      inputValue: item,
      isHotkeySearch: true,
      selectionStart: item.length,
      selectionEnd: item.length
    });
    const { filterParams } = this.props.weesoSeachSetStore;
    let p = { page_search_json: JSON.stringify(filterParams())};
    weesoStore.preSearch(p);
    if(!weesoStore.isSearch){
      weesoStore.changeKey(weesoStore.defalutMoreKey, false);
      weesoStore.baseDadas.FLAG != -1 && routing.push(`/main/esearch/result${search}`);
    }
  }
  
  opt = (datas) => {
    let options = [];
    datas = toJS(datas);
    datas && datas.length!==0 && datas.map(item => {
      options.push({
        key: item.key,
        selected: item.selected,
        showname: item.showname,
      })
    })
    return options;
  }
}