<template>
  <div class="hpsfir-card test">
    <HpsfirProTable
      ref="tableRef"
      title="Test"
      :paginations="{ pageSize: 10 }"
      page-layout="total, sizes, prev, pager, next"
      :columns="columns"
      :get-data="getData"
      :on-add="addFun"
      :on-delete="deleteFun"
      :on-edit="updateFun"
      :loading="loading"
      :is-dangder-delete="true"
      :format-dangder-delete-info="formatDeleteInfo"
      row-key="id"
      :operates="operates"
      :add-init-values="addInitValue"
      :codition-init-values="conditionsInitValue"
    />
  </div>
</template>
<script lang="ts" setup>
import {
  HpsfirProTable,
  HpsfirProTableColumn,
  HpsfirProTableData,
  HpsfirProTableFilter,
  HpsfirProTableGetDataFunction,
  useBaseAsync,
} from 'hpsfir-managebase-ui';
import { useApi } from '@/hooks/useApi';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const columns = ref<HpsfirProTableColumn[]>([]);
const tableRef = ref<InstanceType<typeof HpsfirProTable>>();
const storeOptions = ref<{ label: string; value: number }[]>([]);

const addInitValue = {

};

const conditionsInitValue = {
};


// 创建列定义
const createColumns = () => [
  {
    name: 'name',
    label: '名称',
    type: 'string',
    isCondition: true,
    rule: [{ required: true, message: '请输入名称' }],
    width: 150,
  },
  {
    name: 'password',
    label: '密码',
    type: 'password',
    rule: [{ required: true, message: '请输入密码' }],
    width: 120,
  },
  {
    name: 'createTime',
    label: '创建时间',
    type: 'string',
    hideEdit: true,
    hideCreate: true,
    width: 160,
  },
] as HpsfirProTableColumn[];


// 初始化
const init = useBaseAsync(() => {
  columns.value = createColumns();
});

const operates: any[] = [];

const loading = ref(false);

const getData = useBaseAsync<HpsfirProTableGetDataFunction>(async(filter: HpsfirProTableFilter) => {
  try {
    loading.value = true;
    const res = await useApi().testApi.pageTesttest({
      conditions: Object.entries(filter.conditions).reduce((conditions, [key, val]) => {
        if (val === null || val === undefined || val === '') {
          return conditions;
        }

        conditions[key] = val;

        return conditions;
      }, {} as any),
      pageQuery: {
        page: filter.paginations.page - 1,
        pageSize: filter.paginations.pageSize,
      },
    });

    const tableData: HpsfirProTableData = {
      total: res.data.data?.total || 0,
      data: res.data.data?.data || [],
    };
    return tableData;
  } finally {
    loading.value = false;
  }
});

const formatDeleteInfo = (row: any) => `您确定要删除"${row.name || '未命名'}"吗？此操作不可恢复，请谨慎操作。`;

const addFun = useBaseAsync(async(data: any) => {
  await useApi().testApi.addTesttest({
    testAdminVo: {
      ...data,
    },
  });
  ElMessage.success('添加成功');
});

const updateFun = useBaseAsync(async(data: any) => {
  await useApi().testApi.updateTesttest({
    testAdminVo: {
      ...data,
    },
  });
  ElMessage.success('修改成功');
});

const deleteFun = useBaseAsync(async(data: any) => {
  await useApi().testApi.delTesttest(data.id);
  ElMessage.success('删除成功');
});


Promise.all([init()]);
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
