import { connect } from 'dva/index';
import React, { Component } from 'react';
import { Form, Spin, Radio } from 'antd';
import {
  sldLlineRtextAddMargin,
  sldComLanguage,
  noDataPlaceholder,
} from '@/utils/utils';
import {
  statDateSearchParams,
  statDateThreeSearchParams,
  statEnquiryOverViewData,
} from '@/utils/util_data';
import global from '@/global.less';
import stat from '@/assets/css/stat.less';
import SldStatDate from '@/components/SldStatDate';
import OverView from '@/components/SldStat/OverView';
import LineArea from '@/components/SldStatBizcharts/LineArea';
import SldScrollbars from '@/components/SldScrollbars';
import defaultSettings from '@/defaultSettings';
import styles from '@/pages/basic/basic.less';

@connect(({ statistics }) => ({
  statistics,
}))
@Form.create()

export default class StatisticsEnquiry extends Component {
  constructor(props) {
    super(props);
    this.state = {
      overViewData: statEnquiryOverViewData(),
      paramsOptions: statDateThreeSearchParams(),
      enquiryTrendParams: statDateSearchParams(),//变化趋势的筛选条件
      enquiryTrendData: [],//询盘趋势数据
      enquiryTrendInitLoading: false,
    };
  };


  componentDidMount() {
    this.geEnquiryPreviewData();
    this.getEnquiryTrend();
  }

  //获取询盘趋势的数据
  getEnquiryTrend = () => {
    this.setState({ enquiryTrendInitLoading: true });
    const { dispatch } = this.props;
    let { enquiryTrendParams } = this.state;
    let enquiryTrendData = [];
    dispatch({
      type: 'common/get_enquiry_trend',
      payload: enquiryTrendParams,
      callback: (res) => {
        this.setState({ enquiryTrendInitLoading: false });
        if (res.state == 200) {
          let data = res.data;
          for (let i in data.enquiryTrendList) {
            enquiryTrendData.push({
              month: data.enquiryTrendList[i].statsTime,
              city: `${sldComLanguage('询盘量')}`,
              temperature: data.enquiryTrendList[i].viewNum,
            });
          }
          this.setState({
            enquiryTrendData,
          });
        }
      },
    });
  };

  geEnquiryPreviewData = (itemIndex, params) => {
    const { dispatch } = this.props;
    this.setState({ headerModuleLoadingStatus: true });
    let { paramsOptions, overViewData } = this.state;

    function commonResolve(res) {
      this.setState({ headerModuleLoadingStatus: false });
      if (res.state === 200) {
        let item;
        let tempData = JSON.parse(JSON.stringify(overViewData));
        for (let i = 0, len = tempData.length; i < len; i++) {
          if (itemIndex != undefined) {
            itemIndex = itemIndex + 1;
            item = tempData[itemIndex];
          } else {
            item = tempData[i];
          }
          if (res.data[item.mapDifferentValue] && res.data[item.mapDifferentValue].indexOf('-') === 0) {
            //较上期下降
            item.differenceNum = res.data[item.mapDifferentValue];
          } else {
            //较上期上涨
            item.differenceNum = '+' + (res.data[item.mapDifferentValue] || '0');
          }
          item.num = res.data[item.mapValue];
          if (itemIndex) {
            break;
          }
        }

        return JSON.parse(JSON.stringify(tempData));
      }
    }

    dispatch({
      type: 'statistics/get_analysis_enquiry_overview',
      payload: params ? params : paramsOptions[0],
      callback: (res) => {
        let tempObj1 = commonResolve.call(this, res);
        this.setState({
          overViewData: [tempObj1[0], tempObj1[1], tempObj1[2], tempObj1[3]],
        });
      },
    });
  };

  //时间筛选器返回的时间数据
  updateSelectDate = (date, index) => {
    let { enquiryTrendParams } = this.state;
    let _this = this;
    if (index == '_enquiry_trend') {
      //询盘趋势的时间筛选
      enquiryTrendParams = { ...enquiryTrendParams, ...date };
      this.setState({ enquiryTrendParams }, () => {
        _this.getEnquiryTrend();
      });
    }
  };


  render() {
    const { headerModuleLoadingStatus, overViewData, enquiryTrendInitLoading, enquiryTrendData,} = this.state;
    return (
      <div className={`${stat.saling_stat} ${stat.stat_part}`}
           style={{ flex: 1 }}>
        <SldScrollbars
          autoHeight
          autoHeightMin={100}
          autoHeightMax={document.body.clientHeight - 60}
        >
          <div className={`${stat.label_panel}`} style={{ background: '#fff' }}>
            {sldLlineRtextAddMargin(defaultSettings.primaryColor, `${sldComLanguage('询盘总览')}`, 10, 0, 0)}
          </div>

          {/* 用户总览-start */}
          <Spin spinning={headerModuleLoadingStatus}>
            <OverView tabItem={4} data={overViewData} geEnquiryPreviewData={this.geEnquiryPreviewData}/>
          </Spin>
          {/* 用户总览-end */}

          {/* 变化趋势-start */}
          <div style={{ margin: '10px 0', width: '100%' }} className={`${stat.common_table_item}`}>
            {/* 询盘统计-start */}
            <div style={{ margin: '10px 0', width: '100%' }} className={`${stat.common_table_item}`}>
              <div className={`${stat.label_panel} ${global.flex_row_between_center}`}>
                <div className={`${global.flex_row_start_center}`}>
                  {sldLlineRtextAddMargin(defaultSettings.primaryColor, `${sldComLanguage('询盘趋势')}`, 10, 0, 0)}
                </div>
                <SldStatDate idIndex={'_enquiry_trend'} isEnquiry={true}
                             updateSelectDate={(date) => this.updateSelectDate(date, '_enquiry_trend')}/>
              </div>
              <Spin spinning={enquiryTrendInitLoading}>
                <div className={`${stat.stat_common_table}`} style={{ paddingLeft: 10, height: 498 }}>
                  {enquiryTrendData.length>0
                    ?<LineArea data={enquiryTrendData}/>
                    :noDataPlaceholder()
                  }
                </div>
              </Spin>
            </div>
            {/* 询盘统计-end */}
          </div>
          {/* 变化趋势-end */}
        </SldScrollbars>
      </div>
    );
  }
}
