<template>
  <div class="station-management-search">
    <BasicSearch
      ref="basicSearchRef"
      :searchList="searchList"
      :initial-values="initSearchData"
      @reset="handleReset"
      @finish="onSearchFinish"
      @values-change="onValuesChange"
    >
      <template #actions>
        <a-tooltip title="新增电站">
          <a-button @click="props.handleAdd" type="primary">
            新增电站
          </a-button>
        </a-tooltip>
      </template>
    </BasicSearch>
  </div>
</template>

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

interface Props {
  handleAdd: () => void;
}

const props = defineProps<Props>();

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

const initSearchData = {
  stationName: ''
};

const searchData = ref<any>({ ...initSearchData });
const searchList: any = computed(() => [
  {
    type: 'Input',
    name: 'stationName',
    label: '电站名称',
    fieldProps: {
      allowClear: true
    }
  }
]);

const onSearchFinish = (values: any) => {
  emit('searchFinish', values);
};

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

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

onMounted(() => {
  emit('searchFinish', initSearchData);
});
</script>
<style lang="scss"></style>
