import * as d3 from '@/utils/svg/d3.js';

export const ycslSvgObj = {
  type: 'svg',
  svg: null,
  svgG: null,
  viewBox: null,
  pageSvg: null,//svg实例
  pageG: null, // svg g实例
  isKQYDYSF: false,//是否开启移动与缩放
  isKQSF: true,
  svgZoom: null, // svg 放大缩小zoom限制
  svgScaleExtent: [0.5, 8], // svg放缩限制
  width: '1920',
  height: '1000',
  beginValue: null,
  endValue: null,
  tooltip: null,
  init: function (config) {//对象初始化
    var _this = this;

    _this.tooltip = d3.select("body").append("div")
      .style('position', 'absolute')
      .style('z-index', '10')
      .style('color', '#f00')
      .style('visibility', 'hidden')   // 是否可见（一开始设置为隐藏）
      .style('font-size', '18px')
      .style('font-weight', 'bold')
      .text('');

    //检查参数
    if (config.svg == null) {
      alert("请求参数格式缺少svg的id值：参数名svg");
      //alert("请求参数格式存储错误，正确的请求参数为:/n");
    } else {
      _this.svg = config.svg;
    }

    if (config.svgG == null) {
      alert("请求参数格式缺少svgG的id值：参数名svgG");
    } else {
      _this.svgG = config.svgG;
    }

    if (config.width != null) {
      _this.width = config.width;
    }

    if (config.height != null) {
      _this.height = config.height;
    }

    if (config.svgScaleExtent != null) {
      _this.svgScaleExtent = config.svgScaleExtent;
    }

    if (config.isKQYDYSF != null) {
      _this.isKQYDYSF = config.isKQYDYSF;
    }

    _this.pageSvg = d3.select("#" + _this.svg);
    _this.pageG = d3.select("#" + _this.svgG);
    // 允许移动放缩
    if(_this.isKQYDYSF){
      _this.svgZoom = d3.zoom().scaleExtent(_this.svgScaleExtent).on("zoom", function () {
        if (_this.isKQSF) {
          var transforms = d3.event.transform;
          _this.pageG.attr("transform", transforms);
          //调整中心位置
          //_this.pageG.attr("transform", "translate(0,0) scale(0.1)");
        }
      });
    }


    d3.selectAll('#' + _this.svg)//d3操作的svg对象和jq对象不一样
      .attr('width', _this.width)//d3操作的对象px属性都不能带单位
      .attr('height', _this.height)
      .attr("display", "inline-block");
    // 允许移动放缩
    if(_this.isKQYDYSF){
      d3.selectAll('#' + _this.svg)
        .call(_this.svgZoom)
        .on("wheel", function () {
          d3.event.preventDefault(); // 放大倍数达到上下限时svg图形不随鼠标滚动上下移动
        })
        .on("dblclick.zoom", null);
    }

    if (_this.viewBox) {
      d3.selectAll('#' + _this.svg)
        .attr('viewBox', _this.viewBox);
    } else {
      if (_this.width.indexOf("%") != -1) {
        d3.selectAll('#' + _this.svg)
          .attr('viewBox', '-' + (_this.width.replace("%", "") / 2) + '% -' + (_this.height.replace("%", "") / 2) + '% ' + _this.width.replace("%", "") + '% ' + _this.height.replace("%", "") + '%');//通过png-svg转换的把实际坐标放大了1倍'
      } else {
        d3.selectAll('#' + _this.svg)
          .attr('viewBox', '-' + (_this.width / 2) + ' -' + (_this.height / 2) + ' ' + _this.width + ' ' + _this.height);//通过png-svg转换的把实际坐标放大了1倍'
      }
    }

    //调整中心位置
    _this.pageG.attr("transform", "translate(0,0) scale(1)");
  },

  addOrUpdateCameraImg:function(imgUrl,imgWidth,imgHeight){
    var _this = this;
    d3.selectAll("#cameraImgSvg").remove();
    d3.selectAll('#' + _this.svgG)
      .append("image")
      .attr("width", imgWidth)
      .attr("height", imgHeight)
      .attr("x", 0)
      .attr("y", 0)
      .attr("id", "cameraImgSvg")
      .attr("class", "cameraImgSvg")
      .attr("cursor", "pointer")
      .attr("xlink:href", imgUrl)
    _this.width=imgWidth+"";
    _this.height=imgHeight+"";
    d3.selectAll('#' + _this.svg)
      .attr('width', _this.width)
      .attr('height', _this.height)
    _this.pageG.attr("transform", "translate("+(-imgWidth/2)+","+(-imgHeight/2)+") scale(1)");
  },
  addOrUpdateCameraRedraw :function (imgTrailLine){
    var _this = this;
    d3.selectAll("#cameraImgRedrawSvg").remove();

    if(imgTrailLine.length==0){
      return
    }else if(imgTrailLine.length==1){
      //第一个画圆
      d3.selectAll('#' + _this.svgG)
        .append("circle")
        .attr("id", "cameraImgRedrawSvg")
        .attr("cx",(imgTrailLine[0].x/3)+"px")
        .attr("cy",(imgTrailLine[0].y/3)+"px")
        .attr("r","10px")
        .attr("fill","yellow");
    }else{
      d3.selectAll('#' + _this.svgG)
        .append('path')//插入路径
        .attr("id", "cameraImgRedrawSvg")
        .attr("class", "motionPath")
        .attr("stroke", "rgba(255, 140, 0)")
        .attr("fill", "rgba(255, 140, 0,0.2)")
        .attr("stroke-miterlimit", "0")
        .attr("stroke-width", 2)
        .attr("d", _this.getPathD(imgTrailLine));

      if(imgTrailLine.length>2){
        var newImgTrailLine=[];
        newImgTrailLine.push(imgTrailLine[0]);
        newImgTrailLine.push(imgTrailLine[imgTrailLine.length-1]);
        d3.selectAll('#' + _this.svgG)
          .append('path')//插入路径
          .attr("id", "cameraImgRedrawSvg")
          .attr("class", "motionPath")
          .attr("stroke", "rgba(255, 0, 0)")
          .attr("fill", "none")
          .attr("stroke-miterlimit", "0")
          .attr("stroke-width", 2)
          .attr("stroke-dasharray","2 3")
          .attr("d", _this.getPathD(newImgTrailLine));
      }
    }
  },
  getPathD: function (imgTrailLine){
    var pathD="";
    for (let i = 0; i < imgTrailLine.length; i++) {
      if(i==0){
        pathD+="M "+(imgTrailLine[i].x/3)+ " " + (imgTrailLine[i].y/3) + " ";
      }else{
        pathD+="L "+(imgTrailLine[i].x/3)+ " " + (imgTrailLine[i].y/3) + " ";
      }
    }
    return pathD;
  },
  setIsKQSF: function (isKQSF) {
    var _this = this;
    if (isKQSF) {
      _this.isKQSF = true;
    } else {
      _this.isKQSF = false;
      _this.pageG.attr("transform", "translate(0,0) scale(1)");
    }
  },
}