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

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

  // @ts-ignore
  const getOption = () => {
    const data0 = [1, 1, 1, 1, 1];
    const option = {
      textStyle: {
        color: "#C9C9C9",
      },
      legend: {
        type: "scroll",
        orient: 'vertical',
        selectedMode: false,
        right: "40%",
        top: "15%",
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
      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: "(万元)",
        max: 600,
        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: [360, 340, 300, 360, 500],
          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,
        },
        {//一蓝盖
          data: [360, 340, 300, 360, 500],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          symbolPosition: "end",
          color: "#77C9FF",
          symbolOffset: ['0', "-45%"],
          symbolSize: [30, 10],
          zlevel: 2,
        },

      ],

      markArea: {
        silent: true,

      }
    };
    setEchartsOption(option);
  };

  useEffect(() => {
    getOption();
  }, []);
  return (
    <div className='content'>
      <div className='left-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>工程概况</div>
            <div className='title-item'>大事记</div>
            <div className='title-item'>美丽水厂</div>
          </div>
          <div className='box1'>
            <img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
            <div className='box1-content'>
              <div className='box1-content-top'>
                <div className='box1-content-top-img'>
                  <img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/img2.png`} alt=""/>
                </div>
                <div className='box1-content-top-text'>
                  咸丰县水利局坚持把抓好农村饮水安全、助力脱贫攻坚放在中心位置，切实履行行业扶贫责任，扎实抓好精准扶贫农村饮水安全工程建设，全面解决建档立卡贫困人口“饮水难”问题，我县共投入<span>25804.04</span>万元推进实施6批次精准扶贫农村饮水安全工程。
                </div>
              </div>
              <div className='box1-content-bottom'>
                新建或改造农村供水工程369个（处），改善或提高<span>24.46</span>万农村居民的饮水条件（包括<span>14.99</span>万建档立卡贫困人口），同步建设高效智慧的农村供水管理平台，实现从源头到龙头全过程精细化管理。
              </div>
            </div>
            <img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>工程投资</div>
          </div>
          <div className='box2'>
            <ReactEcharts
              option={echartsOption}
              style={{width: "100%", height: 'calc( 100% - 10px )'}}
            />
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>工程成效</div>
          </div>
          <div className='box3'>
            <div className='box3-content'>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  自来水普及率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_1.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  集中供水率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_2.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  供水保证率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_3.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  水质达标率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_4.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div className='right-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>洪水简报</div>
          </div>
          <div className='box4'>
            <img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
            <div className='box4-content'>
              <div className='box4-content-item'>全省3月供水指数<span>83.2</span>，环比增长<span>1.23</span>%，其中清坪镇、小乡村排名前三；XXX、XXX、XXX排名倒三；</div>
              <div className='box4-content-item'>全省3月城乡供水水量<span>4.3</span>亿m³，环比增长-<span>0.09%</span>，水质自检率68.2%，自检合格率97.9%;</div>
              <div className='box4-content-item'>全省3月累计受理<span>13</span>个群众投诉件，已办结<span>11</span>个，其中完成整改<span>9</span>个，持续整改<span>0</span>个，办结率<span>84.6%</span>;</div>
            </div>
            <img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>在建工程</div>
          </div>
          <div className='box5'>
            <div className='box5-title'>
              <div className='box5-title-item width-10'>序号</div>
              <div className='box5-title-item  width-20'>工程名称</div>
              <div className='box5-title-item width-20'>投资金额</div>
              <div className='box5-title-item  width-30'>建设内容</div>
              <div className='box5-title-item width-20'>工程进度</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>1</div>
              </div>
              <div className='box5-li width-20'>XXX工程</div>
              <div className='box5-li width-20'>200万</div>
              <div className='box5-li width-30'>建设内容文字占位</div>
              <div className='box5-li width-20'>89%</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>2</div>
              </div>
              <div className='box5-li width-20'>XXX工程</div>
              <div className='box5-li width-20'>200万</div>
              <div className='box5-li width-30'>建设内容文字占位</div>
              <div className='box5-li width-20'>89%</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>3</div>
              </div>
              <div className='box5-li width-20'>XXX工程</div>
              <div className='box5-li width-20'>200万</div>
              <div className='box5-li width-30'>建设内容文字占位</div>
              <div className='box5-li width-20'>89%</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>4</div>
              </div>
              <div className='box5-li width-20'>XXX工程</div>
              <div className='box5-li width-20'>200万</div>
              <div className='box5-li width-30'>建设内容文字占位</div>
              <div className='box5-li width-20'>89%</div>
            </div>

          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>智慧化成效</div>
          </div>
          <div className='box3'>
            <div className='box3-content'>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  运营成本率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_1.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  供水漏损率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_2.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  巡检养护率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_3.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  便民服务率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_4.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2018年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>5.2%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.23%</div>
                    <div className='box3-item-data-btm'>2021年</div>
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>
  )
}

export default SyglPage