import * as d3 from 'd3';
import * as d3Tip from 'd3-tip';
import { isFun, isArray ,setNewValue } from '../../../utils/util';

/**
 * data 图数据
 * id 图id
 * height 图高 600
 * margin { top: 80, right: 60, bottom: 80, left: 60 }
 * titleConfig: { title: '', fontSize: '14px', fontWeight: '700', color: '#000' }  标题
 * titleXConfig: { title: '', fontSize: '10px', fontWeight: '500', color: '#000' }  X轴标题
 * titleYConfig: { title: '', fontSize: '10px', fontWeight: '500', color: '#000' }  Y轴标题
 * formatFunX 格式化x函数
 * formatFunY 格式化y函数
 * colors: ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'] 
 */
const D3SimplePointsChart = (params) => {
  const defaultConfig = {
    margin: { top: 80, right: 60, bottom: 80, left: 60 },
    titleConfig: { title: '', fontSize: '14px', fontWeight: '700', color: '#000' },
    titleXConfig: { title: '', fontSize: '10px', fontWeight: '500', color: '#000' },
    titleYConfig: { title: '', fontSize: '10px', fontWeight: '500', color: '#000' }
  }
  const {
    data,
    id,
    height,
    margin,
    titleConfig,
    titleXConfig,
    titleYConfig,
    formatFunX,
    formatFunY,
    colors
  } = params;

  const container = document.getElementById(`${id}`);
  if (!container) return;

  const width = container.offsetWidth;
  const _margin = setNewValue(margin, defaultConfig.margin);

  const _width = width - _margin.left - _margin.right;
  const _height = height - _margin.top - _margin.bottom;

  const _titleConfig = setNewValue(titleConfig, defaultConfig.titleConfig);
  const _titleXConfig = setNewValue(titleXConfig, defaultConfig.titleXConfig);
  const _titleYConfig = setNewValue(titleYConfig, defaultConfig.titleYConfig);

  // 设置总宽高
  let svg = d3.select(`#${id}`)
    .append('svg')
    .attr('width',  width)
    .attr('height', height);

  let x = d3.scaleLinear()
    .domain([0, d3.max(data, function (d) {
        return d[0]
      })
    ])
    .range([0, _width]);
  let y = d3.scaleLinear()
    .rangeRound([0, _height])
    .domain([d3.max(data, function (d) {
      return d[1]
    }), 0]);
  let z = d3.scaleOrdinal(d3.schemeCategory10); // 通用线条的颜色

  let g = svg.append('g')
    .attr('transform', 'translate(' + _margin.left + ',' + _margin.top + ')'); // 设最外包层在总图上的相对位置

  let tip = d3Tip.default() // 设置tip
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {
      const valueX = isFun(formatFunX) ? formatFunX(d) : d.target.__data__[0];
      const valueY = isFun(formatFunY) ? formatFunY(d) : d.target.__data__[1];
      return ("<strong>"+_titleXConfig.title+":</strong><span> " + valueX +" </span><br><strong>"+_titleYConfig.title+":</strong><span> " + valueY +' </span>')
    });

  svg.call(tip);

  g.append('g') // 设置x轴
    .attr('class', 'axis axis--x')
    .attr('transform', 'translate(0,' + _height + ')')
    .call(d3.axisBottom(x))
    .append('text')
    .attr('x', _width)
    .attr('y', 26)
    .attr('dy', '.71em')
    .style('text-anchor', 'end')
    .style('fill', _titleXConfig.color)
    .style('font-size', _titleXConfig.fontSize)
    .style('font-weight', _titleXConfig.fontWeight)
    .text(_titleXConfig.title);

  g.append('g') // 设置y轴
    .attr('class', 'axis axis--y')
    .call(d3.axisLeft(y))
    .append('text')
    .attr('y', -16)
    .attr('dy', '.71em')
    .style('text-anchor', 'start')
    .style('fill', _titleYConfig.color)
    .style('font-size', _titleYConfig.fontSize)
    .style('font-weight', _titleYConfig.fontWeight)
    .text(_titleYConfig.title);

  g.append('g') // 输出点
    .selectAll('circle')
    .attr('class', 'points')
    .data(data)
    .enter()
    .append('circle')
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
    .attr('cursor', 'pointer')
    .attr('fill', function (d, i) {
      return isArray(colors) && colors.length ? colors[i%colors.length] : z(d[1])
    })
    .attr('cx', function (d) {
      return x(d[0])
    })
    .attr('cy', function (d) {
      return y(d[1])
    })
    .attr('r', 0)
    .transition()
    .duration(750)
    .delay(function (d, i) {
      return i * 10
    })
    .attr('r', 10);
  svg.append('g') // 输出标题
    .attr('class', 'chart--title')
    .append('text')
    .attr('fill', _titleConfig.color)
    .attr('font-size', _titleConfig.fontSize)
    .attr('font-weight', _titleConfig.fontWeight)
    .attr('text-anchor', 'middle')
    .attr('x', width / 2)
    .attr('y', 20)
    .text(_titleConfig.title);
}

export default D3SimplePointsChart;