<script setup lang="ts">
import { FormRules, ElForm } from "element-plus";
import { reactive, ref } from "vue";
import { httpOrderList } from "/@/api/InvoiceSales/invoiceApply";
import { responseHandle } from "/@/utils/responseHandle";
import { useNav } from "/@/layout/hooks/nav";
import { useColumns } from "./columns";
import { TableProBar } from "/@/components/ReTable";
import { type PaginationProps } from "@pureadmin/table";
import { ElMessage } from "element-plus";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { type FormInstance } from "element-plus";
import { send_status_list } from "/@/utils/status";
import { httpList as httpBuyList } from "/@/api/parameter/invoiceheader";
import RemoteSelect from "/@/components/RemoteSelect";
const formRef = ref<FormInstance>();
const { columns } = useColumns();
const { logout } = useNav();
const showModel = ref(false);
// const formRef = ref<InstanceType<typeof ElForm>>(null);
// const currentNode = ref<IMenuTree | null>(null);
const loading = ref(false);
const dataList = ref([]);
const tableRef = ref();
const handleSelection = ref([]);
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 15,
  currentPage: 1,
  background: true
});
const emit = defineEmits(["reload"]);
const initform = {
  page: 1,
  size: 10,
  start: "",
  end: "",
  total_min: "",
  total_max: "",
  inv_status: "3", //部分开/未开
  pay_status: "",
  sequenceNo: "",
  customerNo: "",
  customer: "",
  platName: "",
  status: "0"
};
const ruleForm = ref({ ...initform });

async function show() {
  showModel.value = true;
  await onSearch();
}

const startDisabledDate = (time: Date) => {
  const { end } = ruleForm;
  if (end ?? "") {
    return time.getTime() > Date.now(end).valueOf();
  }
};
const endDisabledDate = (time: Date) => {
  const { start } = ruleForm;
  if (start ?? "") {
    return time.getTime() < Date.now(start).valueOf();
  }
};

async function handleCurrentChange(val: number) {
  ruleForm.value.page = val;
  await onSearch();
}

async function handleSizeChange(val: number) {
  ruleForm.value.size = val;
  ruleForm.value.page = 1;
  await onSearch();
}
function handleSelectionChange(val) {
  handleSelection.value = val;
}
//列表展示
async function onSearch() {
  loading.value = true;
  const { code, data, message } = await httpOrderList(ruleForm);
  responseHandle({
    code,
    message,
    logout,
    handler: () => {
      const { list, count } = data ?? {};
      dataList.value = list ?? [];
      pagination.total = count ?? 0;
      pagination.pageSize = ruleForm.value.size;
      pagination.currentPage = ruleForm.value.page;
    }
  });
  loading.value = false;
}

function handleSave() {
  if (handleSelection.value.length === 0) {
    ElMessage.warning("至少选择一个销售订单！");
    return;
  }
  // formRef.value.validate(async vaild => {
  //   if (vaild) {
  //     if (loading.value) return;
  // const handler =
  //   TYPE.value ===  handleCreate : handleUpdate;
  // loading.value = true;
  // const { api, data } = handler();
  // const { message, code } = await api(data);
  // responseHandle({
  //   code,
  //   message,
  //   logout,
  //   handler: () => {
  //     showModel.value = false;
  //     loading.value = false;
  //     emit("reload");
  //   }
  // });
  //   }
  // });
}
function menu_type_change() {
  const { menu_type } = ruleForm.value;
}
async function companyNo_change(buy: boolean) {
  const { customerNo } = ruleForm.value;
  console.log(customerNo);
}

defineExpose({
  show
});
</script>

<template>
  <div>
    <el-dialog
      v-model="showModel"
      :close-on-press-escape="false"
      center
      append-to-body
      destroy-on-close
      top="5vh"
      title="添加销售订单"
      :width="'1040px'"
      v-loading="loading"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <RemoteSelect
            v-model:value="ruleForm.customerNo"
            :api="httpBuyList"
            style="width: 100%"
            placeholder="客户公司"
            response-label-prop="invoice_title"
            response-val-prop="checkNo"
            @itemChange="companyNo_change(true)"
          />
        </el-col>
        <el-col :span="10">
          <el-date-picker
            v-model="ruleForm.start"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            @change="asd"
            value-forma="YYYY-MM-DD"
          />
          <!-- <el-date-picker
            v-model="ruleForm.start"
            :disabled-date="startDisabledDate"
            type="date"
            @change="aa"
            format="YYYY-MM-DD"
            value-forma="YYYY-MM-DD"
            style="width: 100%"
            placeholder="申请开始时间"
          />
        </el-col>
        <el-col :span="5">
          <el-date-picker
            v-model="ruleForm.end"
            :disabled-date="endDisabledDate"
            type="date"
            @change="aa"
            format="YYYY-MM-DD"
            value-forma="YYYY-MM-DD"
            style="width: 100%"
            placeholder="申请结束时间"
          /> -->
        </el-col>
        <el-col :span="5">
          <el-date-picker
            v-model="ruleForm.start"
            :disabled-date="startDisabledDate"
            type="date"
            style="width: 100%"
            placeholder="申请开始时间"
          />
        </el-col>
        <el-col :span="5">
          <el-date-picker
            v-model="ruleForm.end"
            :disabled-date="endDisabledDate"
            type="date"
            style="width: 100%"
            placeholder="申请结束时间"
          />
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="ruleForm.platName"
            placeholder="平台名称"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="ruleForm.sequenceNo"
            placeholder="订单编号"
            clearable
        /></el-col>
        <el-col :span="6"> 111 </el-col>
      </el-row>
      <PureTable
        ref="tableRef"
        border
        align="left"
        row-key="id"
        table-layout="auto"
        :size="'small'"
        :data="dataList"
        :columns="columns"
        :pagination="pagination"
        :paginationSmall="true"
        :header-cell-style="{ background: '#fafafa', color: '#606266' }"
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- <TableProBar
        style="margin-top: -10px"
        title="销售订单列表"
        :loading="loading"
        :dataList="dataList"
        @refresh="onSearch"
      >
        <template #buttons>
          <el-button type="primary" @click="handleSave()"> 保存 </el-button>
        </template>
        <template v-slot="{ size }">
       
        </template>
      </TableProBar> -->
    </el-dialog>
  </div>
</template>
