/**
 * 互联网医院数据监测中心
 *  * Creator:     ML
 * CreatDate:   2020-05-26
 * descripts：  互联网医院数据监测中心 交易 新增用户 订单统计 中
 */
import React from 'react';
import { Form, Row, Col, Input, Button, message, Table, Select, Popconfirm, Modal, Steps, DatePicker, Switch, Icon, Upload, Spin } from 'antd';
import { Util, } from 'tools/index';
import '../style/index.less';
import DataSet from "@antv/data-set";
import { $http } from '../../../containers/config/https';
import echarts from 'echarts';
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';
import { geoCoordMap, provienceData } from './geo';
import { Chart, Geom, Axis, Coord, Label, Legend, Tooltip, Guide, Shape, G2, Facet, } from 'bizcharts';
var loadInterface;
var timeout;

class ShowOrderListBIPage extends React.Component {

  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData: userData,
      numberData: [],
      doctorThree: [
        { "docDesc": "5月21日", "clinic": "图文咨询", "flag": 1, "value": 1 },
        { "docDesc": "5月21日", "clinic": "处方订单", "flag": 1, "value": 16 },
        { "docDesc": "5月21日", "clinic": "视频问诊", "flag": 2, "value": 10 },
        { "docDesc": "5月22日", "clinic": "图文咨询", "flag": 1, "value": 11 },
        { "docDesc": "5月22日", "clinic": "视频问诊", "flag": 2, "value": 18 },
        { "docDesc": "5月22日", "clinic": "处方订单", "flag": 1, "value": 28 },
        { "docDesc": "5月23日", "clinic": "视频问诊", "flag": 1, "value": 28 },
        { "docDesc": "5月23日", "clinic": "图文咨询", "flag": 1, "value": 41 },
        { "docDesc": "5月23日", "clinic": "视频问诊", "flag": 2, "value": 36 },
        { "docDesc": "5月24日", "clinic": "处方订单", "flag": 1, "value": 30 },
        { "docDesc": "5月24日", "clinic": "图文咨询", "flag": 1, "value": 50 },
        { "docDesc": "5月24日", "clinic": "视频问诊", "flag": 2, "value": 50 },
        { "docDesc": "5月25日", "clinic": "处方订单", "flag": 1, "value": 40 },
        { "docDesc": "5月25日", "clinic": "图文咨询", "flag": 1, "value": 60 },
        { "docDesc": "5月25日", "clinic": "视频问诊", "flag": 2, "value": 58 },
        { "docDesc": "5月26日", "clinic": "图文咨询", "flag": 1, "value": 72 },
        { "docDesc": "5月26日", "clinic": "处方订单", "flag": 1, "value": 50 },
        { "docDesc": "5月26日", "clinic": "视频问诊", "flag": 2, "value": 62 },
      ]
    }
  }
  componentDidMount() {
    this.getNumberOfGraphicAVideoC()
    this.loadSendOrderList()//订单配送统计
    loadInterface = setInterval(() => {
      this.getNumberOfGraphicAVideoC()
    }, 15000)
    timeout = setInterval(() => {
      this.loadSendOrderList()//订单配送统计
    }, 12 * 60 * 60 * 1000)
  }

  componentWillUnmount() {
    clearTimeout(loadInterface)
    clearTimeout(timeout)
  }

  //获取图文和视频问诊数量
  getNumberOfGraphicAVideoC = () => {
    const { userData, } = this.state
    let data = {}
    data = {
      params: [{
        hospID: userData && userData.hospID || "",
      }],
    };
    $http.post('urlS', this, {
      code: "03100118",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          var { numberData } = this.state;
          var data = res.result;
          if (!Util.isEmpty(numberData)) {
            for (var i = 0; i < numberData.length; i++) {
              for (var j = 0; j < data.length; j++) {
                if (numberData[i].name == data[j].name) {
                  numberData[i]['addCount'] = data[j].todayCount - numberData[i].todayCount
                  numberData[i]['todayCount'] = data[j].todayCount
                  numberData[i]['prop'] = data[j].prop
                }
              }
            }
            setTimeout(() => { this.setState({}) }, 500)

          } else {
            this.setState({
              numberData: res.result
            })
          }
        }
      }
    });
  }
  loadSendOrderList() {
    var params = {
      params: [{}]
    }
    $http.post('urlDeault', this, {
      code: "03030091",
      data: params,
      success: function (res) {
        if (res.errorCode == '0') {
          this.setState({
            orderList: res.result
          }, () => {
            this.initalECharts();
          })
        }
      }
    });
  }

  initalECharts() {
    echarts.registerMap('china', geoJson);
    // for (const item of this.state.orderList) {
    //   if (item.name === '黑龙江' || item.name === '吉林' || item.name === '辽宁') {
    //     item.itemStyle = {
    //       normal: {
    //         areaColor: '#3CA2FC',
    //       },
    //       emphasis: {
    //         areaColor: '#3CA2FC',
    //       }
    //     }
    //   } else if (item.name === '河北' || item.name === '山东' || item.name === '河南'
    //     || item.name === '山西' || item.name === '北京' || item.name === '天津') {
    //     item.itemStyle = {
    //       normal: {
    //         areaColor: '#6CAFBE',
    //       },
    //       emphasis: {
    //         areaColor: '#6CAFBE',
    //       }
    //     }
    //   } else if (item.name === '湖南' || item.name === '湖北' || item.name === '江西'
    //     || item.name === '安徽') {
    //     item.itemStyle = {
    //       normal: {
    //         areaColor: '#ADD03C',
    //       },
    //       emphasis: {
    //         areaColor: '#ADD03C',
    //       }
    //     }
    //   } else if (item.name === '浙江' || item.name === '江苏' || item.name === '上海') {
    //     item.itemStyle = {
    //       normal: {
    //         areaColor: '#A13614',
    //       },
    //       emphasis: {
    //         areaColor: '#A13614',
    //       }
    //     }
    //   } else if (item.name === '四川' || item.name === '甘肃' || item.name === '云南'
    //     || item.name === '陕西' || item.name === '贵州' || item.name === '重庆' || item.name === '宁夏') {
    //     item.itemStyle = {
    //       normal: {
    //         areaColor: '#FFBA00',
    //       },
    //       emphasis: {
    //         areaColor: '#FFBA00',
    //       }
    //     }
    //   } else if (item.name === '广西' || item.name === '广东' || item.name === '福建'
    //     || item.name === '海南') {
    //     item.itemStyle = {
    //       normal: {
    //         areaColor: '#FFD300',
    //       },
    //       emphasis: {
    //         areaColor: '#FFD300',
    //       }
    //     }
    //   } else if (item.area === '南海诸岛') {
    //     item.itemStyle = {
    //       normal: {
    //         borderColor: '#fff', // 区域边框颜色
    //         areaColor: '#fff', // 区域颜色
    //       },
    //       emphasis: {
    //         show: false,
    //         // borderColor: '#fff',
    //         // areaColor:"#fff",
    //       }
    //     }
    //   } else {
    //     item.itemStyle = {
    //       normal: {
    //         areaColor: '#D9D9D9',
    //       },
    //       emphasis: {
    //         areaColor: '#D9D9D9',
    //       }
    //     }
    //   }
    // }
    const myChart = echarts.init(document.getElementById('mainMap'));
    myChart.setOption({
      tooltip: {
        show: false, // 不显示提示标签
        // formatter: '{b}', // 提示标签格式
        //鼠标放地图的某一块，显示的提示框
        formatter(params, ticket, callback) {
          return `订单数<br />${params.name}：${params.value}`
        },
        backgroundColor: '#ff7f50', // 提示标签背景颜色
        textStyle: { color: '#fff' } // 提示标签字体颜色
      },
      grid: {
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.2,
        tooltip: {
          show: false, // 不显示提示标签
        },
        label: {
          normal: {
            show: false, // 显示省份标签
            textStyle: { color: '#c71585' }// 省份标签字体颜色
          },
          emphasis: {// 对应的鼠标悬浮效果
            show: false,
            textStyle: { color: '#800080' }
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 0.5, // 区域边框宽度
            borderColor: '#000', // 区域边框颜色
            areaColor: '#ffefd5', // 区域颜色
            label: { show: false }
          },
          emphasis: {
            show: false,
            borderWidth: 0.5,
            borderColor: '#4b0082',
            areaColor: '#ffdead',
          }
        },
      },
      visualMap: {
        type:'piecewise',
        // min: 0,
        // max: 2000,
        // text: ['高', '低'],
        realtime: false,
        calculable: true,
        bottom: '22%',
        textStyle: { color: 'white' },
        pieces:[{
          value:0,
          color:'white'
        },{
          min:1,
          max:10,
          color:'#bae7ff'
        },{
          min:11,
          max:20,
          color:'#69c0ff'
        },{
          min:21,
          max:50,
          color:'#1890ff'
        },{
          min:51,
          max:100,
          color:'#096dd9'
        },{
          min:101,
          color:'#003a8c'
        }],
        left: '7%',
        // inRange: {
        //   // color: ['lightskyblue', 'yellow', 'orangered']
        //   color: ['#bae7ff', '#91d5ff', '#69c0ff', '#40a9ff', '#1890ff', '#096dd9', '#0050b3', '#003a8c', '#002766']
        // }
      },
      series: [
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          // data: this.convertData(data),
          symbolSize: 1,
          symbolRotate: 40,
          label: {
            normal: {
              formatter: '{b}',
              position: 'top',
              show: true
            },
            emphasis: {
              show: false
            }
          },
          tooltip: {
            show: false, // 不显示提示标签
            // 显示提示的标签
            formatter(name) {
              return `Legend ${name}`;
            }, // 提示标签格式
            backgroundColor: '#fff', // 提示标签背景颜色
            borderColor: '#ccc',
            borderWidth: 5,
            textStyle: { color: '#000' } // 提示标签字体颜色
          },
          itemStyle: {
            normal: {
              color: 'black'
            }
          }
        },
        {
          type: 'map',
          mapType: 'china',
          roam: false,
          zoom: 1.2,
          tooltip: {
            show: false, // 不显示提示标签
          },
          label: {
            normal: {
              show: true // 显示省份标签
            },
            emphasis: {
              show: false,
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 0.5, // 区域边框宽度
              borderColor: '#fff', // 区域边框颜色
              label: { show: false }
            },
            emphasis: {
              show: false,
            }
          },
          // geoIndex: 0,
          //鼠标放入地图显示提示框
          tooltip: { show: true },
          data: this.state.orderList
        }
      ],
    })

    // 鼠标放上颜色变红
    // myChart.on('mouseover', params => {
    //     params.color = '#d50000'
    //     params.event.target.style.fill = '#d50000'
    // });

    myChart.on('click', params => {
      if (params.name === '海南') {
        this.props.history.push('/Dashboard/map2')
      }
    });
  }

  convertData(data) {
    const res = [];
    for (let i = 0; i < data.length; i++) {
      const geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          // name: data[i].name,
          value: geoCoord.concat(data[i].area),
          area: data[i].area,
          type: data[i].type,
          InValue: data[i].InValue
        });
      }
    }
    return res;
  }

  convert() {
    return '1';
  }


  render() {
    const { numberData } = this.state
    // const numberData = [
    //   {
    //     key: "0",
    //     description: "较上日",
    //     descriptionStatus:"+1%",
    //     value: "555.1",
    //     valueStatus:"2",
    //     small: "图文咨询",
    //     smallValue: "",
    //     code: "1",
    //     status: ""
    //   }, {
    //     key: "0",
    //     description: "较上日",
    //     descriptionStatus:"+111%",
    //     value: "3569",
    //     valueStatus:"8",
    //     small: "视频问诊",
    //     smallValue: "",
    //     code: "1",
    //     status: ""
    //   }, {
    //     key: "0",
    //     description: "较上日",
    //     descriptionStatus:"-10%",
    //     value: "66",
    //     valueStatus:"12",
    //     small: "处方订单",
    //     smallValue: "",
    //     code: "1",
    //     status: ""
    //   }, {
    //     key: "0",
    //     description: "",
    //     value: "732555.1",
    //     valueStatus:"212",
    //     small: "累计线上订单",
    //     smallValue: "",
    //     code: "1",
    //     status: ""
    //   }, {
    //     key: "0",
    //     description: "",
    //     value: "1010566",
    //     small: "累计注册用户",
    //     smallValue: "",
    //     code: "1",
    //     status: ""
    //   }, {
    //     key: "0",
    //     description: "",
    //     value: "10390",
    //     valueStatus:"20",
    //     small: "累计就诊用户",
    //     smallValue: "",
    //     code: "-1",
    //     status: ""
    //   },]
    const colsPointOne = {
      docDesc: {
        range: [0, 1]
      }
    };
    const dsThree = new DataSet();
    const dvThree = dsThree
      .createView()
      .source(this.state.doctorThree)
    // .transform({
    //   type: "percent",
    //   field: "value",
    //   // 统计销量
    //   dimension: "clinic",
    //   // 每年的占比
    //   groupBy: ["docDesc"],
    //   // 以不同产品类别为分组
    //   as: "percent"
    // });
    let topBlock = []
    numberData && numberData.map((item, i) => {
      topBlock.push(
        <Col span={7} style={{
          textAlign: "center", background: "rgb(0,31,95)",
          color: "#fff", margin: "0 5px 10px",
          height: "140px",
          display: "flex", alignItems: "center",
          justifyContent: "center",
          boxSizing: "border-box"
        }}>
          <div>
            <p>

              <span style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center"
              }}>
                <span>
                  {item.compare && item.compare || ""}
                </span>
                <span style={{
                  color: "rgb(255,154,0)",
                  height: "16px",
                  lineHeight: "16px",
                  width: "20px",
                  alignItems: "center",
                  justifyContent: "center",
                  padding: "12px",
                  fontSize: "12px",
                  marginLeft: "12px",
                  display: "flex"
                }}>
                  {
                    item.prop && item.prop ? item.prop : ""
                  }
                </span>
              </span>
            </p>
            <p style={{ fontSize: "22px", fontWeight: "600", color: "rgb(255,154,0)", }}>

              <span style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center"
              }}>
                <span>
                  {(item.name == '累计注册用户' || item.name == '累计就诊人次') ? (item.count && item.count || "--") : (item.todayCount && item.todayCount || "--")}
                </span>
                <span style={{
                  backgroundColor: "rgb(249, 50, 102)",
                  color: "#fff",
                  height: "16px",
                  lineHeight: "16px",
                  borderRadius: "50%",
                  width: "20px",
                  alignItems: "center",
                  justifyContent: "center",
                  padding: "12px",
                  fontSize: "12px",
                  marginLeft: "6px",
                  display: item.addCount && item.addCount > 0 ? "flex" : "none"
                }}>
                  {
                    item.addCount && item.addCount > 99 ? "99+" : "+" + item.addCount
                  }
                </span>
              </span>
            </p>
            <p >
              <span style={{
                fontSize: "18px"
              }}>{
                  item.name
                }</span>
              {/* <span style={{ marginLeft: "4px", }}>
              {
                item.smallValue
              }
            </span> */}
              {/* <span style={{ color: (item.code == "1" ? "red" : "green"), marginLeft: "4px" }}>{item.code=="1"?<Icon type="arrow-up" />:<Icon type="arrow-down" />}</span> */}
            </p>
          </div>
        </Col>
      )
    })

    /**地图 */
    const { mapData } = this.state;
    const colors = '#075A84,#3978A4,#6497C0,#91B6D7,#C0D6EA,#F2F7F8'
      .split(',')
      .reverse();

    let bgView;
    let interval;
    let min = 0;
    if (mapData) {
      // data set
      const ds = new DataSet();

      // draw the map
      const dv = ds
        .createView('back')
        .source(mapData, {
          type: 'GeoJSON',
        })
        .transform({
          type: 'geo.projection',
          projection: 'geoMercator',
          as: ['x', 'y', 'centroidX', 'centroidY'],
        });

      bgView = new DataSet.View().source(dv.rows);
      const sizes = bgView.rows.map(r => Number(r.properties.size));

      const min = Math.min(...sizes);
      const max = Math.max(...sizes);

      interval = (max - min) / colors.length;
    }

    const scale = {
      x: { sync: true },
      y: { sync: true },
    };

    return <div className="orderLisiBI-dom">
      <div>
        <Row style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" ,marginLeft:20}}>
          {topBlock}
        </Row>
        <Row style={{ width: '100%', backgroundColor: "rgb(0, 31, 95)", marginTop: 2, marginLeft: 10 }}>
          <p style={{ color: "#fff", textAlign: "center", marginTop: 10 }}>
            互联网医院物流订单分布
        </p>
          <div className="App">
            <div id="mainMap" style={{ width: '100vm', height: '100vh', position: 'relative', bottom: (this.props.allHeight == true?'180px': '254px') }}></div>
          </div>
        </Row>
      </div>
    </div>
  }
}

export default ShowOrderListBIPage;