<script setup lang="ts">
import { reactive, ref, unref } from "vue";
import { ElDatePicker, ElSelect, ElTable } from "element-plus";
import { useResponseHandle } from "/@/hooks/core/useAsync";
import { httpList } from "/@/api/InvoiceSales/invoiceApply";
import { inv_columns } from "../config/_details";
import { useCompany } from "/@/hooks/core/useCompany";
import { useTypeOptions } from "/@/utils/status";

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

const params = ref({
  invNo: "",
  date: [],
  platform_type: '',
  buyer_name: '',
  inv_number: ''
});

const loading = ref(false);
const visible = ref(false);

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

const { currentCompany } = useCompany();

const pagination = reactive({
  pageSize: 15,
  currentPage: 1,
  total: 0
});

async function requestPaymentList() {
  const { pageSize: size, currentPage: page } = pagination;
  loading.value = true;

  const { code, message, data } = await httpList({
    status: "4",
    inv_out: currentCompany.value.companyNo,
    size,
    page,
    ...params.value
  });

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

  loading.value = false;
}

function handleConfirm() {
  visible.value = false;
  emit("choose", unref(selectOrder.value[0]));
}

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]];
  }
}

function handleSizeChange() {
  pagination.currentPage = 1;
  requestPaymentList();
}

function onSearch(_isReset = false) {
  if (_isReset) {
    params.value = {
      invNo: ""
    };
  }

  pagination.currentPage = 1;
  requestPaymentList();
}

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

<template>
  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="visible" title="发票列表" center
    width="1040px" @open="() => requestPaymentList()">

    <ElRow class="mb-[10px]">
      <ElCol :span="8">
        <ElDatePicker size="small" type="daterange" start-placeholder="申请开始时间" end-placeholder="申请结束时间"
          v-model="params.date" value-format="YYYY-MM-DD" />
      </ElCol>

      <ElCol :span="8">
        <ElSelect placeholder="平台类型" v-model="params.platform_type">
          <ElOption v-for="option in useTypeOptions" v-bind="option" />
        </ElSelect>
      </ElCol>


      <ElCol :span="8">
        <ElInput placeholder="客户名称" v-model="params.buyer_name" />
      </ElCol>
    </ElRow>

    <ElRow class="mb-[10px]">
      <ElCol :span="8">
        <ElInput placeholder="发票申请编码" v-model="params.invNo" />
      </ElCol>

      <ElCol :span="8">
        <ElInput placeholder="发票号码" v-model="params.inv_number" />
      </ElCol>
    </ElRow>
    <!-- <div flex mb-2>
      <div flex flex-1 gap="5" pr="20px">
        <el-input
          placeholder="发票申请编码"
          size="small"
          v-model="params.invNo"
        />
      </div>

      <div flex width="120px">
        <el-button size="small" type="primary" @click="() => onSearch()"
          >搜索</el-button
        >
        <el-button size="small" @click="() => onSearch(true)">重置</el-button>
      </div>
    </div> -->

    <el-table v-loading="loading" border ref="tableRef" :data="paymentList" size="small" row-key="id"
      @selection-change="handleSelectionChange" max-height="520px">
      <el-table-column type="selection" align="center" width="40" fixed="left" />
      <el-table-column v-for="(col, index) in inv_columns" :key="index" v-bind="col" show-overflow-tooltip />
    </el-table>

    <div flex justify-between mt-2>
      <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
        :total="pagination.total" @current-change="requestPaymentList" @size-change="handleSizeChange"
        layout="sizes, prev, pager, next" :page-sizes="[15, 50, 100]" />

      <el-button type="primary" size="small" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

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