import { url } from 'inspector';
import React, { memo, useEffect } from 'react';
import * as echarts from 'echarts';

import './index.scss'
import myEvent from '../../../type/event';

export default memo(function HomePage() {
  useEffect(() => {
    const statisticDOM = document.getElementById('lg_help_statistic_charts'); // 挂载
    if (statisticDOM) {
      const statisticCharts = echarts.init(statisticDOM);
      let option = {
        grid: { // 表格大小位置设置
          x: "8%",//x 偏移量
          y: "26%", // y 偏移量
          width: "83%", // 宽度
          height: "60%"// 高度
        },
        // 添加tooltip提示
        tooltip: {
          trigger: 'axis'
        },
        legend: { // 折线图右侧小标位置及样式设置
          x: '68%',
          y: '8%',
          itemWidth: 13,
          itemHeight: 9,
          textStyle: {
            fontSize: 12,
            color: '#999'
          },
          data: [{
            name: '学生求助人数',
          }, {
            name: '月均人次',
          }]
        },
        xAxis: {
          name: '日期',
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#999',
            padding: [0, 0, 0, 10]
          },
          axisLine: {
            show: false,    // 是否显示坐标轴轴线
          },
          axisTick: {
            show: false,    // 是否显示坐标轴刻度
          },
          axisLabel: {
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          name: '人数',
          type: 'value',
          nameTextStyle: {
            color: '#999',
            padding: [0, 0, 2, 0]
          },
          // 隐藏y轴
          axisLine: {
            show: false
          },
          // 隐藏刻度线
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 25,
            color: '#999999'
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec", "#ececec"],
            },
          },
        },
        series: [
          {
            name: '学生求助人数',
            data: [76, 60, 45, 48, 70, 72, 42, 32, 60, 78, 60, 55],
            type: 'line',
            smooth: true,
            showSymbol: false, // 去除折线上的点
            lineStyle: {
              color: '#ff761b',
              fontColor: '#999',
              width: 1.5
            },
            itemStyle: {
              color: '#ff761b'
            }
          },
          {
            name: '月均人次',
            data: [40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
            type: 'line',
            smooth: true,
            showSymbol: false, // 去除折线上的点
            lineStyle: {
              color: '#0099ff',
              width: 1.4
            },
            itemStyle: {
              color: '#0099ff'
            },
            areaStyle: {
              color: '#b0d4e7'
            }
          },
        ]
      };
      statisticCharts.setOption(option);
    }
  }, [])

  useEffect(() => {
    return () => {

    }
  }, [])

  const appointSettingClick = () => {
    myEvent.emit('sideBarClick', {
      name: '预约时间设置',
      routerPath: 'meltalHealth/counsellingAppoint/appointTimeSetting'
    })
  }

  return (
    <div className='lg_mentalHealth_homePage'>
      <div className="lg_data_view">
        <div className="lg_graduate_data_total">
          <BlueTitle value="毕业数据总览" />
          <div className="lg_data_total_content">
            <DataItem text='今日预约人数' count='16' unit='人'></DataItem>
            <DataItem text='累计帮助学生人次' count='5600' unit='次'></DataItem>
            <DataItem text='心理咨询师数量' count='15' unit='名'></DataItem>
            <DataItem text='累计问卷填写数量' count='108' unit='份'></DataItem>
          </div>
        </div>
        <div className="lg_stu_help_statistic">
          <BlueTitle value="学生心理求助统计" />
          <div id="lg_help_statistic_charts">
          </div>
        </div>
      </div>
      <div className="lg_appoint_info">
        <div className="lg_data_title">
          <div className="lg_title_left"></div>
          <div className="lg_title_text">预约情况</div>
          <div className="lg_title_right_operate" onClick={appointSettingClick}>
            <div className="lg_icon"></div>
            <span>预约设置</span>
          </div>
        </div>
        
      </div>
    </div>
  )
})

interface BlueTitleProps {
  value: string
}

function BlueTitle(props: BlueTitleProps) {
  return (
    <div className="lg_data_title">
      <div className="lg_title_left"></div>
      <div className="lg_title_text">{props.value}</div>
    </div>
  )
}

interface DataItemProps {
  text: string,
  count: string,
  unit: string
}

function DataItem(props: DataItemProps) {
  const { text, count, unit } = props;
  return (
    <div className="lg_data_item">
      <div className="lg_data_left_img"></div>
      <div className="lg_data_right_textCount">
        <div className="lg_data_top">{props.text}</div>
        <div className="lg_data_bottom">
          <span>{props.count}</span><span>{props.unit}</span>
        </div>
      </div>
    </div>
  )
}