// 模板设计 搜索
<template>
	<a-card>
		<a-row>
			<!-- 流程名称 -->
			<a-col :span="6" class="search-item">
				<label> {{ getI18n('system', 'SYSTEM_Process_Name') }}</label>
				<a-input
					autoComplete="off"
					style="width: 100%"
					v-model:value="processParams.name"
					:maxLength="50"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n('system', 'SYSTEM_Process_Name'),
						])
					"
				/>
			</a-col>
			<a-col span="8">
				<div class="button-wrapper">
					<!-- 查询按钮 -->
					<a-button
						type="primary"
						class="button-item"
						@click="onSearchClick"
						:loading="searchLoading"
					>
						<search-outlined />
						{{ getI18n('common', 'Common_Search') }}
					</a-button>
					<!-- 重置按钮 -->
					<a-button
						@click="onResetClick"
						class="button-item"
						:loading="searchLoading"
					>
						<reload-outlined />
						{{ getI18n('common', 'Common_Clear') }}
					</a-button>
				</div>
			</a-col>
		</a-row>
	</a-card>
</template>
<script lang="ts">
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { defineComponent, reactive } from 'vue'
import { getI18n } from '@/utils/i18n'
import { GetProcessListParamsModel } from '@/api/process-management/model'

export default defineComponent({
	components: {
		ReloadOutlined,
		SearchOutlined,
	},
	props: {
		// 查询重置按钮loading
		searchLoading: {
			type: Boolean,
			default: false,
		},
	},
	emits: ['handle-search', 'handle-reset'],
	setup(_props, context) {
		// 列表参数
		const processParams = reactive<GetProcessListParamsModel>({
			current: 1,
			size: 10,
			name: undefined,
		})

		// 查询按钮点击事件
		const onSearchClick = () => {
			// 参数
			let params: GetProcessListParamsModel = {}
			processParams.name && (params.name = processParams.name)
			context.emit('handle-search', params)
		}

		// 重置按钮点击事件
		const onResetClick = () => {
			processParams.name = undefined

			let params: GetProcessListParamsModel = {}
			context.emit('handle-reset', params)
		}

		return {
			processParams, // 查询参数
			getI18n, // 国际化
			onSearchClick, // 查询按钮
			onResetClick, // 重置按钮点击事件
		}
	},
})
</script>