<template>
  <div class="emergency-supply-container">
    <BasicTable :tableData="tableData" :tableConfig="tableConfig">
      <template #changeType="scope">
        <span>{{ CHANGE_TYPE_MAP[scope.row.changeType] }}</span>
      </template>
      <template #changeQuantity="scope">
        <span v-if="scope.row.changeQuantity > 0">+</span>
        <span>{{ scope.row.changeQuantity }}</span>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import BasicTable from '@/components/BasicTable.vue';
  import { CHANGE_RECORD_TABLE_COLUMNS, CHANGE_RECORD_TABLE_OPTIONS } from '../config';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { ChangeRecordListRes } from '@/types/emergency-supplier';
  import { getSupplyChangeRecord } from '@/api/emergency-supplier';
  import { CHANGE_TYPE_MAP } from '../constant';

  const { tableConfig } = useTableConfig(CHANGE_RECORD_TABLE_COLUMNS, CHANGE_RECORD_TABLE_OPTIONS, false);
  const props = defineProps<{
    id: number;
  }>();
  const tableData = ref<ChangeRecordListRes[]>([]);
  const getChangeRecord = async () => {
    tableConfig.loading = true;
    const res = await getSupplyChangeRecord(props.id);
    tableData.value = res;
    tableConfig.loading = false;
  };
  onMounted(() => {
    getChangeRecord();
  });
</script>

<style lang="scss" scoped>
  @use '../styles/info.scss' as *;
</style>
