import { formatAbsNum } from './other';
const formatDate = (value: string) => {
  if ((value || '').indexOf('~') > -1) {
    value = value.split('~')[1];
  }
  return value;
};

const Base_tooltip_num = {
  zIndex: 100,
  shared: true,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: 'rgba(31,41,71,.75)',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  formatter: function () {
    let s = '<div style="background-color:rgba(31,41,71,.75);font-size:14px;font-weight:400;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table><thead style="border-bottom:2px solid #8C8C8C;line-height:30px;"><tr><th>时间</th><th style="padding-left:20px;text-align: right">'
      + formatDate(this.x)
      + '</th><tbody style="font-weight:400">';
    (this.points || []).forEach((item, ind) => {
      if (item.series.userOptions.hiddenTooltip) {
        return;
      }
      let domStr = '<tr style="line-height:20px;">'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + item.series.name
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding-left:20px;text-align: right">' : '<th style="padding-left:20px;text-align: right">')
        + item.y.toLocaleString()
        + '</th>';
      domStr += '</tr>';
      s += domStr;
    });
    s += '</tbody></table></div>';
    return s;
  },
  style: {
    color: '#666',
    fontSize: '12px',
  },
};


// 百分比
const Base_tooltip_Pre = {
  zIndex: 100,
  shared: true,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: '#1F2947',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  valueDecimals: 2,
  valueSuffix: '%',
  formatter: function () {
    let s = '<div style="background-color:#1F2947;font-size:14px;font-weight:400;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table><thead style="border-bottom:2px solid #8C8C8C;line-height:30px;"><tr><th>时间</th><th style="padding-left:20px;text-align: right">'
      + formatDate(this.x)
      + '</th><tbody>';

    (this.points || []).forEach((item, ind) => {
      if (item.series.userOptions.hiddenTooltip) {
        return;
      }

      let domStr = '<tr style="line-height:20px;">'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + item.series.name
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding-left:20px;text-align: right">' : '<th style="padding-left:20px;text-align: right">')
        + formatAbsNum(item.y).toLocaleString()
        + '%</th>';
      domStr += '</tr>';
      s += domStr;
    });
    s += '</tbody></table></div>';
    return s;
  },
  style: {
    color: '#666666',
    fontSize: '12px',
  },
};

const Base_tooltip_BoxPlot = {
  zIndex: 100,
  shared: false,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: '#1F2947',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  style: {
    color: '#fff',
    fontSize: '14px',
  },
  formatter: function () {
    const { point, x } = this;
    let s: string = '<div style="background-color:rgba(31,41,71,.75);font-weight:400;font-size:14px;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table><thead style="border-bottom:2px solid #8C8C8C;line-height:30px;"><tr><th>时间</th><th style="padding-left:20px;text-align: right">';

    if ('hightrue' in point) {
      s += formatDate(x);
      s += '</th><tbody style="padding-top:10px">';
      let domStr = '<tr style="line-height:20px;"><th style="vertical-align:middle">'
        + point.series.name
        + '</th>'
        + '<th style="padding-top:8px;padding-left:20px;text-align: right">'
        + '最大值：' + point.hightrue.toLocaleString() + '<br/>'
        + 'Q3：' + point.q3.toLocaleString() + '<br/>'
        + '中位数：' + point.median.toLocaleString() + '<br/>'
        + 'Q1：' + point.q1.toLocaleString() + '<br/>'
        + '最小值：' + point.low.toLocaleString() + '<br/>'
        + '</th>';
      domStr += '</tr>';
      s += domStr;
    } else if (point.series.userOptions.info) {
      const info = point.series.userOptions.info;
      s += formatDate(info.x);
      s += '</th><tbody style="padding-top:10px">';
      let domStr = '<tr style="line-height:20px;"><th style="vertical-align:middle">'
        + point.series.name
        + '</th>'
        + '<th style="padding-top:8px;padding-left:20px;text-align: right">'
        + '最大值：' + info.hightrue.toLocaleString() + '<br/>'
        + 'Q3\t：' + info.q3.toLocaleString() + '<br/>'
        + '中位数：' + info.median.toLocaleString() + '<br/>'
        + 'Q1\t：' + info.q1.toLocaleString() + '<br/>'
        + '最小值：' + info.low.toLocaleString() + '<br/>'
        + '</th>';
      domStr += '</tr>';
      s += domStr;
    }

    s += '</tbody></table></div>';
    return s;
  },
};


