<template>
  <div class="searchBox">
    <el-form :model="listQuery">
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          style="width: 100%"
          v-model="listQuery.startTime"
          type="datetime"
          placeholder="请选择日期时间"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          style="width: 100%"
          v-model="listQuery.endTime"
          type="datetime"
          placeholder="请选择日期时间"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="ssbmid" v-if="props.type == '01'" label="所属辖区">
        <MOSTY.Department
          placeholder="请选择所属辖区"
          width="100%"
          clearable
          filterable
          v-model="listQuery.ssbmid"
        />
      </el-form-item>
      <el-form-item prop="zdjqtjlx" v-if="props.type == '01'" label="警情类型">
        <el-select v-model="listQuery.zdjqtjlx">
          <el-option
            v-for="(dict, index) in D_BZ_ZDJQTJLX"
            :key="index"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="yjlx" v-if="props.type == '02'" label="预警类型">
        <el-select clearable style="width: 100%" v-model="listQuery.yjLx">
          <el-option
            v-for="(dict, index) in D_BZ_YJLX"
            :key="index"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="yjdj" v-if="props.type == '02'" label="预警等级">
        <el-select v-model="listQuery.yjJb">
          <el-option
            v-for="(dict, index) in D_BZ_tyjb"
            :key="index"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="zlczzt" v-if="props.type == '03'" label="处置状态">
        <el-select v-model="listQuery.zlczzt">
          <el-option
            v-for="(dict, index) in D_BZ_CZZT"
            :key="index"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="footer">
        <el-button @click="handleFilter">筛选</el-button>
        <el-button @click="reset()"> 重置 </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, defineProps, defineEmits, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
const props = defineProps({
  type: String,
  searchForm: Object
});
const emit = defineEmits(["handelSearch", "resetSearch"]);
const { proxy } = getCurrentInstance();
const { D_BZ_tyjb, D_BZ_CZZT, D_BZ_ZDJQTJLX,D_BZ_YJLX } = proxy.$dict(
  "D_BZ_tyjb",
  "D_BZ_CZZT",
  "D_BZ_ZDJQTJLX",
  "D_BZ_YJLX"
);
const listQuery = ref({});

watch(
  () => props.searchForm,
  (val) => {
    listQuery.value = val;
  },
  { immediate: true }
);
// 筛选
function handleFilter() {
  let params = {
    ...listQuery.value,
    lx: props.type
  };
  emit("handelSearch", params);
}
//  重置
function reset() {
  listQuery.value = {};
  emit("resetSearch", props.type);
}
</script>

<style lang="scss" scoped>
.searchBox {
  //   width: 340px;
  background: #000;
  padding: 10px 8px;
  box-sizing: border-box;
  .el-form {
    width: 100%;
    height: 100%;
    .footer {
      text-align: center;
    }
  }
}
</style>