<template>
  <div>
    <n-data-table :columns="columns" :data="data" :pagination="pagination" :bordered="false" />
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, ref, onMounted } from 'vue';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getEquipments } from '@/api/playerMaterial/equipment';
  import { FormItemRule, NTag, NButton, useMessage } from 'naive-ui';
  import { filterArray, objDalEmpty } from '@/utils/array';
  import { downloadJsonStore } from '@/store/modules/downloadJson';
  import type { DataTableColumns } from 'naive-ui';

  type Song = {
    no: number;
    title: string;
    length: string;
  };

  const createColumns = ({ play }: { play: (row: Song) => void }): DataTableColumns<Song> => {
    return [
      {
        title: '角色ID',
        key: 'no',
      },
      {
        title: '角色名称',
        key: 'title',
      },
      {
        title: '星级',
        key: 'length',
      },
      {
        title: '等级',
        key: 'length',
      },
      {
        title: 'Action',
        key: 'actions',
        render(row) {
          return h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: 'small',
              onClick: () => play(row),
            },
            { default: () => 'Play' }
          );
        },
      },
    ];
  };

  const data: Song[] = [
    { no: 3, title: 'Wonderwall', length: '4:18' },
    { no: 4, title: "Don't Look Back in Anger", length: '4:48' },
    { no: 12, title: 'Champagne Supernova', length: '7:27' },
  ];

  const message = useMessage();

  const columns = createColumns({
    play(row: Song) {
      message.info(`Play ${row.title}`);
    },
  });

  const pagination = ref(false as const);

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

  // // 装备资料数据
  // const equipmentData = ref();
  // const jsonStore = downloadJsonStore();
  //
  // // 装备查询数据
  // const data = ref([]);
  //
  // // 原始数据
  // const originalData = ref([]);
  //
  // const loading = ref(false);
  //
  // const paginationReactive = reactive({
  //   page: 1,
  //   pageSize: 10,
  //   showSizePicker: true,
  //   onChange: (page: number) => {
  //     paginationReactive.page = page;
  //   },
  //   onUpdatePageSize: (pageSize: number) => {
  //     paginationReactive.pageSize = pageSize;
  //     paginationReactive.page = 1;
  //   },
  // });
  //
  // // 额外参数配置，可以跟表单外的逻辑进行配合使用
  // const params = ref({
  //   playerid: props.userId,
  //   order: [],
  // });
  //
  // const rules = {
  //   id: {
  //     trigger: ['blur', 'input'],
  //     validator(rule: FormItemRule, value: number) {
  //       if (value == undefined) {
  //         return true;
  //       }
  //       if (!/^\d*$/.test(value)) {
  //         return new Error('GID只能是数字');
  //       }
  //       return true;
  //     },
  //   },
  //   equipId: {
  //     trigger: ['blur', 'input'],
  //     validator(rule: FormItemRule, value: number) {
  //       if (value == undefined) {
  //         return true;
  //       }
  //       if (!/^\d*$/.test(value)) {
  //         return new Error('装备ID只能是数字');
  //       }
  //       return true;
  //     },
  //   },
  // };
  //
  // const schemas: FormSchema[] = [
  //   {
  //     field: 'id',
  //     component: 'NInput',
  //     label: 'GID',
  //     componentProps: {
  //       placeholder: '请输入GID',
  //       onInput: (e: any) => {
  //         console.log(e);
  //       },
  //     },
  //   },
  //   {
  //     field: 'equipId',
  //     component: 'NInput',
  //     label: '装备ID',
  //     componentProps: {
  //       placeholder: '请输入装备ID',
  //       onInput: (e: any) => {
  //         console.log(e);
  //       },
  //     },
  //   },
  //   {
  //     field: 'name',
  //     component: 'NInput',
  //     label: '装备名称',
  //     componentProps: {
  //       placeholder: '请输入装备名称',
  //       onInput: (e: any) => {
  //         console.log(e);
  //       },
  //     },
  //   },
  //   {
  //     field: 'wear',
  //     component: 'NSelect',
  //     label: '状态',
  //     componentProps: {
  //       placeholder: '请选择状态',
  //       options: [
  //         {
  //           label: '全部',
  //           value: '',
  //         },
  //         {
  //           label: '已穿戴',
  //           value: true,
  //         },
  //         {
  //           label: '未穿戴',
  //           value: false,
  //         },
  //       ],
  //       onUpdateValue: (e: any) => {
  //         console.log(e);
  //       },
  //     },
  //   },
  // ];
  //
  // const actionRef = ref();
  //
  // const [register, {}] = useForm({
  //   gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  //   labelWidth: 80,
  //   schemas,
  // });
  //
  // function handleSubmit(values: Recordable) {
  //   values = objDalEmpty(values);
  //   // 如果没有搜索条件，则重置
  //   if (Object.keys(values).length === 0) {
  //     handleReset({});
  //     return;
  //   }
  //   data.value = filterArray(values, originalData.value);
  // }
  //
  // function handleReset(_: Recordable) {
  //   loadDataTable({});
  // }
  //
  // const loadDataTable = async (res) => {
  //   loading.value = true;
  //   let ret = await getEquipments({ ...params.value, ...res });
  //   let lists = ret.list;
  //
  //   for (let i = 0; i < lists.length; i++) {
  //     let index = equipmentData.value.findIndex((item) => item.level_id == lists[i].equipId);
  //     if (index === -1) {
  //       lists[i].meta = { name: '未知', description: '', star: 0 };
  //     } else {
  //       lists[i].meta = equipmentData.value[index];
  //       // 满足搜索
  //       lists[i].name = lists[i].meta.name;
  //     }
  //   }
  //
  //   data.value = lists;
  //   originalData.value = lists;
  //   loading.value = false;
  // };

  onMounted(async () => {
    // if (equipmentData.value == undefined || equipmentData.value.length === 0) {
    //   equipmentData.value = [...jsonStore.getWeapons, ...jsonStore.getWears];
    // }
    // await loadDataTable({});
    if (props.userId < 1) {
      console.log('传入用户信息不正确，props.userId：', props.userId);
      return;
    }
  });
</script>
