<script setup lang="ts">
import { ref, unref, reactive } from "vue";
import { httpList } from "/@/api/purchase/orderRecord";
import { useCompany } from "/@/hooks/core/useCompany";
import { ElMessage, ElTable } from "element-plus";
import { columns } from "../config/_details";
import { useResponseHandle } from "/@/hooks";
import { payStatusOptions } from "/@/utils/status";

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

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

const pagination = reactive({
  total: 0,
  size: 10,
  page: 1,
  background: true
});

const formData = ref<Record<string, string>>({
  pay_status: "",
  currentValue: ""
});

const tableRef = ref<InstanceType<typeof ElTable>>(null);
const currentKey = ref("payNo");
const loading = ref(false);
const responseHandle = useResponseHandle();

const { currentCompany } = useCompany();

//初始化订单对账列表
async function requestPaymentList() {
  const { size, page } = pagination;
  loading.value = true;

  const { currentValue, ...otherParams } = formData.value;

  const { code, message, data } = await httpList({
    pay_status: "0",
    status: "3",
    [currentKey.value]: currentValue,
    companyNo: currentCompany.value.companyNo,
    ...otherParams,
    page,
    size
  });

  responseHandle({
    code,
    message,
    handler: () => {
      pagination.total = data.count;
      paymentList.value = data.list;
    }
  });
  loading.value = false;
}

function handleConfirm() {
  const [order] = selects.value;
  if (!order) return ElMessage.warning("请选择一个对账单");
  emit("choose", unref(order.payNo));
  visible.value = false;
}

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

function handleSearch(_isReset?: boolean) {
  if (_isReset) formData.value = {};
  pagination.page = 1;
  requestPaymentList();
}

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

<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visible"
    title="订单对账"
    center
    width="1040px"
    @open="() => requestPaymentList()"
  >
    <div flex justify-between mb-2>
      <div flex gap-2>
        <el-input
          clearable
          v-model="formData.currentValue"
          placeholder="对账编码"
        >
          <template #prepend>
            <el-select v-model="currentKey" style="width: 130px">
              <el-option label="对账编码" value="payNo" />
              <el-option label="卖方公司编码" value="supplierNo" />
              <el-option label="卖方公司名称" value="supplierName" />
            </el-select>
          </template>
        </el-input>
        <el-select
          clearable
          w-80
          v-model="formData.pay_status"
          placeholder="付款状态"
        >
          <el-option value="1" label="未付款" />
          <el-option value="2" label="部分付款" />
        </el-select>
      </div>

      <div>
        <el-button type="primary" @click="() => handleSearch()">搜索</el-button>
        <el-button @click="() => handleSearch(true)">重置</el-button>
      </div>
    </div>
    <el-table
      border
      ref="tableRef"
      :data="paymentList"
      size="small"
      row-key="id"
      @selection-change="handleSelectionChange"
      mb-2
      v-loading="loading"
    >
      <el-table-column type="selection" align="center" width="40" />
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        v-bind="col"
        show-overflow-tooltip
      >
        <template #="{ row }">
          <el-tag v-if="col.prop === 'pay_status'">{{
            payStatusOptions.find(p => p.value === String(row.pay_status))
              ?.label
          }}</el-tag>

          <span v-else>{{ row[col.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div flex>
      <el-pagination
        v-model:current-page="pagination.page"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="requestPaymentList"
      />

      <div w-full flex justify-end mt-2>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>

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