<template>
  <a-table :loading="loading" :data="renderTable" :columns="columns">
    <template #status="{ record }">
      <a-tag :color="statusMapper(record.status).color">
        {{
          record.status === 1 ? '成功' : record.status === 2 ? '失败' : '偷卡中'
        }}
      </a-tag>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { apiClient } from '@/api';
import {
  ApiMerchantConfigStealRuleRecordGetPageSizeEnum,
  KamiInternalModelEntityV1MerchantHiddenRecord
} from '@/api/generated';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { onMounted, reactive, ref } from 'vue';
const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  ...basePagination
});
const { loading, setLoading } = useLoading(false);
const renderTable = ref<KamiInternalModelEntityV1MerchantHiddenRecord[]>([]);
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    render: (data: { rowIndex: number }) => {
      return data.rowIndex + 1;
    }
  },
  {
    title: '替换订单',
    dataIndex: 'targetOrderNo'
  },
  {
    title: '原始订单',
    dataIndex: 'sourceOrderNo'
  },
  {
    title: '偷卡金额(预计)',
    dataIndex: 'orderAmount'
  },
  {
    title: '偷卡金额(实际)',
    dataIndex: 'actualAmount'
  },
  {
    title: '规则',
    dataIndex: 'strategy',
    render: ({ record }) => {
      switch (record.strategy) {
        case 1:
          return '策略1：创建空白订单';
        case 2:
          return '策略2：创建延迟订单';
        default:
          return '未知';
      }
    }
  },
  {
    title: '延迟时间',
    dataIndex: 'delayDuration'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt'
  }
];
const fetchData = () => {
  setLoading(true);
  apiClient
    .apiMerchantConfigStealRuleRecordGet({
      current: pagination.current,
      pageSize:
        pagination.pageSize as ApiMerchantConfigStealRuleRecordGetPageSizeEnum
    })
    .then(res => {
      renderTable.value = res.data.list;
    })
    .finally(() => {
      setLoading(false);
    });
};

onMounted(() => {
  fetchData();
});

const statusMapper = (status: number) => {
  const colorMapper = {
    1: {
      color: 'green'
    },
    2: {
      color: 'red'
    },
    3: {
      color: 'orange'
    }
  };
  if (colorMapper[status]) {
    return colorMapper[status];
  } else {
    return {
      color: 'gray'
    };
  }
};
</script>
