<script setup lang="ts">
import { shallowRef, shallowReactive } from "vue";
import SearchCheck from "./search-check.vue";
import SeaechBatch from "./search-batch.vue";

enum SearchMode {
  check,
  batch
}

const showModel = shallowRef(false);
const currentSearchMode = shallowRef(SearchMode.check);
const emit = defineEmits(["reload", "save-btn-click"]);

const payload = shallowReactive({
  companyNo: "",
  platform_type: ""
});

async function show(_companyNo, _platform_type) {
  showModel.value = true;
  payload.companyNo = _companyNo;
  payload.platform_type = _platform_type;
}

function handleConfirm(selected) {
  emit("save-btn-click", selected);
  showModel.value = false;
}

defineExpose({
  show
});
</script>

<template>
  <el-dialog
    top="5vh"
    center
    v-model="showModel"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
    title="添加销售订单"
    :width="'1040px'"
  >
    <el-switch
      v-model="currentSearchMode"
      active-text="批量查找"
      inactive-text="勾选查找"
      :active-value="SearchMode.batch"
      :inactive-value="SearchMode.check"
    />

    <template v-if="currentSearchMode === SearchMode.check">
      <SearchCheck :payload="payload" @confirm="handleConfirm" />
    </template>

    <template v-else>
      <SeaechBatch :payload="payload" @confirm="handleConfirm" />
    </template>
  </el-dialog>
</template>

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

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