<script setup lang="ts">
import { reactive, ref, unref } from "vue";
import { httpOrderList } from "/@/api/InvoiceSales/invoiceApply";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import searchFormConfig from "./search.config";
import { responseHandle } from "/@/utils/responseHandle";
import { useNav } from "/@/layout/hooks/nav";
import { ElMessage } from "element-plus";
import { useColumns } from "./columns";
import { useTypeOptions } from "/@/utils/status";

const { columns } = useColumns();
const { logout } = useNav();
const loading = ref(false);
const dataList = ref([]);
const selected = ref([]);
const tableRef = ref();

const pagination = reactive({
  total: 0,
  pageSize: 15,
  currentPage: 1,
  background: true,
  pageSizes: [15, 50, 100]
});

const props = defineProps<{
  payload: object;
}>();

const emit = defineEmits(["confirm"]);
let otherParams: Record<any, any> = {};
const ruleForm = ref({});
const { handleSearchClick, handleResetClick } = usePageSearch(
  params => {
    otherParams = params;
    pagination.currentPage = 1;
    onSearch();

    return {
      result: {},
      deleteProps: []
    };
  },
  () => {
    otherParams = {};
    onSearch();
  }
);

const handleCurrentChange = (current: number) => {
  pagination.currentPage = current;
  onSearch();
};

function handleReset() {
  pagination.currentPage = 1;
  pagination.pageSize = 15;
  handleResetClick();
}

function selectedChange(val) {
  selected.value = val;
}

//列表展示
async function onSearch() {
  loading.value = true;
  const { currentPage: page, pageSize: size } = pagination;
  const { code, data, message } = await httpOrderList({
    ...props.payload,
    inv_is: "1",
    cat_status: "2",
    inv_status: "0",
    ...otherParams,
    page,
    size,
    ...ruleForm.value
  });

  responseHandle({
    code,
    message,
    logout,
    handler: () => {
      const { list, count } = data ?? {};
      dataList.value = list ?? [];
      pagination.total = count ?? 0;
    }
  });
  loading.value = false;
}

function handleSizeChange(val) {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  onSearch();
}

function handleConfirm() {
  if (selected.value.length === 0) {
    return ElMessage.error("至少添加一个销售订单！");
  }

  //商品数量或开票金额为空
  const noConfirm = selected.value.filter(o => o.winv_fee === "0.00");
  const noInvNum = selected.value.filter(o => String(o.winv_num) === "0");

  if (noConfirm.length !== 0) {
    return ElMessage.error(`销售订单 ${noConfirm[0].sequenceNo} 开票金额为零`);
  }

  if (noInvNum.length !== 0) {
    return ElMessage.error(`销售订单 ${noInvNum[0].sequenceNo} 开票数量为零`);
  }

  emit("confirm", unref(selected));
}

onSearch();
</script>

<template>
  <div relative>
    <PageSearch
      class="search"
      @reset-btn-click="handleReset"
      @search-btn-click="handleSearchClick"
      :form-config="searchFormConfig"
    />
    <div v-loading="loading">
      <PureTable
        ref="tableRef"
        border
        align="left"
        row-key="id"
        table-layout="auto"
        :size="'small'"
        :data="dataList"
        :columns="columns"
        :pagination="pagination"
        :paginationSmall="true"
        max-height="560px"
        :header-cell-style="{ background: '#fafafa', color: '#606266' }"
        @selection-change="selectedChange"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
        <template #platform_type="scope">
          <el-tag>{{
            useTypeOptions.find(
              ({ value }) => value === scope.row.platform_type
            )?.label || "--"
          }}</el-tag>
        </template>
      </PureTable>
    </div>

    <el-button
      absolute
      bottom-0px
      right="20px"
      type="primary"
      @click="handleConfirm"
      size="small"
      >保存</el-button
    >
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-pagination) {
  justify-content: flex-start !important;
}

.search {
  padding: 0px !important;
}
</style>
