import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import { Icon, message } from 'antd/lib/index';
import {
  initFilter,
  extendInclude,
  extendOrder
} from "../../../utils/common";
import config from "../../../config.js";
class BI060MapeShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      retData: [],//数据源
      picIndex: 0,//下一张
      picMax: 1,//最大图片数
      Title: '',//四色图说明（配置）
      RGBCOLOR_TL: '',
      OPACITY_TL: '',
    };
  }

  componentDidMount() {
    this.loadData();
  }
  renderSpeedColumn = () => {
    return { className: 'redTableCell' }
  }

  ShowInfo(msg) {
    if (msg && msg.length > 0) {
      message.info({
        content: (
          <div style={{ textAlign: 'left' }} dangerouslySetInnerHTML={{ __html: msg }}>
          </div>
        )
      })
    }
  }
  loadData = () => {
    //信息获取
    const json = initFilter(this.props.login.OrgId);
    extendOrder(json, "CREATE_TIME", 1);
    extendInclude(json, 'Nav_Colors.Nav_ColorPoints');
    extendInclude(json, 'Nav_Colors.Nav_Areas.Nav_Area');
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "PC/PCInfo/EntitiesShow",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.IsSuccessful && ret.Data && ret.Data.length > 0) {
          var ulPic = document.getElementById('ulPic')
          //加载头部信息 并且支持点击
          ret.Data.forEach((item, index) => {
            var li = document.createElement('li')
            li.innerText = item.NAME
            li.style.color = "white"
            li.style.float = "left"
            li.style.fontSize = 20 + 'px'
            li.style.paddingLeft = 10 + 'px'
            li.style.paddingRight = 10 + 'px'
            li.style.render = 2
            li.style.marginLeft = 30 + 'px'
            li.style.backgroundColor = '#1890ff'
            li.style.cursor = "pointer"
            li.onclick = () => this.PicShow(index)
            ulPic.appendChild(li)
          })

          this.PicShow(0, null, ret.Data)
        } else {
          message.error("请先配置四色图信息再查看！");
        }
      }
    })
  };

  //根据数据显示图片
  PicShow = (indexP, opType, DataPic) => {
    if (indexP && opType == null && DataPic == null) {
      indexP = indexP
    } else {
      indexP = 0
      if (opType == null || opType == undefined) {
      } else if (opType == 1) {
        indexP = this.state.picIndex + 1
      } else if (opType == -1) {
        indexP = this.state.picIndex - 1
        if (indexP < 0) {
          message.error("已经是第一张图");
          return false
        }
      } else {
        message.error("操作异常");
        return false
      }
    }

    if (DataPic == null || DataPic == undefined) {
      DataPic = this.state.retData
    }

    var picMax = 1
    var RGBCOLOR_TL = 'wheat'
    var OPACITY_TL = '0.6'
    if (DataPic.length > 0) { // 显示图片
      picMax = DataPic.length
      if (indexP >= picMax) {
        message.error("已经是最后一张图片");
      }

      var ShowInfo = DataPic[indexP]
      if (ShowInfo.FILE_PATH) {
        const divShow = document.getElementById('divPic');
        divShow.style.backgroundImage = 'url(' + config.picServerHost + ShowInfo.FILE_PATH + ')'
        divShow.style.width = ShowInfo.WIDTH + 'px'
        divShow.style.height = ShowInfo.HEIGHT + 'px'
      }
      const ulDescribe = document.getElementById('ulDescribe');
      // ulDescribe.style.width = ShowInfo.WIDTH + 'px'

      //标记删除
      var arrNodes = ulDescribe.childNodes;
      for (var i = 0; i < arrNodes.length; i++) {
        ulDescribe.removeChild(arrNodes[i]);
      }

      if (ShowInfo.RGBCOLOR_TL != null && ShowInfo.RGBCOLOR_TL != '')
        RGBCOLOR_TL = ShowInfo.RGBCOLOR_TL
      if (ShowInfo.OPACITY_TL != null && ShowInfo.OPACITY_TL != '')
        OPACITY_TL = ShowInfo.OPACITY_TL
      var index = 0

      const svg = document.getElementById('picSvg');
      if (svg.childNodes && svg.childNodes.length > 0) {
        for (var i = svg.childNodes.length - 1; i > -1; i--) {
          svg.removeChild(svg.childNodes[i])
        }
      }
      svg.style.width = ShowInfo.WIDTH + 'px'
      svg.style.height = ShowInfo.HEIGHT + 'px'

      if (ShowInfo.Nav_Colors && ShowInfo.Nav_Colors.length > 0) {
        ShowInfo.Nav_Colors.forEach(e => {
          index++
          if (e.RGBCOLOR == null || e.RGBCOLOR != '') {
            var points = e.Nav_ColorPoints
            if (points == null || points.length < 1) {
              message.error("配置区域【" + e.NAME + "】未描点！");
            } else {


              // 获取SVG中的polygon元素
              const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');// const polygon = document.getElementById('myPolygon' + index);//找到画布  
              //点位拼接
              let pointsString = points.map(coord => `${coord.X},${coord.Y}`).join(' ');// 注意：points属性的格式是"x1,y1 x2,y2 ..."
              polygon.setAttribute('points', pointsString); //描点
              polygon.setAttribute('fill', e.RGBCOLOR);//填充颜色
              // polygon.setAttribute('stroke', e.RGBCOLOR);//画笔颜色
              polygon.setAttribute('stroke-width', 0);//多个区域合成一起画  中间的颜色去除
              polygon.setAttribute('stroke', 'none');//画笔颜色
              polygon.style.opacity = e.OPACITY//透明度
              //点击提示
              polygon.onclick = () => {
                this.ShowInfo(e.DESCRIBE)
              }
              svg.appendChild(polygon);

              //点位 num 为 1 设置标记 


              //title配置
              if (e.DESCRIBE && e.DESCRIBE.length > 0) {
                const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                // var innerHTML= e.DESCRIBE.replace('<br/>','\n')
                title.textContent = e.DESCRIBE_TITLE
                polygon.appendChild(title);
              }
              //直接显示标记
              // var XAll = 0
              // var YAll = 0
              // points.forEach(e => {
              //   XAll += e.X
              //   YAll += e.Y
              // });
              // const mark = document.createElementNS('http://www.w3.org/2000/svg', 'text');
              // mark.setAttribute("x", XAll / points.length);
              // mark.setAttribute("y", YAll / points.length);
              // mark.setAttribute("text-anchor", "middle");
              // mark.setAttribute("dominant-baseline", "middle");
              // mark.style.fontSize = '16px'
              // mark.style.opacity = e.OPACITY
              // mark.textContent = e.DESCRIBE_TITLE;
              // svg.appendChild(mark);

              //画图区域 标记 区域配置编号
              const mark = document.createElementNS('http://www.w3.org/2000/svg', 'text');
              mark.setAttribute("x", points[0].X);
              mark.setAttribute("y", points[0].Y);
              mark.setAttribute("text-anchor", "middle");
              mark.setAttribute("dominant-baseline", "middle");
              mark.style.fontSize = '16px'
              mark.style.fontWeight = 'bold'
              // mark.style.opacity = e.OPACITY
              mark.textContent = e.ZNDEX // + "：" + e.NAME;
              svg.appendChild(mark);

              //添加 区域的说明
              const lidescribe = document.createElement('li')
              lidescribe.style.float = "left"
              lidescribe.style.marginLeft = '20px'
              lidescribe.textContent = e.ZNDEX + "：" + e.NAME;
              ulDescribe.appendChild(lidescribe)
            }
          }
        });
      }

      // picIndex: 0,//下一张
      // picMax:1,//最大图片数
      this.setState({
        retData: DataPic,
        picIndex: indexP,
        picMax: picMax,
        Title: ShowInfo.NAME,
        RGBCOLOR_TL: RGBCOLOR_TL,
        OPACITY_TL: OPACITY_TL,
      })
    }
  };
  render() {
    const { Title, picIndex, picMax, RGBCOLOR_TL, OPACITY_TL } = this.state;
    return (
      <div>
        <div style={{ textAlign: 'center', width: '100%', minHeight: '30px' }}>
          <ul id="ulPic">
          </ul>
        </div>

        <h1 style={{ textAlign: 'center' }}>
          {/* {
            picIndex > 0 && <Icon type="left" style={{ width: '50px', height: '50px' }} onClick={() => this.PicShow(0, -1)}></Icon>
          }
          {Title}
          {
            picMax > (picIndex + 1) && <Icon type="right" style={{ width: '50px', height: '50px' }} onClick={() => this.PicShow(0, 1)}></Icon>
          } */}
        </h1>
        <div id="divPic"
          style={{
            backgroundColor: "white",
            position: "relative",
            // top: "0",
            // bottom: "0",
            left: "0",
            right: "0",
            margin: "auto",
            borderStyle: "solid",
            borderColor: "#ccc",
            borderColor: "#ccc",
            borderWidth: "1px",
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-end',
          }}
        >
          {/* <svg width="200" height="200" viewBox="0 0 200 200">
            <polygon
              points="100,10 40,198 190,78 10,78 160,198"
              fill="lightblue"
              stroke="blue"
              strokeWidth="2"
            >
              <title>这是一个SVG原生提示</title>
            </polygon>
          </svg> */}

          {/* <svg width="200" height="200" viewBox="0 0 200 200">
            <polygon
              points="100,10 40,198 190,78 10,78 160,198"
              fill="lightblue"
              stroke="blue"
              strokeWidth="2"
              title="这是一个五边形" // 鼠标悬停时会显示默认浏览器提示
            />
          </svg> */}

          <svg width="1800" height="1500" id="picSvg" style={{ position: 'absolute', zIndex: 999 }} >
            {/* <text x="100" y="75" text-anchor="middle" fill="black" font-size="16">显示信息</text> */}
            {/* <polygon id="myPolygonr" fill="red" stroke="white" stroke-width="2" onClick={() => this.ShowInfo('点击提示信息3')} style={{ opacity: '0.3' }} /> */}
            {/*  显示自定义polygon */}{/* <polygon id="myPolygon" stroke-width="1" onClick={() => this.ShowInfo(warm)} /> */}
          </svg>
          <div id="divtl" style={{ width: '230px', position: 'absolute', backgroundColor: '' + RGBCOLOR_TL + '', opacity: '' + OPACITY_TL + '', border: '1px solid black' }}>
            <h2 style={{ marginLeft: '10px' }}>图例</h2>
            <h3>&nbsp;&nbsp;<a style={{ backgroundColor: 'red', color: 'red' }}>重大风险</a>&nbsp;&nbsp;重大风险区城</h3>
            <h3 >&nbsp;&nbsp;<a style={{ backgroundColor: 'orange', color: 'orange' }}>较大风险</a>&nbsp;&nbsp;较大风险区城</h3>
            <h3 >&nbsp;&nbsp;<a style={{ backgroundColor: 'yellow', color: 'yellow' }}>一般风险</a>&nbsp;&nbsp;一般风险区城</h3>
            <h3 >&nbsp;&nbsp;<a style={{ backgroundColor: 'blue', color: 'blue' }}>&nbsp;&nbsp;&nbsp;&nbsp;低风险</a>&nbsp;&nbsp;&nbsp;&nbsp;低风险区城</h3>
            <div style={{ height: '1px' }}></div>
          </div>
        </div>
        <div id="divDescribe">
          <h3>注解:</h3>
          <ul id="ulDescribe" style={{ textAlign: 'center' }}></ul>
        </div>
      </div >
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI060MapeShow);