import { Component, h } from 'vue';
import { NTag, NIcon, NAvatar, NButton, NTooltip } from 'naive-ui';
import { downloadJsonStore } from '@/store/modules/downloadJson';
import newImg from '@/assets/images/new.png';
import { HelpCircleOutline } from '@vicons/ionicons5';
const jsonStore = downloadJsonStore();

export const payStatus = {
  0: '全部', // 无状态
  1: '支付成功',
  2: '支付取消',
  // 3: '处理中', // 已支付？
  4: '余额不足',
  // 5: '测试订单', // 没有OpenID
  // 6: '无可分配订单', // 已支付？
  // 90: '支付超时',
  // 91: '未配置状态',
};

export function payStatusMap() {
  const att: any = [];
  for (const key in payStatus) {
    att.push({ value: key, label: payStatus[key] });
  }
  return att;
}

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: 'id',
    key: 'id',
    width: 100,
  },
  {
    title: '下单渠道',
    dataIndex: 'platform',
    key: 'platform',
    render(row) {
      return row.platform === 2 ? '苹果' : '安卓';
    },
    width: 100,
  },
  {
    title(_column) {
      return renderTooltip(
        h(
          NButton,
          {
            ghost: true,
            strong: true,
            tertiary: true,
            size: 'small',
            text: true,
            iconPlacement: 'right',
          },
          { default: () => '玩家ID', icon: renderIcon(HelpCircleOutline) }
        ),
        '3天内注册的玩家会带有 [ 新 ] 字标识'
      );
    },
    dataIndex: 'player_id',
    key: 'player_id',
    width: 150,
    render(row) {
      // 3天内注册的新用户
      if (row.user_created_at + 86400 * 3 > new Date().getTime() / 1000) {
        return h(
          NTag,
          {
            checkable: true,
          },
          {
            default: () => row.player_id,
            avatar: () =>
              h(NAvatar, {
                src: newImg,
                style: {
                  width: '22px',
                  height: '22px',
                  'max-width': '100%',
                  'max-height': '100%',
                },
              }),
          }
        );
      }

      return row.player_id;
    },
  },
  {
    title: '玩家昵称',
    dataIndex: 'nickName',
    key: 'nickName',
    width: 130,
  },
  {
    title: '购买商品',
    dataIndex: 'goods_id',
    key: 'goods_id',
    width: 150,
    render(row) {
      const product = jsonStore.getProduct[row.goods_id];
      if (product !== undefined) {
        return product['Name']; // Access the "Name" property using square brackets
      }
      return '无关联信息(' + row.goods_id + ')';
    },
  },
  {
    title: '订单金额(元)',
    dataIndex: 'money',
    key: 'money',
    render(row) {
      return row.money;
    },
    width: 120,
  },
  // {
  //   title: '订单号',
  //   dataIndex: 'order_sn',
  //   key: 'order_sn',
  //   width: 200,
  // },
  {
    title: '外部单号',
    dataIndex: 'out_trade_no',
    key: 'out_trade_no',
    width: 280,
  },
  {
    title: '支付状态',
    dataIndex: 'status',
    key: 'status',
    render(row) {
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: row.status === 1 ? 'info' : 'error',
          bordered: false,
        },
        {
          default: () => payStatus[row.status] ?? '未知',
        }
      );
    },
    width: 150,
  },
  // {
  //   title: '支付时间',
  //   dataIndex: 'pay_at',
  //   key: 'pay_at',
  //   width: 150,
  // },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    width: 160,
  },
];
