<template>
  <div>
    <n-card :bordered="false" class="proCard" title="充值排行">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" ref="formRef">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
      <n-spin :show="loading" description="请稍侯...">
        <n-data-table
          :columns="columnsRef"
          :data="dataSource"
          @update:sorter="handleUpdateSorter"
        />
      </n-spin>
    </n-card>
    <UserModal ref="userModalRef" :userId="userId" />
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, ref, computed, onMounted } from 'vue';
  import { NTag, useMessage, NButton } from 'naive-ui';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { rechargeRanking } from '@/api/echarts/rechargeList';
  import UserModal from '@/views/account/accountList/modal.vue';
  import { useUserStoreWidthOut } from '@/store/modules/user';
  import {defRangeShortcuts} from "@/utils/dateUtil";

  const useUserStore = useUserStoreWidthOut();
  const sortStatesRef = ref([]);
  const sortKeyMapOrderRef = computed<any>(() =>
    sortStatesRef.value.reduce((result, { columnKey, order }) => {
      result[columnKey] = order;
      return result;
    }, {})
  );

  const loading = ref(true);
  const dataSource = ref<any>([]);

  const columnsRef = computed(() => [
    {
      title: '排名',
      dataIndex: 'ranking',
      key: 'ranking',
      width: 80,
      sortOrder: sortKeyMapOrderRef.value.ranking || false,
      sorter: {
        compare: (a, b) => a.ranking - b.ranking,
        multiple: 5,
      },
    },
    {
      title: '玩家ID',
      dataIndex: 'player_id',
      key: 'player_id',
      width: 100,
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      key: 'nickName',
      width: 120,
    },
    {
      title: '所属渠道',
      dataIndex: 'platform',
      key: 'platform',
      render(row) {
        return row.platform === 1 ? '安卓' : '苹果';
      },
      width: 120,
    },
    {
      title: '充值金额',
      dataIndex: 'total',
      key: 'total',
      render(row) {
        return row.total;
      },
      width: 120,
      sortOrder: sortKeyMapOrderRef.value.total || false,
      sorter: {
        compare: (a, b) => a.total - b.total,
        multiple: 1,
      },
    },
    {
      title: '当前钻石',
      dataIndex: 'diamond',
      key: 'diamond',
      render(row) {
        return row.diamond;
      },
      width: 120,
    },
    {
      title: '最近充值',
      dataIndex: 'lastRechargeValue',
      key: 'lastRechargeValue',
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: row.lastRechargeTag,
            bordered: false,
          },
          {
            default: () => row.lastRecharge,
          }
        );
      },
      sortOrder: sortKeyMapOrderRef.value.lastRechargeValue || false,
      sorter: {
        compare: (a, b) => a.lastRechargeValue - b.lastRechargeValue,
        multiple: 2,
      },
      width: 150,
    },
    {
      title: '最近登录',
      dataIndex: 'lastLoginValue',
      key: 'lastLoginValue',
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: row.lastLoginTag,
            bordered: false,
          },
          {
            default: () => row.lastLogin,
          }
        );
      },
      sortOrder: sortKeyMapOrderRef.value.lastLoginValue || false,
      sorter: {
        compare: (a, b) => a.lastLoginValue - b.lastLoginValue,
        multiple: 3,
      },
      width: 150,
    },
    {
      title: '玩家等级',
      dataIndex: 'level',
      key: 'level',
      render(row) {
        return row.level;
      },
      sortOrder: sortKeyMapOrderRef.value.level || false,
      sorter: {
        compare: (a, b) => a.level - b.level,
        multiple: 4,
      },
      width: 120,
    },
    {
      title: '最大关卡进度',
      dataIndex: 'maxPassValue',
      key: 'maxPassValue',
      render(row) {
        return row.maxPass;
      },
      sortOrder: sortKeyMapOrderRef.value.maxPassValue || false,
      sorter: {
        compare: (a, b) => a.maxPassValue - b.maxPassValue,
        multiple: 5,
      },
      width: 150,
    },
    {
      title: '操作',
      key: 'actions',
      render(row) {
        return h(
          NButton,
          {
            size: 'small',
            onClick: () => handleEdit(row),
          },
          { default: () => '查询玩家信息' }
        );
      },
      width: 150,
    },
  ]);

  const schemas: FormSchema[] = [
    {
      field: 'server_id',
      component: 'NSelect',
      label: '服务器',
      componentProps: {
        placeholder: '请选择服务器',
        // defaultValue: params.value.server_id,
        options: useUserStore.config.server_option,
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'platform',
      component: 'NSelect',
      label: '下单渠道',
      componentProps: {
        placeholder: '请选择下单渠道',
        options: [
          {
            label: '安卓平台',
            value: 1,
          },
          {
            label: '苹果平台',
            value: 2,
          },
        ],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'created_at',
      component: 'NDatePicker',
      label: '选择日期',
      componentProps: {
        type: 'datetimerange',
        clearable: true,
        shortcuts: defRangeShortcuts(),
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
  ];

  const formRef: any = ref(null);

  const formParams = reactive({
    name: '',
    address: '',
    date: null,
  });

  const params = ref({
    pageSize: 10,
  });

  const [register, {}] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas,
  });

  const loadDataTable = async (res) => {
    const tmpData = await rechargeRanking({
      ...formParams,
      ...params.value,
      ...res,
      ...formRef.value.formModel,
    });
    dataSource.value = tmpData?.list;
    if (dataSource.value === null || dataSource.value === undefined) {
      dataSource.value = [];
    }
    loading.value = false;
  };

  onMounted(async () => {
    await loadDataTable({});
  });

  async function reloadTable() {
    loading.value = true;
    await loadDataTable({});
  }

  function handleSubmit(_values: Recordable) {
    reloadTable();
  }

  function handleReset(_values: Recordable) {
    reloadTable();
  }

  function handleEdit(record: Recordable) {
    openUserModal(record.player_id);
  }

  const userModalRef = ref();
  const userId = ref(0);
  function openUserModal(id) {
    userId.value = id;
    const { openDrawer } = userModalRef.value;
    openDrawer();
  }

  function handleUpdateSorter(sorters) {
    sortStatesRef.value = [].concat(sorters);
  }
</script>

<style lang="less" scoped></style>
