<template>
  <div class="approval-detail-search">
    <BasicSearch
      ref="basicSearchRef"
      :searchList="searchList"
      :initial-values="initSearchData"
      :zhujianfujian="'fu'"
      @reset="handleReset"
      @finish="onSearchFinish"
      @values-change="onValuesChange"
    >
      <template #actions>
        <a-button @click="exportBtn">导出</a-button>
      </template>
    </BasicSearch>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment';

import { ref, computed, onMounted } from 'vue';
import BasicSearch from '@/components/BasicSearch/index.vue';

interface Props {
  exportBtn: () => void;
  fish_ptype: any[];
  familyList: any[];
  ptypeLoading?: boolean;
  familyLoading?: boolean;
}
const props = defineProps<Props>();

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

const localTypeDate = ref<string>(null);
const basicSearchRef = ref<any>();
const btnLoading = ref<boolean>(false);

const initSearchData = {
  rvcd: 'all',
  stcd: null,
  ptype: 'all',
  family: '全部'
};

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

const searchList: any = computed(() => [
  {
    type: 'waterStation',
    name: 'rvcd',
    label: '流域',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Select',
    name: 'ptype',
    label: '保护类别',
    fieldProps: {
      allowClear: false
    },
    loading: props.ptypeLoading,
    options: props.fish_ptype.map((item: any) => ({
      label: item.dictName,
      value: item.itemCode
    }))
  },
  {
    type: 'Select',
    name: 'family',
    label: '科',
    fieldProps: {
      allowClear: false
    },
    loading: props.familyLoading,
    options: props.familyList.map((item: any) => ({
      label: item.key,
      value: item.key
    }))
  },
  {
    type: 'Input',
    name: 'name',
    label: '',
    placeholder: '请输入鱼类名称',
    fieldProps: {},
    options: []
  }
]);

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);
};

defineExpose({
  btnLoading,
  searchData
});
onMounted(() => {
  emit('search-finish', initSearchData);
});
</script>

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