/**
 * @author  daya
 * @date  2021/08/25 15:14
 * @Des 图表charts的公共方法
 **/

/**
 * ts-vue-echarts 字体大小
 */
export const fontSize = function (val, initWidth = 1920) {
  let nowClientWidth = document.documentElement.clientWidth || document.body.clientWidth
  return val * (nowClientWidth / initWidth)
}

export const defaultFontSize = fontSize(16)
export const defaultColor = '#fff'

/**
 * ts-vue-echarts 的x、y轴等字体样式
 */
export const labelStyle = {
  fontSize: fontSize(17),
  color: '#fff',
  fontFamily: 'alibabaPuHuiTiRegular'
}

/**
 * ts-vue-echarts 的tooltip字体样式
 */
export const tooltipStyle = {
  backgroundColor: 'rgba(0,0,0,0.5)',
  borderWidth: 0,
  textStyle: {
    ...labelStyle
  }
}
/**
 * ts-vue-echarts 的横向滚动条
 */
export const horizontalDataZoom = [
  {
    type: 'slider',
    show: false,
    start: 0,
    end: 100,
    height: 12,
    bottom: '0%',
    zoomLock: true,
    showDetail: false,
    borderColor: 'transparent',
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    fillerColor: 'rgba(0, 95, 190, .5)',
    handleSize: 0,
    showDataShadow: false, // 是否显示数据阴影 默认auto
    realtime: true, // 是否实时更新
    filterMode: 'filter'
  },
  {
    type: 'inside',
    borderColor: 'transparent',
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    fillerColor: 'rgba(0, 95, 190, .5)',
    zoomOnMouseWheel: false,
    moveOnMouseMove: true,
    moveOnMouseWheel: true
  }
]

/**
 * ts-vue-echarts 的纵向滚动条
 */
export const verticalDataZoom = [
  {
    type: 'slider',
    show: false,
    start: 0,
    end: 100,
    width: 10,
    right: '0%',
    orient: 'vertical',
    zoomLock: true,
    showDetail: false,
    borderColor: 'transparent',
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    fillerColor: 'rgba(0, 95, 190, .5)',
    handleSize: 0,
    showDataShadow: false, // 是否显示数据阴影 默认auto
    realtime: true, // 是否实时更新
    filterMode: 'filter'
  },
  {
    type: 'inside',
    borderColor: 'transparent',
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    fillerColor: 'rgba(0, 95, 190, .5)',
    zoomOnMouseWheel: false,
    moveOnMouseMove: true,
    moveOnMouseWheel: true
  }
]

export const setDataZoom = (option, total, size = 15) => {
  if (total > size) {
    option.dataZoom[0].show = true
    option.dataZoom[0].start = 100 - (size / total * 100)
  } else {
    option.dataZoom[0].show = false
    option.dataZoom[0].start = 0
  }
}

// 坐标轴刻度简化为万，千万
export const formatToMillion = value => {
  if (value >= 10000 && value < 10000000) {
    value = value / 10000 + '万'
  } else if (value >= 10000000) {
    value = value / 10000000 + '千万'
  }
  return value
}

// 设置渐变色
export const linearGradientStyle = (location, colorStart, colorEnd) => {
  return {
    type: 'linear',
    x: location[0],
    y: location[1],
    x2: location[2],
    y2: location[3],
    colorStops: [{
      offset: 0,
      color: colorStart
    }, {
      offset: 1,
      color: colorEnd
    }],
    globalCoord: false
  }
}
