import { Component, h } from 'vue';
import { NTag, NIcon, NAvatar, NButton, NTooltip } from 'naive-ui';
import { downloadJsonStore } from '@/store/modules/downloadJson';
import { findIndex } from '@/utils/array';
import newImg from '@/assets/images/new.png';
import { HelpCircleOutline } from '@vicons/ionicons5';
import { useUserStoreWidthOut } from '@/store/modules/user';
import user from 'mock/user/user';
import { forEach } from 'lodash';
import { serialize } from 'v8';
import { http } from '@/utils/http/axios';

const useUserStore = useUserStoreWidthOut();
const jsonStore = downloadJsonStore();

export const payStatus = {
  0: '未处理',
  1: '支付成功',
  2: '支付取消',
  3: '补发成功',
  4: '余额不足',
  5: '用户数据错误', 
  6: '无可分配订单',
  7: '余额不足', 
  8: '已支付未发送', 
  9: '商品不存在', 
};

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: 'playerid',
    key: 'playerid',
    width: 150,
    render(row) {
      // 3天内注册的新用户
      if (row.user_created_at + 86400 * 3 > new Date().getTime() / 1000) {
        return h(
          NTag,
          {
            checkable: true,
          },
          {
            default: () => row.playerid,
            avatar: () =>
              h(NAvatar, {
                src: newImg,
                style: {
                  width: '22px',
                  height: '22px',
                  'max-width': '100%',
                  'max-height': '100%',
                },
              }),
          }
        );
      }

      return row.playerid;
    },
  },
  {
    title: '服务器ID',
    dataIndex: 'serverId',
    key: 'serverId',
    width: 160,
    render(row) {
      // return row.serverId;
      let serverName = '';
      forEach(useUserStore.config.server_option, (item) => {
        if (Number(row.serverId) === (item as { value: number }).value) {
          serverName = (item as { name: string }).name;
          return false;
        }
      });
      return serverName;
    },
  },
  {
    title: '玩家昵称',
    dataIndex: 'nickName',
    key: 'nickName',
    width: 130,
  },
  {
    title: '商品id',
    dataIndex: 'goodsId',
    key: 'goodsId',
    width: 150,
    render(row) {
      return row.goodsId;
      // const index = findIndex(row.goods_id, jsonStore.getGoods);
      // if (index === false) {
      //   return '无关联信息(' + row.goods_id + ')';
      // }
      // // @ts-ignore
      // return jsonStore.getGoods[index].label;
    },
  },
  {
    title: '商品类型',
    dataIndex: 'goodsName',
    key: 'goodsName',
    width: 150,
    render(row) {
      return row.goodsName;
    },
  },
  {
    title: '商品价格(元)',
    dataIndex: 'money',
    key: 'money',
    render(row) {
      return row.money;
    },
    width: 120,
  },
  {
    title: '订单号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 200,
  },
  {
    title: '支付状态',
    dataIndex: 'state',
    key: 'state',
    render(row) {
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: row.state === 1 ? 'info' : 'error',
          bordered: false,
        },
        {
          default: () => payStatus[row.state] ?? '未知',
        }
      );
    },
    width: 150,
  },
  // {
  //   title: '支付时间',
  //   dataIndex: 'pay_at',
  //   key: 'pay_at',
  //   width: 150,
  // },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
    width: 180,
  },
];