<script setup lang="ts">
import { ref, unref } from "vue";
import { ElMessage } from "element-plus";
import { useAppStoreHook } from "/@/store/modules/app";
import { QUERY_MAP, generatorQuerySet } from "./../config/query";

const emit = defineEmits(["confirm-btn-click"]);

const { searchParams } = useAppStoreHook();

const visible = ref(false);
const data = ref<Record<string, string>>(
  searchParams.basic ? { ...searchParams.basic } : { ...generatorQuerySet() }
);

//重置查询条件
const handleClear = () => (data.value = { ...generatorQuerySet() });

//传递查询条件
function handleConfirm() {
  const keys = Object.keys(data.value);
  const values = keys.map(
    key => data.value[key] && key !== "page" && key !== "size"
  );

  console.log(data.value);
  const len = values.filter(v => v).length;
  if (len > 1) return ElMessage.warning("只能同时搜索一条编码");
  emit("confirm-btn-click", unref(data));
  visible.value = false;
}

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

<template>
  <el-dialog
    v-model="visible"
    title="筛选条件汇总"
    center
    width="1100px"
    :close-on-click-modal="false"
  >
    <div class="flex flex-wrap justify-between gap-3">
      <div v-for="key in Object.keys(QUERY_MAP)" :key="key">
        <el-input v-model="data[key]" :placeholder="QUERY_MAP[key].query">
          <template #prepend>
            <div w-100px>{{ QUERY_MAP[key].query }}</div>
          </template>
        </el-input>
      </div>
    </div>

    <div mt-5 flex justify-end w-full>
      <el-button @click="handleClear">清空</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>
