<script setup lang="ts">
import { ref } from "vue";
import { inv_columns } from "../../returnTicket/config/configs";
import { httpList } from "/@/api/InvoiceSales/invoiceApply";
import { httpBatchapplyred } from "/@/api/InvoiceSales/redInk";
import { useAsync } from "/@/hooks";

// httpApplyred

const emit = defineEmits(["reload"]);

const visible = ref(false);
const selectInvioces = ref<Array<Record<string, string>>>([]);
const handleSelectionChange = values => (selectInvioces.value = values);

const success = () => {
  visible.value = false;
  emit("reload");
};

const initalPagination = {
  pageSize: 10,
  currentPage: 1,
  total: 0
};

const {
  data,
  pagination,
  getPaginationParams,
  run: invoicelistRun,
  loading
} = useAsync<Array<Record<string, string>>>({
  initalData: [],
  isList: true,
  initalPagination
});

const requestInvoicelist = () => {
  invoicelistRun(
    httpList({
      status: "3",
      ...getPaginationParams()
    })
  );
};

const { run: batchApplyRedRun, loading: batchApplyRedLoading } = useAsync({
  success
});

const requestBatchApplyred = () => {
  const invArr = selectInvioces.value.map(({ invNo }) => invNo);

  batchApplyRedRun(
    httpBatchapplyred({
      invArr
    })
  );
};

defineExpose({
  onDisplay() {
    visible.value = true;
    requestInvoicelist();
  }
});
</script>

<template>
  <el-dialog title="创建红冲发票" center v-model="visible">
    <el-table
      :data="data"
      row-key="invNo"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column
        v-for="inv in inv_columns"
        :key="inv.prop"
        v-bind="inv"
        show-overflow-tooltip
        reserve-selection
    /></el-table>

    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="() => requestInvoicelist()"
    />

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