<script lang="ts" setup>
import type { CreateOrderType, PaymentRowType } from '../types';

import { computed } from 'vue';

import { reconciliateBillsApi } from '#/api/posting';

import { useCardListGrid } from '../composables/useCardListGrid';

const props = withDefaults(
  defineProps<{
    payment: PaymentRowType | undefined;
    selectedData: CreateOrderType[] | undefined;
    tabKey: string;
  }>(),
  {},
);

const emit = defineEmits(['completeCheck', 'deletedChecked']);

interface RowType {
  oid: string;
  courseFee: string;
  courseId: string;
  studyDays: number;
  cellPhone: string;
  productName: string;
  createDate: string;
}

function transformData(rows: RowType[]) {
  return rows.map((row) => ({
    id: row.oid,
    paymentId: props.payment?.id || 0,
    courseId: row.courseId.slice(1),
    tel: row.cellPhone,
    come: '0',
    orderType: '2',
    productName: row.productName,
    productId: '',
    catalogueId: '',
    orderMoney: '',
    realMoney: String(props.payment?.fee) || '',
    districtMoney: '',
    startTime: props.payment?.ctime || '',
    endTime: '',
  }));
}

const { Grid, cancelCheck, setChecked } = useCardListGrid<RowType, CreateOrderType>({
  payment: computed(() => props.payment),
  selectedData: computed(() => props.selectedData),
  rowKey: 'oid',
  rowKeyPrefix: props.tabKey,
  columns: [
    { type: 'checkbox', width: 60 },
    { field: 'productName', title: '课程名称', minWidth: 150 },
    { field: 'courseFee', title: '金额', minWidth: 100 },
    { field: 'cellPhone', title: '手机号', minWidth: 150 },
    { field: 'studyDays', title: '学习天数', minWidth: 100 },
  ],
  query: (params) =>
    reconciliateBillsApi.getYiluRecommendCourseBuyList({
      ...params,
      paymentId: props.payment?.id || 0,
    }),
  transformData,
  emit,
});

defineExpose({ cancelCheck, setChecked });
</script>

<template>
  <div class="orders-container h-full">
    <Grid />
  </div>
</template>
