import React, { Component } from 'react';
import FunAreaSelect from "../funAreaSelect/funAreaSelect.js"
export default class FunAreaSelectPlus extends Component {
    constructor() {
        super();
        this.state = {
            id: new Date().getTime() + "waiceng",
            list: [],
            disabled: "false",//判断是否可以移动  false是可以移动
            circleRadius: 5,//圆半径
            circleBorderWidth: 2,//圆边线的半径宽
            circleBorderColor: "#28B1D9",//圆边线的颜色
            circleInColor: "#28B1D9",//圆里里面的颜色
            circleSelectColor: "#FFF",
            lineColor: "#28B1D9",//线的颜色
            lineWidth: 2,//线的宽度
            areaColor: "rgba(40, 177, 217, 0.2)",//选中区域颜色
            disabled: "false",//判断是否可以移动  false是可以移动
            title: "",//文字的内容
            titleColor: "#000",//文字的颜色
            titleFont: "14px bold 黑体",//文字的字体
            titleLineHeight: "",//文字的行高
            position: [10, 10],//文字的位置
        }
    }
    static getDerivedStateFromProps(props, state) {
        var obj = {};
        for (var key in props) {
            if (props[key] && props[key] !== state[key]) {
                if(typeof props[key] === "object"){
                    obj[key] = JSON.parse(JSON.stringify(props[key]))
                }else{
                    obj[key] = props[key]
                }
               
            }
        }
        if (Object.keys(obj).length > 0) {
            return obj;
        } else {
            return null
        }
    }
    componentDidMount() {
        this.selectIndex = this.state.list.length-1;
        this.selectArea();
    }
    clickIt() {
        let { list } = this.state;
        if (list.length === 0) {
            list.push({
                id: new Date().getTime(),
                mode: "polygon"
            })
        } else {
            var boo = this.refs[list[list.length - 1].id + list[list.length - 1].mode].isNull()//判断画布是否为空
            if (boo) {//画布为空
                console.log("画布为空")
            } else if (!list[list.length - 1].serviceData) {
                console.log("没有保存")
            } else {
                this.selectIndex = list.length;
                if (list[list.length - 1].mode === "polygon") {
                    list.push({
                        id:  new Date().getTime(),
                        mode: "react"
                    })
                } else {
                    list.push({
                        id:  new Date().getTime(),
                        mode: "polygon"
                    })
                }
            }
        }
        this.setState({
            list: list
        },()=>{
            this.props.change(list)
        })
    }
    change(val) {//保存后把最后一个放入这个list中储存，这样可以判断是否储存，点击的时候是否在点内
        let { list } = this.state;
        console.log(this.selectIndex)
        list[this.selectIndex].serviceData = JSON.parse(JSON.stringify(val));
        this.list = list
        this.setState({ list: list})
        this.props.change(list)
    }
    selectArea() {//选中区域z-index应该增大放在最上面
        let {  id } = this.state;
        var waiceng = document.getElementById(id);
        waiceng.onclick = (e) => {
            let {list} = this.state;
            // let list = this.list
            var left = e.layerX
            var top = e.layerY
            this.indexflag = false;//这里是为了防止点击到重复的区域导致无法选区的情况
            for (var i = 0; i < list.length; i++) {
                if (list[i].serviceData) {
                    var myRef = this.refs[list[i].id + list[i].mode].state.id;//获取内部id
                    if (this.isInPolygon([left, top], JSON.parse(JSON.stringify(list[i].serviceData)), this.refs[list[i].id + list[i].mode][myRef])) {//选中之后放在最上层
                        var id = this.refs[list[i].id + list[i].mode][myRef].state.id
                        if (this.indexflag) {
                            document.getElementById(id).style.zIndex = 0
                        } else {
                            document.getElementById(id).style.zIndex = 99
                            this.indexflag = true
                        }
                        this.selectIndex = i;
                    } else {
                        var id = this.refs[list[i].id + list[i].mode][myRef].state.id
                        document.getElementById(id).style.zIndex = 0
                    }
                }
            }
        }
    }
    isInPolygon(checkPoint, polygonPoints, childEl) {//判断多边形是否在点内
        var counter = 0;
        var xinters;
        var p1, p2;
        var pointCount = polygonPoints.length;
        p1 = polygonPoints[0];
        for (var i = 1; i <= pointCount; i++) {
            p2 = polygonPoints[i % pointCount];
            if (
                checkPoint[0] > Math.min(p1[0], p2[0]) &&
                checkPoint[0] <= Math.max(p1[0], p2[0])
            ) {
                if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
                    if (p1[0] != p2[0]) {
                        xinters =
                            (checkPoint[0] - p1[0]) *
                            (p2[1] - p1[1]) /
                            (p2[0] - p1[0]) +
                            p1[1];
                        if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
                            counter++;
                        }
                    }
                }
            }
            p1 = p2;
        }
        if (counter % 2 == 0) {
            if (childEl.selectBox(checkPoint[0], checkPoint[1])) {
                return true;
            }
            return false;
        } else {
            return true;
        }
    }
    render() {
        let { id, list, disabled, circleRadius,
            circleBorderWidth,
            circleBorderColor,
            circleInColor,
            circleSelectColor,
            lineColor,
            lineWidth,
            areaColor,
            title,
            titleColor,
            titleFont,
            titleLineHeight,
            position } = this.state;
        return (
            <div id={id} style={{ width: "100%", height: "100%", position: "relative" }}>
                <button style={{ position: "absolute", right: "-20px", top: "0" }} onClick={() => this.clickIt()}>添加</button>
                {
                    list.map((item, index) => {
                        return <FunAreaSelect
                            disabled={disabled}
                            circleRadius={circleRadius}
                            circleBorderWidth={circleBorderWidth}
                            circleBorderColor={circleBorderColor}
                            circleSelectColor={circleSelectColor}
                            circleInColor={circleInColor}
                            lineColor={lineColor}
                            lineWidth={lineWidth}
                            areaColor={areaColor}
                            title={title}
                            titleColor={titleColor}
                            titleFont={titleFont}
                            titleLineHeight={titleLineHeight}
                            position={position} key={index} serviceData={item.serviceData}  ref={item.id + item.mode} mode={item.mode} change={(val) => this.change(val)}></FunAreaSelect>
                    })
                }
            </div>)
    }
}