import React from 'react';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import moment from 'moment';
import '@/manageCenter/financialManage/distribute/public.less';
import { Button, Spin, DatePicker, Radio, message } from 'antd';
import { getToday, ShowModal } from '@/tools';
import './index.less';

import ReactEcharts from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/grid';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker

const Statistics = React.createClass({

  getInitialState() {
    return {
      status: 1,
      releaseDate: getToday(1),
      info: {},
      data: {},
    }
  },

  componentWillMount() {
    this.loadData();
    this.getData();
  },

  loadData() {
    const { releaseDate } = this.state
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/statistics/info",
      data: {
        startTime: releaseDate[0],
        endTime: releaseDate[1],
      },
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          this.setState({
            info: data.data
          })
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  getData() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/statistics/lists",
      success: function (data) {
        if (data.error && data.error.length === 0) {
          this.setState({
            data: data.data,
          })
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  search() {
    this.loadData();
  },

  reset() {
    this.state.releaseDate = []
    this.loadData();
  },

  render() {
    const { status, info, data } = this.state
    const list = [
      { color: "#99FFFF", title: "全部签单客户数：", sum: info.signSum, tit: "签单客户数", number: info.rangeSignSum },
      { color: "#FFFFCC", title: "全部私有客户数：", sum: info.privateSum, tit: "私有客户数", number: info.rangePrivateSum },
      { color: "#FFCCCC", title: "全部渠道数：", sum: info.channelSum, tit: "私有渠道数", number: info.rangeChannelSum },
      { color: "#99CCFF", title: "全部公出数：", sum: info.publicReleaseSum, tit: "公出企业数", number: info.rangePublicReleaseSum },
      { color: "#99FFCC", title: "全部跟进客户数：", sum: info.followSum, tit: "跟进客户数", number: info.rangeFollowSum },
      { color: "#CC99CC", title: "全部订单数：", sum: info.orderSum, tit: "订单数", number: info.rangeOrderSum },
      { color: "#99CCCC", title: "全部应收款：", sum: 10.54, tit: "应收款", number: 0.25 },
      {
        color: "#FFCC99", title: "待紧急处理事项", sum: "", tit: "签单客户数", number: "",
        list: [{ key: "被驳回订单：", value: info.rejectSum }, { key: "待变更订单：", value: info.changeSum }, { key: "待核对订单：", value: info.projectCheckSum }, { key: "暂停项目：", value: info.projectStopSum },]
      },
    ]
    const option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['签单客户数', '私有客户数', '私有渠道数', '公出企业数', '跟进客户数', '订单数',]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.dates
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '签单客户数',
          type: 'line',
          data: data.signList
        },
        {
          name: '私有客户数',
          type: 'line',
          data: data.privateList
        },
        {
          name: '私有渠道数',
          type: 'line',
          data: data.channelList
        },
        {
          name: '公出企业数',
          type: 'line',
          data: data.publicReleaseList
        },
        {
          name: '跟进客户数',
          type: 'line',
          data: data.userFollowList
        },
        {
          name: '订单数',
          type: 'line',
          data: data.orderList
        }
      ]
    }
    return (
      <div className="user-content">
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
        </div>
        <div className="user-search">
          <RadioGroup value={status}
            onChange={e => {
              this.setState({
                status: e.target.value
              })
              if (e.target.value == 0) {
                this.setState({
                  releaseDate: []
                })
              } else {
                this.setState({
                  releaseDate: getToday(e.target.value)
                }, () => {
                  this.loadData()
                })
              }
            }}
          >
            <RadioButton value={1}>今日</RadioButton>
            <RadioButton value={2}>昨日</RadioButton>
            <RadioButton value={3}>近7日</RadioButton>
            <RadioButton value={4}>近15日</RadioButton>
            <RadioButton value={5}>近30日</RadioButton>
            <RadioButton value={0}>自定义</RadioButton>
          </RadioGroup>
          {
            status == 0 &&
            <span>
              <RangePicker
                style={{ width: 200, marginLeft: 15 }}
                value={[
                  this.state.releaseDate[0]
                    ? moment(this.state.releaseDate[0])
                    : null,
                  this.state.releaseDate[1]
                    ? moment(this.state.releaseDate[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ releaseDate: dataString })
                }}
              />
              <Button style={{ margin: "0 15px" }} type="primary" onClick={this.search}>搜索</Button>
              <Button onClick={this.reset}>重置</Button>
            </span>
          }
        </div>
        <div className="patent-table">
          {/* <Spin spinning={this.state.loading}>

          </Spin> */}
          <div className='plist'>
            {
              list.map((item, index) =>
                <div className='plitem' style={{ background: item.color }} key={index}>
                  <div className='plititle'>
                    <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
                    <span className='plisum'>{item.sum}</span>
                  </div>
                  {
                    item.title == "待紧急处理事项"
                      ? <div className='list'>
                        {
                          item.list.map((t, i) =>
                            <div key={i}>
                              <span>{t.key}</span>
                              <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
                            </div>
                          )
                        }
                      </div>
                      : <div className='count'>
                        <div className='plinum'>{item.number}</div>
                        <div className='plitit'>{item.tit}</div>
                      </div>
                  }
                </div>
              )
            }
          </div>
          <ReactEcharts option={option} echarts={echarts} />
        </div>
      </div>
    );
  },
});

export default Statistics;