<script setup lang="ts">
import { onMounted, ref } from "vue";
import { purchase_columns } from "../../config/configs";
import { ElTable } from "element-plus";
import { useResponseHandle } from "/@/hooks";
import { httpList } from "/@/api/purchase/orderRecord";

const emit = defineEmits(["addBtnClick"]);
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const loading = ref(false);
const purchaseList = ref([]);
const responseHandle = useResponseHandle();

async function requestPurchaseList() {
  loading.value = true;
  const { code, message, data } = await httpList({});

  responseHandle({
    code,
    message,
    handler: () =>
      (purchaseList.value = data?.list.filter(item => item.status === "3"))
  });

  loading.value = false;
}

onMounted(() => requestPurchaseList());
</script>

<template>
  <el-table
    border
    v-loading="loading"
    ref="tableRef"
    row-key="id"
    size="small"
    :data="purchaseList"
  >
    <el-table-column
      v-for="(col, index) in purchase_columns"
      :key="index"
      v-bind="col"
      show-overflow-tooltip
    />

    <el-table-column fixed="right" label="操作">
      <template #="{ row }">
        <el-button
          link
          type="primary"
          size="small"
          @click="emit('addBtnClick', row)"
          >添加</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
