<script setup lang="ts" name="QueryForm">
import { ref, computed, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import PageWrapperSearch from "@/components/Search/PageWrapperSearch.vue";
import timeRangeOptions from "@/constants/timeRangeOptions.js";
import { queryUser } from "@/api/itemLogSet/desensitizationItemLog.js";

const emit = defineEmits(["update:modelValue", "query", "reset"]);
const props = defineProps<{
  modelValue: any;
}>();

const queryForm = computed({
  get() {
    return props.modelValue;
  },
  set(val: any) {
    console.log("query computed", val);
    emit("update:modelValue", val);
  },
});

const userOptions = ref([]);

// 搜索
function onSearch() {
  emit("query");
}

// 重置
function onReset(formRef: FormInstance) {
  emit("reset", formRef);
}

const getQueryUser = async () => {
  const { data } = await queryUser();
  userOptions.value = data.userlist.map((user) => ({
    id: user.id,
    user: user.realname,
  }));
};

onMounted(() => {
  getQueryUser();
});
</script>

<template>
  <page-wrapper-search :model="queryForm" @search="onSearch" @reset="onReset" label-width='100'>
    <el-form-item label="用户" prop="user">
      <el-select v-model="queryForm.user" placeholder="请选择" clearable>
        <el-option v-for="item in userOptions" :key="item.id" :label="item.user" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="时间" prop="range">
      <el-select v-model="queryForm.range" placeholder="请选择时间">
        <el-option v-for="item in timeRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
  </page-wrapper-search>
</template>
