import React from 'react';
import { observer } from 'mobx-react';
import { WeaTab, WeaDatePicker, WeaCheckbox } from 'ecCom';
import { toJS } from 'mobx';
import { Row, Col, Button } from 'antd';
import {
  i18n,
} from '../../public/i18n';
import {
  WeaLocaleProvider,
} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Tab extends React.Component {
    changeTab(key) {
        this.props.newOutSide._selectedTabIndex = key;
      }

    changeDateTab(key) {
      const {
        newOutSide,
      } = this.props;
      const { changeDateTab, refreshData } = newOutSide;
      changeDateTab(key);
      refreshData();
    }

    changeDate = (value1, value2) => {
      const { newOutSide } = this.props;
      const { changeDate, refreshData } = newOutSide;
      changeDate(value2);
      refreshData();
    }
    reFresh = () => {
      const { newOutSide } = this.props;
      const { refreshData } = newOutSide;
      refreshData();
    }
    handlerCheckbox = (v) => {
      const {
        newOutSide,
      } = this.props;
      const { handleCheckbox } = newOutSide;
      handleCheckbox(v);
    }

    render() {
       const tabName = [
        {
            viewcondition: '0',
            title: getLabel('387101', '时间视图'),
        }, {
            viewcondition: '1',
            title: getLabel('387102', '地图视图'),
        }, {
          viewcondition: '2',
          title: getLabel('387103', '明细'),
        },
      ];
      // 时间视图date数据
      const dateTabDatas = [{
        title: i18n.label.today(),
        key: '1',
      }, {
        title: i18n.label.yesterday(),
        key: '2',
      }, {
        title: i18n.label.tsmth(),
        key: '3',
      }];

      // 地图视图date数据
      const dateTabDatas1 = [{
        title: i18n.label.today(),
        key: '1',
      }, {
        title: i18n.label.yesterday(),
        key: '2',
      }, {
        title: i18n.label.tsmth(),
        key: '3',
      }];

        const { newOutSide } = this.props;
        const {
          selectedTabIndex,
          dateTabkey,
          pDate,
          showSignInfo,
          signTitle,
        } = newOutSide;
      const isEn = window.e9_locale.userLanguage == '8';
      let themeFontSize = 12;
      try {
        themeFontSize = parseInt(JSON.parse(localStorage['theme-themeInfo']).themeFontSize);
      } catch (e) {

      }
      return (
        <div>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@8btngr`}
            datas={tabName}
            keyParam="viewcondition" // 主键
            selectedKey={selectedTabIndex}
            onChange={this.changeTab.bind(this)}
          />
          {
            selectedTabIndex != 2 &&
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yd5sz2`} className="picker-wrapper">
              {selectedTabIndex == 0 && dateTabDatas.map(item => (<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nkmyyk@1`} span={1} onClick={this.changeDateTab.bind(this, item.key)} className={`cursor-pointer date-item ${item.key === dateTabkey ? 'active' : ''} ${themeFontSize > 12 ? 'date-item-large' : ''} ${isEn ? 'data-item-en' : ''}`}>
                  {item.title}
                </Col>),
              )}
              {selectedTabIndex == 1 && dateTabDatas1.map(item => (<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xjkhhh@2`} span={1} onClick={this.changeDateTab.bind(this, item.key)} className={`cursor-pointer date-item ${item.key === dateTabkey ? 'active' : ''} ${themeFontSize > 12 ? 'date-item-large' : ''} ${isEn ? 'data-item-en' : ''}`}>
                  {item.title}
                </Col>),
              )}
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fpy9p5`} span={6} className="picker">
                <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@knxw97`}
                  className="asdasd"
                  arrow
                  type={dateTabkey == '3' ? 'month' : 'day'}
                  date={pDate}
                  onChange={this.changeDate}
                />
                <i className="icon-coms-Refresh cursor-pointer outside-refresh" onClick={this.reFresh} />
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ny4so8`} style={{ textAlign: 'right', paddingRight: '24px' }} title={signTitle()}>
                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@gywz8r`} value={showSignInfo} onChange={this.handlerCheckbox} />
                        {signTitle()}
              </Col>
          </Row>
          }
        </div>
      );
    }
}