const Base_tooltip_Bubble = {
  zIndex: 100,
  shared: true,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: '#1F2947',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  style: {
    color: '#fff',
    fontSize: '12px',
  },
  formatter: function () {
    let s = '<div style="background-color:#1F2947;font-size:14px;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table>'
      + '<tbody style="padding-top:10px">';
    let domStr = '<tr style="line-height:20px;"><th>'
      + this.point.name
      + '</th><th style="padding-left:20px;text-align: right">'
      + this.point.z.toLocaleString()
      + '</th>';
    domStr += '</tr>';
    s += domStr;

    s += '</tbody></table></div>';
    return s;
  },
};
// 环比
const Base_tooltip_Chain = {
  zIndex: 100,
  shared: true,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: 'rgba(31,41,71,.75)',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  formatter: function () {
    let s = '<div style="background-color:rgba(31,41,71,.75);font-size:14px;font-weight:400;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table><thead style="border-bottom:2px solid #8C8C8C;line-height:30px;"><tr><th>时间</th><th></th><th></th><th style="text-align: right">'
      + formatDate(this.x)
      + '</th><tbody style="font-weight:400">';
    (this.points || []).forEach((item, ind) => {
      if (item.series.userOptions.hiddenTooltip) {
        return;
      }
      let domStr = '<tr style="line-height:20px;">'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + item.series.name
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding:0 20px;text-align: right">' : '<th style="padding:0 20px;text-align: right">')
        + item.y.toLocaleString()
        + ','
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + '环比 '
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding-left:20px;text-align: right">' : '<th style="padding-left:20px;text-align: right">')
        + (('r' in item.point && item.point.r !== null) ? (item.point.r.toFixed(2) + '%') : '--')
        + '</th>';
      domStr += '</tr>';
      s += domStr;
    });
    s += '</tbody></table></div>';
    return s;
  },
  style: {
    color: '#666',
    fontSize: '12px',
  },
};
// 环比 去% 改文案
const Base_tooltip_Chain_noper = {
  zIndex: 100,
  shared: true,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: 'rgba(31,41,71,.75)',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  formatter: function () {
    let s = '<div style="background-color:rgba(31,41,71,.75);font-size:14px;font-weight:400;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table><thead style="border-bottom:2px solid #8C8C8C;line-height:30px;"><tr><th>时间</th><th></th><th></th><th style="text-align: right">'
      + formatDate(this.x)
      + '</th><tbody style="font-weight:400">';
    (this.points || []).forEach((item, ind) => {
      if (item.series.userOptions.hiddenTooltip) {
        return;
      }
      let domStr = '<tr style="line-height:20px;">'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + item.series.name
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding:0 20px;text-align: right">' : '<th style="padding:0 20px;text-align: right">')
        + item.y.toLocaleString()
        + ','
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + '差值变化 '
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding-left:20px;text-align: right">' : '<th style="padding-left:20px;text-align: right">')
        + (('r' in item.point && item.point.r !== null) ? item.point.r : '--')
        + '</th>';
      domStr += '</tr>';
      s += domStr;
    });
    s += '</tbody></table></div>';
    return s;
  },
  style: {
    color: '#666',
    fontSize: '12px',
  },
};
// 百分比 环比
const Base_tooltip_Pre_Chain = {
  zIndex: 100,
  shared: true,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: '#1F2947',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  valueDecimals: 2,
  valueSuffix: '%',
  formatter: function () {
    let s = '<div style="background-color:#1F2947;font-size:14px;font-weight:400;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table><thead style="border-bottom:2px solid #8C8C8C;line-height:30px;"><tr><th>时间</th><th></th><th></th><th style="padding-left:20px;text-align: right">'
      + formatDate(this.x)
      + '</th><tbody>';

    (this.points || []).forEach((item, ind) => {
      if (item.series.userOptions.hiddenTooltip) {
        return;
      }
      console.log('mmmm', item);
      let domStr = '<tr style="line-height:20px;">'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + item.series.name
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding:0 20px;text-align: right">' : '<th style="padding:0 20px;text-align: right">')
        + formatAbsNum(item.y).toLocaleString()
        + '%,</th>'
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + '环比 '
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding-left:20px;text-align: right">' : '<th style="padding-left:20px;text-align: right">')
        + (item.point.r !== null ? (Number(item.point.r.toFixed(2)) + '%') : '--')
        + '</th>';;
      domStr += '</tr>';
      s += domStr;
    });
    s += '</tbody></table></div>';
    return s;
  },
  style: {
    color: '#666666',
    fontSize: '12px',
  },
};
// 百分比 差值变化
const Base_tooltip_Pre_Chain_chazhi = {
  zIndex: 100,
  shared: true,
  crosshairs: true,
  backgroundColor: null,
  borderWidth: 0,
  borderColor: '#1F2947',
  borderRadius: 8,
  shadow: true,
  useHTML: true,
  valueDecimals: 2,
  valueSuffix: '%',
  formatter: function () {
    let s = '<div style="background-color:#1F2947;font-size:14px;font-weight:400;color:#fff; border-radius: 4px; border: 1px solid #1F2947;  box-shadow: 0 1px 5px 0;padding:10px">'
      + '<table><thead style="border-bottom:2px solid #8C8C8C;line-height:30px;"><tr><th>时间</th><th></th><th></th><th style="padding-left:20px;text-align: right">'
      + formatDate(this.x)
      + '</th><tbody>';

    (this.points || []).forEach((item, ind) => {
      if (item.series.userOptions.hiddenTooltip) {
        return;
      }
      console.log('mmmm', item);
      let domStr = '<tr style="line-height:20px;">'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + item.series.name
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding:0 20px;text-align: right">' : '<th style="padding:0 20px;text-align: right">')
        + formatAbsNum(item.y).toLocaleString()
        + '%,</th>'
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;">' : '<th>')
        + '差值变化 '
        + '</th>'
        + (ind === 0 ? '<th style="padding-top:8px;padding-left:20px;text-align: right">' : '<th style="padding-left:20px;text-align: right">')
        + (item.point.r !== null ? (Number(item.point.r.toFixed(2)) + '%') : '--')
        + '</th>';;
      domStr += '</tr>';
      s += domStr;
    });
    s += '</tbody></table></div>';
    return s;
  },
  style: {
    color: '#666666',
    fontSize: '12px',
  },
};
export { Base_tooltip_num, Base_tooltip_Pre, Base_tooltip_BoxPlot, Base_tooltip_Bubble, Base_tooltip_Chain,Base_tooltip_Chain_noper, Base_tooltip_Pre_Chain,Base_tooltip_Pre_Chain_chazhi };