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

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import BasicSearch from '@/components/BasicSearch/index.vue';

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

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

const props = defineProps<{
  exportLoading?: boolean;
}>();

const initSearchData = {
  basin: null,
  approvalFileNo: null,
  ecologicalFlow: null,
  fishPassageMeasures: null,
  envMonitoringRequire: null,
  bldsttCcode: null
};

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

const searchList: any = computed(() => [
  {
    type: 'waterStation',
    name: 'rvcd',
    label: '流域',
    placeholder: '请输入流域名称',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Input',
    name: 'approvalFileNo',
    label: '批复文号',
    width: 140,
    placeholder: '请输入批复文号',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Input',
    name: 'ecologicalFlow',
    label: '生态流量',
    width: 140,
    placeholder: '请输入生态流量',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Input',
    name: 'fishPassageMeasures',
    label: '过鱼措施',
    width: 140,
    placeholder: '请输入过鱼措施',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Input',
    name: 'envMonitoringRequire',
    label: '环境监测要求',
    width: 170,
    placeholder: '请输入环境监测要求',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Select',
    name: 'bldsttCcode',
    label: '建设状态',
    width: 140,
    fieldProps: {},
    options: [
      { label: '全部', value: '' },
      { label: '未建', value: '0' },
      { label: '在建', value: '1' },
      { label: '已建', value: '2' }
    ]
  }
]);

const onSearchFinish = (values: any) => {
  emit('search-finish', values);
};
const exportBtn = () => {
  emit('export-btn');
};

const onValuesChange = (changedValues: any, allValues: any) => {
  searchData.value = { ...searchData.value, ...allValues };
};

const handleReset = () => {
  emit('reset', initSearchData);
};

defineExpose({
  btnLoading,
  searchData
});

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

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