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

const emit = defineEmits(["change-order-detail"]);
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const dataList = ref<Array<any>>([]);
const responseHandle = useResponseHandle();

async function requestOrderList() {
  const { code, data, message } = await httpList({});

  responseHandle({
    code,
    message,
    handler: () => (dataList.value = data.list)
  });
}

function handleCurrentChange(value) {
  value && emit("change-order-detail", value);
}

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

<template>
  <el-table
    border
    ref="tableRef"
    row-key="id"
    :data="dataList"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <el-table-column
      v-for="(col, index) in columns"
      :key="index"
      v-bind="col"
      show-overflow-tooltip
    />
  </el-table>
</template>
