import { connect } from 'dva/index';
import moment from 'moment';
import React, { Component } from 'react';
import { Form, Spin, } from 'antd';
import {sldLlineRtextAddGoodsAddMargin,sldComLanguage,noDataPlaceholder } from '@/utils/utils';
import global from '@/global.less';
import stat from '@/assets/css/stat.less';
import SldStatDate from '@/components/SldStatDate';
import LineArea from '@/components/SldStatBizcharts/LineArea';
import defaultSettings from '@/defaultSettings';

@connect(({ common }) => ({
  common
}))
@Form.create()

export default class EnquiryTrend extends Component {
  constructor(props) {
    super(props);
    this.state = {
      enquiryTrendInitLoading: false,//询盘趋势模块加载状态
      enquiryTrendParams:{
        startTime: (moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'),
        endTime: (moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59:999'),
      },//询盘趋势的筛选条件
      enquiryTrendData:[],//询盘趋势数据=
    };
  }

  componentDidMount() {
    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.enquiryTrendList;
          for(let i in data){
            enquiryTrendData.push({
              month:data[i].statsTime,
              city:`${sldComLanguage('询盘量')}`,
              temperature:data[i].viewNum,
            })
          }
          this.setState({
            enquiryTrendData,
          });
        }
      },
    });
  }

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

  render() {
    const { enquiryTrendInitLoading, enquiryTrendData, } = this.state;
    return (
      <div className={`${stat.visualized_item}`}>
        <div className={`${stat.top_info_operate} ${global.flex_com_space_between}`}>
          <div className={`${stat.left_label}`}>
            {sldLlineRtextAddGoodsAddMargin(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.main_area}`}>
            {enquiryTrendData.length>0
              ?<LineArea data={enquiryTrendData}/>
              :noDataPlaceholder()
            }
          </div>
        </Spin>
      </div>
    );
  }
}
