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, Icon } from 'antd';
import { getToday, ShowModal } from '@/tools';
import ShowModalDiv from "@/showModal.jsx";
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: {},
      htmlMenus: [],
    }
  },

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

  mainMenu() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/selectNavList",
      data: {},
      success: function (data) {
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
            return;
          }
        }
        let menu = data.data;
        this.setState({
          htmlMenus: menu,
        });
      }.bind(this),
    }).always(
      function (data) {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  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)
    );
  },

  clean() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/statistics/salesTeam/clean",
      success: function (data) {
        if (data.error && data.error.length === 0) {
          ShowModal(this);
          this.setState({
            loading: false,
          });
          this.loadData();
        } 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();
  },

  getNewUrl(url, cd) {
    const { htmlMenus = [] } = this.state
    let id = ''
    htmlMenus.map(function (item) {
      if (item.url == url) {
        id = item.id;
      }
    });
    return `${url}?rid=${id}#${cd}`
  },

  isTime(second) {
    let time = "0秒"
    if (second > 3600) {
      time = moment.utc(second * 1000).format('h小时m分s秒')
    } else if (second > 60) {
      time = moment.utc(second * 1000).format('m分s秒')
    } else if (second > 0) {
      time = moment.utc(second * 1000).format('s秒')
    }
    return time
  },

  render() {
    const { status, info, data } = this.state
    const list = [
      { type: 0, color: "#99FFFF", title: "全部签单客户数:", sum: info.signSum, tit: "签单客户数", number: info.rangeSignSum, url: this.getNewUrl("/admin/customer.html", "companySign") },
      { type: 0, color: "#FFFFCC", title: "全部私有客户数:", sum: info.privateSum, tit: "私有客户数", number: info.rangePrivateSum, url: this.getNewUrl("/admin/customer.html", "companyIntention") },
      { type: 0, color: "#FFCCCC", title: "全部渠道数:", sum: info.channelSum, tit: "私有渠道数", number: info.rangeChannelSum, url: this.getNewUrl("/admin/channelList.html", "channelunit") },
      { type: 0, color: "#99CCFF", title: "全部公出数:", sum: info.publicReleaseSum, tit: "公出企业数", number: info.rangePublicReleaseSum, url: "" },
      { type: 0, color: "#99FFCC", title: "全部跟进客户数:", sum: info.followSum, tit: "跟进客户数", number: info.rangeFollowSum, url: this.getNewUrl("/admin/customer.html", "followUpSummaryOrdinary") },
      { type: 0, color: "#CC99CC", title: "全部订单数:", sum: info.orderSum, tit: "订单数", number: info.rangeOrderSum, url: this.getNewUrl("/admin/order.html", "billing") },
      { type: 0, color: "#99CCCC", title: "全部应收款:", sum: info.receivables, tit: "应收款", number: info.rangeReceivables, url: this.getNewUrl("/admin/order.html", "press") },
      {
        type: 0, color: "#FFCC99", title: "待紧急处理事项",
        list: [
          { key: "被驳回订单:", value: info.rejectSum, url: this.getNewUrl("/admin/order.html", "reject") },
          { key: "待变更订单:", value: info.changeSum, url: this.getNewUrl("/admin/order.html", "contractChangeYxy") },
          { key: "待核对专利:", value: info.projectCheckSum, url: this.getNewUrl("/admin/project.html", "businessManagement") },
          { key: "暂停项目:", value: info.projectStopSum, url: this.getNewUrl("/admin/order.html", "mysuspend") },]
      },
      {
        type: 1, color: "#FFCC99", title: "本人",
        list: [
          { key: "• 拨出次数:", value: info.callSum, url: "" },
          { key: "• 接通次数:", value: info.connectSum, url: "" },
          { key: "• 有效次数:", value: info.validSum, url: "" },
          { key: "• 时长:", value: this.isTime(info.callDurationSum), url: "" },
        ]
      },
      {
        type: 1, color: "#FFCC99", title: "本团队",
        list: [
          { key: "• 团队人数:", value: info.teamPeopleSum, url: "" },
          { key: "• 拨出次数:", value: info.teamCallSum, url: "" },
          { key: "• 接通次数:", value: info.teamConnectSum, url: "" },
          { key: "• 有效次数:", value: info.teamValidSum, url: "" },
          { key: "• 时长:", value: this.isTime(info.teamCallDurationSum), url: "" },
        ]
      }
    ]
    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,
        // axisLabel: {
        //   interval: 0, // 设置X轴刻度间隔为0
        // },
        data: data.dates
      },
      yAxis: {
        type: 'value'
      },
      color: ['#99FFFF', '#cccca3', '#FFCCCC', '#99CCFF', '#99FFCC', '#CC99CC'],
      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">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <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}>
            <div className='plist'>
              {
                list.map((item, index) => {
                  return item.type == 0
                    ? <div className='plitem' style={{ background: item.color }} key={index}>
                      <div className='plititle'>
                        <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
                        <a href={globalConfig.context + item.url}>
                          <span className='plisum'>{item.sum}</span>
                        </a>
                      </div>
                      {
                        item.title == "待紧急处理事项"
                          ? <div className='list'>
                            {
                              item.list.map((t, i) =>
                                <div key={i}>
                                  <span>{t.key}</span>
                                  <a href={globalConfig.context + t.url}>
                                    <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
                                  </a>
                                </div>
                              )
                            }
                          </div>
                          : <div className='count'>
                            <a href={globalConfig.context + item.url}><div className='plinum'>{item.number}</div></a>
                            <div className='plitit'>{item.tit}</div>
                          </div>
                      }
                    </div> :
                    (item.type == 1 && item.list[0].value !== null)
                      ? <div className='plitems' style={{ background: item.color }} key={index}>
                        <div className='pleft'>
                          <div className='round'><Icon type="phone" style={{ fontSize: 40, color: "#fff" }} /></div>
                          <div>{item.title}</div>
                        </div>
                        <div>
                          {
                            item.list.map((t, i) =>
                              <div key={i}>
                                <span>{t.key}</span>
                                <a href="">
                                  <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
                                </a>
                              </div>
                            )
                          }
                        </div>
                        {/* <div className='refresh' onClick={this.clean}>刷新</div> */}
                      </div> : null
                }
                )
              }

            </div>
          </Spin>
          <ReactEcharts option={option} echarts={echarts} />
        </div>
      </div>
    );
  },
});

export default Statistics;