import {Modal, Tabs, Switch} from 'antd'
import React, {useEffect, useState} from 'react';
import ReactEcharts from "echarts-for-react";
import "./index.less"

const SyglPage: React.FC = () => {
  const [echartsOption, setEchartsOption] = useState({});

  const [echartsOptionGxnl, setEchartsOptionGxnl] = useState({});

  const [qslEchart, setQslEchart] = useState({});

  useEffect(()=>{
    var echartData = [
      {
      value: 16,
      name: '水库'
    }, {
      value: 90,
      name: '河流'
    }, {
      value: 47,
      name: '溪沟'
    }, {
      value: 15,
      name: '塘坝'
    }];

    const option = {
      title: {
        text:'168',
        subtext: '水源总数',
        x: '24%',
        top:'33%',
        padding:[24,0],
        textStyle:{
          color:'#fff',
          fontSize:20,
          align:'center',
        },
        subtextStyle: {
          color: '#A6AFC0',
          fontSize: 16,
          padding:[24,0],
        },
      },
      legend: {
        //data: [echartData[0].name],
        orient: 'vertical',
        textStyle: {
          color: "#fff",
          fontSize: 15,
        },
        top:"24%",
        right:"15%",
        formatter: (name:any) => {
          //console.log(name);
          //console.log(chartData);
          let item:any = echartData.find((i) => {
            return i.name == name;
          });
          let p = item.value;
          return name + '：' + p;
        },
      },
      series: [{
        name: '水源总数',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['30%', '52%'],
        hoverAnimation: false,
        color: ['#EDDB37', '#ED7037', '#29DC6D', '#00A3ED'],
        label: {
          normal: {
            show: false
          }
        },
        data: echartData
      }]
    };
    setEchartsOption(option);

    let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
    let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
    let chartData = [
      {
      name: "水库：100个水厂",
      value: 15,
      unit: '万吨'
    },
      {
        name: "河流：54个水厂",
        value: 8,
        unit: '万吨'
      },
      {
        name: "塘坝：29个水厂",
        value: 15,
        unit: '万吨'
      },
      {
        name: "溪沟：30个水厂",
        value: 2,
        unit: '万吨'
      }
    ];
    let arrName = [];
    let arrValue = [];
    let sum = 0;
    let pieSeries:any = [],
      lineYAxis:any = [];

    // 数据处理
    chartData.forEach((v, i) => {
      arrName.push(v.name);
      arrValue.push(v.value);
      sum = sum + v.value;
    })

    // 图表option整理
    chartData.forEach((v, i) => {
      pieSeries.push({
        name: '学历',
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
        center: ["30%", "50%"],
        label: {
          show: false
        },
        data: [{
          value: v.value,
          name: v.name
        }, {
          value: sum - v.value,
          name: '',
          itemStyle: {
            color: "rgba(0,0,0,0)"
          }
        }]
      });
      pieSeries.push({
        name: '',
        type: 'pie',
        silent: true,
        z: 1,
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
        center: ["30%", "50%"],
        label: {
          show: false
        },
        data: [{
          value: 7.5,
          itemStyle: {
            color: "#E3F0FF"
          }
        }, {
          value: 2.5,
          name: '',
          itemStyle: {
            color: "rgba(0,0,0,0)"
          }
        }]
      });
      //@ts-ignore
      v.percent = (v.value / sum * 100).toFixed(1) + "%";
      lineYAxis.push({
        value: i,
        textStyle: {
          rich: {
            circle: {
              color: color[i],
              padding: [0, 5]
            }
          }
        }
      });
    })

    const optionGxnl = {
      color: color,
      grid: {
        top: '15%',
        bottom: '54%',
        left: "30%",
        containLabel: false
      },
      yAxis: [{
        type: 'category',
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          formatter: function(params:any) {
            let item = chartData[params];
            console.log(item)
            //@ts-ignore
            return '{line|}{circle|●}{name|'+ item.name +'}{value|'+ item.value+'}{unit|万吨}'
          },
          interval: 0,
          inside: true,
          textStyle: {
            color: "#fff",
            fontSize: 13,
            rich: {
              line: {
                width: 30,
                height: 4,
                backgroundColor: {image: dashedPic}
              },
              name: {
                color: '#fff',
                fontSize: 13,
              },
              bd: {
                color: '#ccc',
                padding: [0, 5],
                fontSize: 13,
              },
              percent:{
                color: '#fff',
                fontSize: 13,
              },
              value: {
                color: '#fff',
                fontSize: 13,
                fontWeight: 500,
                padding: [0, 0, 0, 10]
              },
              unit: {
                fontSize: 13
              }
            }
          },
          show: true
        },
        data: lineYAxis
      }],
      xAxis: [{
        show: false
      }],
      series: pieSeries
    };
    setEchartsOptionGxnl(optionGxnl);

    const data0 = [1, 1, 1, 1, 1];
    const qslOption = {
      tooltip: {
        // 在鼠标悬停时触发显示
        trigger: 'axis',
      },
      textStyle: {
        color: "#C9C9C9",
      },
      legend: {
        data: ['取水量'],
        type: "scroll",
        orient: 'vertical',
        selectedMode: false,
        right: "40%",
        top: "2%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      grid: {
        containLabel: true,
        left: "3%",
        top: "20%",
        bottom: "0%",
        right: "0%",
      },
      xAxis: {
        type: "category",
        data: [
          "2018",
          "2019",
          "2020",
          "2021",
          "2022",
        ],
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            opacity: 0.9,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 20, //刻度标签与轴线之间的距离。
          textStyle: {
            fontFamily: "Microsoft YaHei",
            color: "#FFF",
          },
          fontSize: 12,
          fontStyle: "bold"
        },
      },
      yAxis: {
        name: "(m³)",
        max: 500,
        min: 0,
        nameTextStyle: {
          color: '#fff',
          opacity: 0.9
        },
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            opacity: 0.9,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.3)',
          }
        },
        axisLabel: {
          textStyle: {
            fontFamily: "Microsoft YaHei",
            color: "#FFF",
          },
          fontSize: 12,
        },
      },
      series: [
        {
          type: "bar",
          data: [250, 370, 370, 370, 370],
          name:"取水量",
          barMaxWidth: "auto",
          barWidth: 30,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [{
                offset: 0,
                color: "#00A9FF",
              },
                {
                  offset: 1,
                  color: "#66DDFF",
                },
              ],
            },
          },
        },
        // color: [, "#018bc1", "#96e092", "#DE9FB1", "#f06e90", "#f89e92",],
        {//一蓝底
          data: data0,
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          color: "#66DDFF",
          symbolOffset: ['0', "50%"],
          symbolSize: [30, 10],
          zlevel: 2,
          tooltip: {
            show: false // 不显示数据2的tooltip
          }
        },
        {//一蓝盖
          data: [250, 370, 370, 370, 370],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          symbolPosition: "end",
          color: "#77C9FF",
          symbolOffset: ['0', "-45%"],
          symbolSize: [30, 10],
          zlevel: 2,
          tooltip: {
            show: false // 不显示数据2的tooltip
          }
        },

      ],

      markArea: {
        silent: true,

      },

    };
    setQslEchart(qslOption);
  },[])

  return (
    <div className='content sygl-box'>
      <div className='left-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>水源概况</div>
            <div className="echarts-box">
              <ReactEcharts
                option={echartsOption}
                style={{ width:"100%", height: '25vh' }}
              />
            </div>
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>近五年取水量</div>
          </div>
          <div className="tqyb-box1">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
            <ReactEcharts
              option={qslEchart}
              style={{width: "100%", height: 'calc( 100% - 10px )'}}
            />
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>水源覆盖人口情况</div>
          </div>
          <div className="tqyb-box">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/syfgrkqk.png`} alt=""/>*/}
          </div>
        </div>
      </div>

      <div className='center-map'>
        <iframe
          src="http://127.0.0.1:8080/source.html"
          width="100%"
          height="100%"
          frameBorder={0}//边框设置
          scrolling="no"//滚动设置
        ></iframe>
      </div>

      <div className='right-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>各乡镇供需能力</div>
          </div>
          <div className="tqyb-box2">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/gxzgxnl.png`} alt=""/>*/}
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>水质监测</div>
          </div>
          <div className="tqyb-box3">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/szjc.png`} alt=""/>*/}
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>安防监测</div>
          </div>
          <div className="szjc-box">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/afjc.png`} alt=""/>*/}
          </div>
        </div>
      </div>
    </div>
  )
}

export default SyglPage