import { Component, h } from 'vue';
import { NButton, NIcon, NTooltip } from 'naive-ui';
import { HelpCircleOutline } from '@vicons/ionicons5';

const renderTooltip = (trigger, content) => {
  return h(NTooltip, null, {
    trigger: () => trigger,
    default: () => content,
  });
};

function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

export const columns = [
  {
    title: '注册日期',
    dataIndex: 'date',
    key: 'date',
    width: 150,
  },
  {
    // title: '当天注册人数',
    title(_column) {
      return renderTooltip(
        h(
          NButton,
          {
            ghost: true,
            strong: true,
            tertiary: true,
            size: 'small',
            text: true,
            iconPlacement: 'right',
          },
          { default: () => '首日人数  / 金额', icon: renderIcon(HelpCircleOutline) }
        ),
        '注册玩家在第1日的付费人数和付费金额'
      );
    },
    width: 150,
    dataIndex: 'c1',
    key: 'c1',
    render(row) {
      if (row.c1 === 0) {
        return '-';
      }
      return row.c1 + ' / ' + row.m1;
    },
  },
  {
    title(_column) {
      return renderTooltip(
        h(
          NButton,
          {
            ghost: true,
            strong: true,
            tertiary: true,
            size: 'small',
            text: true,
            iconPlacement: 'right',
          },
          { default: () => '2日人数 / 金额', icon: renderIcon(HelpCircleOutline) }
        ),
        '注册玩家在第2日的付费人数 / 金额，仅计算当天的'
      );
    },
    width: 150,
    dataIndex: 'c2',
    key: 'c2',
    render(row) {
      if (row.c2 === 0) {
        return '-';
      }
      return row.c2 + ' / ' + row.m2;
    },
  },
  {
    title: '3日人数 / 金额',
    dataIndex: 'c3',
    key: 'c3',
    width: 150,
    render(row) {
      if (row.c3 === 0) {
        return '-';
      }
      return row.c3 + ' / ' + row.m3;
    },
  },
  {
    title: '4日人数 / 金额',
    dataIndex: 'c4',
    key: 'c4',
    width: 150,
    render(row) {
      if (row.c4 === 0) {
        return '-';
      }
      return row.c4 + ' / ' + row.m4;
    },
  },
  {
    title: '5日人数 / 金额',
    dataIndex: 'c5',
    key: 'c5',
    width: 150,
    render(row) {
      if (row.c5 === 0) {
        return '-';
      }
      return row.c5 + ' / ' + row.m5;
    },
  },
  {
    title: '6日人数 / 金额',
    dataIndex: 'c6',
    key: 'c6',
    width: 150,
    render(row) {
      if (row.c6 === 0) {
        return '-';
      }
      return row.c6 + ' / ' + row.m6;
    },
  },
  {
    title: '7日人数 / 金额',
    dataIndex: 'c7',
    key: 'c7',
    width: 150,
    render(row) {
      if (row.c7 === 0) {
        return '-';
      }
      return row.c7 + ' / ' + row.m7;
    },
  },
  {
    title(_column) {
      return renderTooltip(
        h(
          NButton,
          {
            ghost: true,
            strong: true,
            tertiary: true,
            size: 'small',
            text: true,
            iconPlacement: 'right',
          },
          { default: () => '7日内人数', icon: renderIcon(HelpCircleOutline) }
        ),
        '7日内有付费的人数'
      );
    },
    // title: '7日内去重付费人数',
    dataIndex: 'u7',
    key: 'u7',
    width: 150,
    render(row) {
      if (row.u7 === 0) {
        return '-';
      }
      return row.u7;
    },
  },
  {
    title: '30日内人数 / 金额',
    dataIndex: 'c30',
    key: 'c30',
    width: 150,
    render(row) {
      if (row.c30 === 0) {
        return '-';
      }
      return row.c30 + ' / ' + row.m30;
    },
  },
];
