/**
 * 绘制矢量图
 */
import React, { Component } from "react";
import { Row, Col } from "antd";
import "./index.less";
export default class Vectorgraph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      paintValue: props.paintValue,
    };
  }

  componentDidMount() {}
  componentWillReceiveProps(nextPorps) {
    // console.log(nextPorps)
    this.setState({
      paintValue: nextPorps.paintValue,
    });
  }
  //把点击的状态值返回给上级
  returnParent(selectValue) {
    this.props.changeSelect(selectValue);
  }
  render() {
    // console.log(this.state.paintValue)
    return (
      <div className="radio_container vectorgraph">
        <Row className="vet-row">
          <Col
            className="vet-col"
            span={6}
            onClick={() => {
              this.setState({
                paintValue: "cancel",
              });
              this.returnParent("cancel");
            }}
          >
            {/* <span className="cancel"></span> */}
            <img
              className="cancel"
              src={
                this.state.paintValue === "cancel"
                  ? require("../../../assets/images/prevention/cancel-click.png")
                  : require("../../../assets/images/prevention/cancel.png")
              }
            ></img>
            <div>点选框选</div>
          </Col>
          <Col
            className="vet-col"
            span={6}
            onClick={() => {
              this.setState({
                paintValue: "circle",
              });
              this.returnParent("circle");
            }}
          >
            <span
              className={
                this.state.paintValue === "circle" ? "circle active" : "circle"
              }
            ></span>
            <div>圆形框选</div>
          </Col>
          <Col
            className="vet-col"
            span={6}
            onClick={() => {
              this.setState({
                paintValue: "rectangle",
              });
              this.returnParent("rectangle");
            }}
          >
            <span
              className={
                this.state.paintValue === "rectangle"
                  ? "rectangle active"
                  : "rectangle"
              }
            ></span>
            <div>方形框选</div>
          </Col>
          <Col
            className="vet-col"
            span={6}
            onClick={() => {
              this.setState({
                paintValue: "polygon",
              });
              this.returnParent("polygon");
            }}
          >
            {/* <span className="polygon"></span> */}
            <img
              className="polygon"
              src={
                this.state.paintValue === "polygon"
                  ? require("../../../assets/images/prevention/polygon-click.png")
                  : require("../../../assets/images/prevention/polygon.png")
              }
            ></img>

            <div>自定义框选</div>
          </Col>
        </Row>
      </div>
    );
  }
}