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

const paymentList = ref<Array<Record<string, string>>>([]);
const selectOrder = ref<Array<Record<string, string>>>([]);
const visible = ref(false);

const emit = defineEmits(["on-add-order"]);
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const responseHandle = useResponseHandle();

//初始化订单对账列表
async function requestPaymentList() {
  const { code, message, data } = await httpList({});

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

function handleConfirm() {
  visible.value = false;
  emit("on-add-order", unref(selectOrder));
}

function handleSelectionChange(values) {
  if (values.length > 1) {
    const value = values.pop();
    tableRef.value.clearSelection();
    tableRef.value.toggleRowSelection(value, true);
    selectOrder.value = [value];
  } else {
    selectOrder.value = [values[0]];
  }
}

//过滤审核成功的对账列表
watchEffect(
  () =>
    (paymentList.value = paymentList.value.filter(item => item.status === "3"))
);

defineExpose({
  onDisplay: () => (visible.value = true)
});

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

<template>
  <el-dialog v-model="visible" title="订单对账" center>
    <el-table
      border
      ref="tableRef"
      :data="paymentList"
      size="small"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        v-bind="col"
        show-overflow-tooltip
      />
    </el-table>

    <div w-full flex justify-end mt-2>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
      <el-button @click="() => (visible = false)">取消</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-table__header) {
  .el-checkbox {
    display: none;
  }
}
</style>
