const formatter = function(this: any) {
  const userOpt = this.points[0].series.userOptions;
  return `
    <div class="tooltip-style">
      <table>
        <thead>
          <tr>
            ${
              userOpt.tipHead ?
                userOpt.tipHead(this)
                :
                `<th>${userOpt.th || '时间'}</th><th>${this.x}</th>`
            }
          </tr>
        </thead>
        <tbody>
          ${
            userOpt.tipBody ?
              userOpt.tipBody(this)
              :
              this.points.map((val: any) => (
                `
                  <tr>
                    <td>${val.series.name}</td>
                    <td>${val.y}${val.series.userOptions.after || ''}</td>
                  </tr>
                `
              )).join('')
          }
          
        </tbody>
      </table>
    </div>
  `;
}

// 自定义tip需要带自己的信息
const formatter2 = function(this: any) {
  const { userOptions } = this.points[0].series;
  const isFunc = typeof userOptions.tipFormatter === 'function';
  return `
    <div class="tooltip-style">
      <table>
        <thead>
          <tr>
            <th>${userOptions.th || '时间'}</th>
            <th>${this.x}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colSpan="2" style="text-align: left; padding-bottom: 5px">${(isFunc ? userOptions.tipFormatter(this) : userOptions.tipFormatter) || ''}</td>
          </tr>
          <tr>
            <td colSpan="2">
            ${
              this.points.map((val: any) => (
                `<span style="padding-right: 15px">${val.series.name} ${val.y}${val.series.userOptions.after || ''}</span>`
              )).join('')
            }
            </td>
          </tr>
          
        </tbody>
      </table>
    </div>
  `;
}

export { formatter, formatter2 };