import * as echarts from 'echarts'

export const defaultColors = ['#FF8C00', '#FAF0E6', '#FFDAB9', '#F4A460', '#D2691E', '#FFA07A', '#F5DEB3'],
  backgroundColors = ['#dbd7cc', '#cab388', '#d5c4a1', '#e0d4bb', '#b5b292', '#cbc5ac', '#d5d3bf']

const serious = new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
  offset: 0,
  color: 'rgb(246,211,101)'
}, {
  offset: 1,
  color: 'rgb(253,160,133)'
}]), normal = new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
  offset: 0,
  color: 'rgb(212,252,121)'
}, {
  offset: 1,
  color: 'rgb(150,230,161)'
}]), verySerious = new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
  offset: 0,
  color: 'rgb(255,8,68)'
}, {
  offset: 1,
  color: '#ffb199'
}])

export const scatterColors = [normal, serious, verySerious]

function renderItem(params, api) {
  var start = api.coord([0, api.value(1)])
  var end = api.coord([0, api.value(2)])
  var width = api.size([0, 1])[0] * 0.98

  var rectShape = echarts.graphic.clipRectByRect({
    x: start[0] - width / 2,
    y: start[1],
    width: width,
    height: end[1] - start[1]
  }, {
    x: params.coordSys.x,
    y: params.coordSys.y,
    width: params.coordSys.width,
    height: params.coordSys.height
  })
  //console.log(" *** ".append(params.actionType).append(params.dataIndex))
  return rectShape && {
    type: 'rect',
    shape: rectShape,
    style: api.style()
  }
}

export const lineOptions = {
  stratumWidth: 110, stratumLableWidth: 195, leftBlank: 30, topBlank: 8, bottomBlank: 5, xyGridBackLine: true
  , zoomToolWidth: 35, secondYAxisLabelWidth: 50, wellBottom: 15000, caseLineWidth: 0.5
}

