<template>
  <div class="approval-detail-search">
    <BasicSearch
      ref="basicSearchRef"
      :searchList="searchList"
      :initial-values="initSearchData"
      :zhujianfujian="'fu'"
      @reset="handleReset"
      @finish="onSearchFinish"
      @values-change="onValuesChange"
    >
    </BasicSearch>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from "vue";
import dayjs from "dayjs";
import BasicSearch from "@/components/BasicSearch/index.vue";
import { DateSetting } from "@/utils/enumeration";
import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";

interface Props {
  direction: any[];
  guoyuStatus: any[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: "reset", values: any): void;
  (e: "search-finish", values: any): void;
}>();

const shuJuTianBaoStore = useShuJuTianBaoStore();
const localTypeDate = ref<string>(null);
const basicSearchRef = ref<any>();

const initSearchData = {
  rvcd: "rvcd",
  stcd: null,
  rstcd: null,
  strdt: [
    dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
    dayjs().endOf("day").format("YYYY-MM-DD"),
  ],
};

const searchData = ref<any>({ ...initSearchData });

const searchList: any = computed(() => [
  {
    type: "waterStation",
    name: "rvcd",
    label: "流域",
    fieldProps: {
      allowClear: true,
    },
    options: [],
  },
  {
    span: 12,
    type: "RangePicker",
    name: "strdt",
    label: "过鱼时间",
    picker: "date",
    fieldProps: {
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
      allowClear: false,
    },
    presets: DateSetting.RangeButton.month,
  },
]);

const onSearchFinish = (values: any) => {
  emit("search-finish", values);
};

const onValuesChange = (changedValues: any, allValues: any) => {
  searchData.value = { ...searchData.value, ...allValues };
  if (
    Object.keys(changedValues)[0] == "rstcd" ||
    Object.keys(changedValues)[0] == "rvcd"
  ) {
    const formInstance = basicSearchRef.value?.formData;
    formInstance.stcd = null;
  }
};

const handleReset = () => {
  localTypeDate.value = null;
  emit("reset", initSearchData);
};

onMounted(() => {
  emit("search-finish", initSearchData);
  shuJuTianBaoStore.getFpssOption("", "");
});
</script>

<style lang="scss"></style>
