<template>
  <n-card :bordered="false" class="proCard">
    <!--    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">-->
    <!--      <template #statusSlot="{ model, field }">-->
    <!--        <n-input v-model:value="model[field]" />-->
    <!--      </template>-->
    <!--    </BasicForm>-->

    <BasicForm
      @register="register"
      @submit="handleSubmit"
      @reset="handleReset"
      @keyup.enter="handleSubmit"
      ref="formRef"
    >
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="actionRef"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1090"
      :flex-height="false"
      :resizeHeightOffset="-20000"
    />
  </n-card>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { NTag, useMessage } from 'naive-ui';
  import { BasicTable } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { consumptionDetails } from '@/api/echarts/consumptionDetails';
  import { useRouter } from 'vue-router';
  import { timestampToTime } from '@/utils/dateUtil';
  import { userInfoObj } from '@/views/account/accountList/userInfo';
  import { consumptionTypes } from '@/enums/consumptionEnum';

  interface Props {
    userId?: number | string;
    userInfo?: any;
  }
  const props = withDefaults(defineProps<Props>(), { userId: 0, userInfo: userInfoObj });

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '玩家ID',
      dataIndex: 'user_id',
      key: 'user_id',
      width: 100,
    },
    {
      title: '操作来源',
      dataIndex: 'source',
      key: 'source',
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: 'info',
            bordered: false,
          },
          {
            default: () => consumptionTypes[row.source] ?? '未知',
          }
        );
      },
      width: 150,
    },
    {
      title: '变动金币',
      dataIndex: 'coin',
      key: 'coin',
      width: 150,
    },
    {
      title: '变动后剩余金币',
      dataIndex: 'coin_sum',
      key: 'coin_sum',
      width: 150,
    },
    {
      title: '变动钻石',
      dataIndex: 'diamond',
      key: 'diamond',
      width: 150,
    },
    {
      title: '变动后剩余钻石',
      dataIndex: 'diamond_sum',
      key: 'diamond_sum',
      width: 150,
    },
    {
      title: '操作时间',
      dataIndex: 'time',
      key: 'time',
      render: (rows, _) => {
        return timestampToTime(rows.time);
      },
      width: 150,
    },
  ];

  const rules = {
    name: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入名称',
    },
    address: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入地址',
    },
    date: {
      type: 'number',
      required: true,
      trigger: ['blur', 'change'],
      message: '请选择日期',
    },
  };

  const schemas: FormSchema[] = [
    // {
    //   field: 'user_id',
    //   component: 'NInputNumber',
    //   label: '玩家ID',
    //   componentProps: {
    //     placeholder: '请输入玩家ID',
    //     showButton: false,
    //     onInput: (e: any) => {
    //       console.log(e);
    //     },
    //   },
    // },
    // {
    //   field: 'type',
    //   component: 'NSelect',
    //   label: '操作类型',
    //   componentProps: {
    //     placeholder: '请选择操作类型',
    //     options: [
    //       {
    //         label: '消费',
    //         value: 1,
    //       },
    //       {
    //         label: '增加',
    //         value: 2,
    //       },
    //     ],
    //     onUpdateValue: (e: any) => {
    //       console.log(e);
    //     },
    //   },
    // },
    {
      field: 'createtime',
      component: 'NDatePicker',
      label: '选择日期',
      // defaultValue: [1183135260000, 1183135260000],
      componentProps: {
        type: 'datetimerange',
        clearable: true,
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
  ];

  const router = useRouter();
  const formRef: any = ref(null);
  const message = useMessage();
  const actionRef = ref();

  const showModal = ref(false);
  const formBtnLoading = ref(false);
  const formParams = reactive({});

  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) => {
    return await consumptionDetails({
      ...formParams,
      ...params.value,
      ...formRef.value.formModel,
      ...{ user_id: props.userId },
    });
  };

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleSubmit(values: Recordable) {
    console.log(values);
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log(values);
  }
</script>

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