export function chartOption(myChart, lineOptions, yData, stratumData, caseData) {

  function renderText(params, api) {
    var dataIndex = params.dataIndex

    //draw 40pix height rect
    var t = myChart.convertToPixel({ seriesIndex: 1 }, [0, 1]), t1 = myChart.convertToPixel({ seriesIndex: 1 }, [0, 2])
    var valuePix = t1[1] - t[1], value30Pix = Math.round(40 / valuePix), value10Pix = Math.round(10 / valuePix),
      v1 = value10Pix + (value10Pix + value30Pix) * dataIndex, v2 = v1 + value30Pix

    var coord = api.coord([lineOptions.caseLineWidth, v1]),
      coord2 = api.coord([lineOptions.caseLineWidth, v2])

    //console.log(''.append(valuePix).append(value10Pix).append(value30Pix).logPoint(coord).logPoint(coord2))

    var width = api.size([1, 1])[0] * 0.98
    var rectShape = echarts.graphic.clipRectByRect({
      x: coord[0],
      y: coord[1],
      width: width,
      height: coord2[1] - coord[1]
    }, {
      x: params.coordSys.x,
      y: params.coordSys.y,
      width: params.coordSys.width,
      height: params.coordSys.height
    })

    return rectShape && {
      type: 'rect',
      shape: rectShape,
      style: api.style({})
    }
  }

  function renderLine(params, api) {
    var dataIndex = params.dataIndex
    //draw 40pix height rect
    var t = myChart.convertToPixel({ seriesIndex: 1 }, [0, 1]), t1 = myChart.convertToPixel({ seriesIndex: 1 }, [0, 2])
    var valuePix = t1[1] - t[1], value30Pix = Math.round(40 / valuePix), value10Pix = Math.round(10 / valuePix),
      v1 = (value10Pix + value30Pix) * dataIndex, v2 = v1 + value10Pix

    var coord = api.coord([0, api.value(1)]),
      coord2 = api.coord([lineOptions.caseLineWidth, v2])

    // console.log(''.append(dataIndex).append(valuePix).append(value10Pix).append('cord1:').logPoint(coord).append('cord2:').logPoint(coord2))
    // console.log(''.append(params.coordSys.x).append(params.coordSys.y))
    return {
      type: 'line',
      shape: { x1: coord[0], y1: coord[1], x2: coord2[0], y2: coord2[1] },
      style: api.style({ lineWidth: 1, stroke: '#ccc' })
    }
  }

  return {
    tooltip: {},
    legend: {
      data: [],
      show: false
    },
    dataZoom: [{
      yAxisIndex: [0, 1],
      type: 'slider',
      filterMode: 'weakFilter',
      left: lineOptions.stratumWidth + lineOptions.leftBlank + 2 + lineOptions.stratumLableWidth,
      startValue: 0,
      endValue: 5000
    },
      {
        type: 'inside',
        throttle: 0,
        yAxisIndex: [0, 1],
        start: 0,
        end: 5000
      }
    ],
    grid: [{
      top: lineOptions.topBlank,
      left: lineOptions.leftBlank,
      bottom: lineOptions.bottomBlank,
      width: lineOptions.stratumWidth
    },
      {
        top: lineOptions.topBlank,
        left: lineOptions.stratumWidth + lineOptions.leftBlank,
        width: lineOptions.stratumLableWidth,
        bottom: lineOptions.bottomBlank,
        borderWidth: 0,
        show: true,
        backgroundColor: 'transparent'
      }
    ],
    xAxis: [{
      type: 'category',
      show: true,
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true
      },
      data: ['地层'],
      gridIndex: 0
    }, {
      type: 'value',
      data: [0, 1],
      show: true,
      min: 0,
      max: 1,
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      gridIndex: 1
    }],
    yAxis: [{
      type: 'value',
      data: yData,
      axisLine: { onZero: false },
      splitNumber: 20,
      axisLabel: {
        formatter: '{value} m'
      },
      boundaryGap: false,
      min: 0,
      max: lineOptions.wellBottom,
      inverse: true,
      splitLine: {
        show: true
      },
      interval: 300,
      minInterval: 300
    }, {
      gridIndex: 1,
      type: 'value',
      data: yData,
      axisLine: { onZero: false },
      boundaryGap: false,
      inverse: true,
      show: false,
      min: 0,
      max: lineOptions.wellBottom,
      splitLine: {
        show: false
      },
      position: 'right',
      offset: lineOptions.zoomToolWidth,
      interval: 300,
      minInterval: 300
    }],
    series: [
      {
        name: 'Stratum',
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {},
        label: {
          show: true,
          position: 'inside',
          distance: 5,
          color: '#000',
          formatter: function(params) {
            return params.data.name + '(共' + params.data.value[4] + ')'
          }
        },
        data: stratumData,
        encode: {
          y: [1, 2],
          x: 0
        },
        tooltip: {
          formatter: function(params) {
            return '地层：<br/>' + params.data.name + ' ' + params.data.value[1] + '-' + params.data.value[2]
          }
        }
      },
      {
        yAxisIndex: 1,
        xAxisIndex: 1,
        show: false,
        name: 'StratumCase',
        type: 'custom',
        renderItem: renderText,
        itemStyle: {},
        label: {
          show: true,
          position: 'inside',
          //todo 不行就改这里。
          textStyle: {
            align: 'center'
          },
          color: '#000',
          width: lineOptions.stratumLableWidth * 0.2,
          formatter: function (params) {

              return '{a|' + params.data.lx + '}\n'+'{a|' + params.data.jh + '}'
          },

          rich: {
            a: { width: '100%', align: 'center', fontSize: 12, lineHeight: 20 }
          }
        },
        labelLayout: {
          align: 'left'
        },
        data: caseData,
        encode: {
          y: 1,
          x: 0
        },
        tooltip: {
          formatter: function(params) {
            return '发生时井深：<br/>' + params.value[1] + '米'
          }
        }
      },
      {
        yAxisIndex: 1,
        xAxisIndex: 1,
        name: 'StratumCaseLine',
        type: 'custom',
        renderItem: renderLine,
        itemStyle: {},
        label: {
          show: false
        },
        data: caseData,
        encode: {
          y: 1,
          x: 0
        },
        tooltip: {
          show: false
        }
      }
    ]
  }
}