<template>
	<a-drawer :width="500" title="搜索" placement="right" :open="openSearchModel" @close="onClose">
	    <template #extra>
	      <a-button style="margin-right: 8px" @click="clearSearch">清空搜索</a-button>
	      <a-button type="primary" @click="getData">搜索</a-button>
	    </template>
	    <a-form :model="commomParams.search">
	    	<a-row :gutter="[10]">
	    		<a-col span="24">
	    			<a-form-item>
	    				<a-input addon-before="企业名称" v-model:value="commomParams.search.keyword" placeholder="请输入企业名称" @keyup.enter="getData"/>
	    			</a-form-item>
	    		</a-col>
	    		<a-col span="24">
	    			<a-form-item>
	    				<a-input addon-before="登录名称" v-model:value="commomParams.search.login_name" placeholder="请输入登录名称" @keyup.enter="getData"/>
	    			</a-form-item>
	    		</a-col>
	    		<a-col span="24">
	    			<a-form-item>
	    				<a-input addon-before="企业ID" v-model:value="commomParams.search.id" placeholder="请输入企业ID" @keyup.enter="getData"/>
	    			</a-form-item>
	    		</a-col>
	    		<a-col span="24">
	    			<a-form-item>
						<a-select v-model:value="commomParams.search.member_type" placeholder="请选择会员类型" @change="memberTypeChange">
							<a-select-option :value="0">全部</a-select-option>
							<a-select-option :value="1">试用申请中</a-select-option>
							<a-select-option :value="2">试用正式</a-select-option>
							<a-select-option :value="3">普通申请中</a-select-option>
							<a-select-option :value="4">普通正式</a-select-option>
							<a-select-option :value="5">VIP申请中</a-select-option>
							<a-select-option :value="6">VIP正式</a-select-option>
						</a-select>
	    			</a-form-item>
	    		</a-col>
	    		<a-col span="24">
	    			<a-form-item>
						<a-select v-model:value="commomParams.search.member_status" placeholder="请选择会员状态" @change="memberStatusChange">
							<a-select-option :value="0">全部</a-select-option>
							<a-select-option :value="1">待审</a-select-option>
							<a-select-option :value="2">正常</a-select-option>
							<a-select-option :value="3">到期</a-select-option>
							<a-select-option :value="4">推荐</a-select-option>
						</a-select>
	    			</a-form-item>
	    		</a-col>
	    		<a-col span="24">
	    			<a-form-item>
						<a-select v-model:value="commomParams.search.status" placeholder="请选择开通状态" @change="statusChange">
							<a-select-option :value="0">全部</a-select-option>
							<a-select-option :value="1">开启</a-select-option>
							<a-select-option :value="2">关闭</a-select-option>
						</a-select>
	    			</a-form-item>
	    		</a-col>
	    	</a-row>
	    </a-form>
	  </a-drawer>
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch, computed } from 'vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, openSearchModel, hideSearch } = useCommon();
	let props = defineProps(['search_params']);
	const emit = defineEmits();
	
	openSearchModel = computed(() => {
		return store.state.openSearchModel;
	})

	interface listType {
		login_name ?: String
		id : Number | 0,
		member_type ?: String
		member_status : Number | 0,
		status : Number | 0,
	}

	commomParams.value.search = commomParams.value.search as listType;
	commomParams.value.search.login_name = '';
	commomParams.value.search.id = 0;
	commomParams.value.search.member_type = null;
	commomParams.value.search.member_status = null;
	commomParams.value.search.status = null;

	// watch(() => props.search_params, (newVal) => {
	// 	emit('searchData', commomParams.value.search)
	// })

	const getData = () => {
		emit('searchData', commomParams.value.search);
		hideSearch()
	}

	// 清空搜索
	const clearSearch = () => {
		commomParams.value.search = {
			page: 1,
			pagesize: 10,
			sort: 'id',
			sortby: 'desc',
			keyword: ''
		}
		emit('clearData', commomParams.value.search);
		hideSearch()
	}
	
	const onClose = () => {
		clearSearch()
		hideSearch()
	}
	
	const memberTypeChange = (val) => {
		getData()
	}
	
	const memberStatus = (val) => {
		getData()
	}
	
	const statusChange = (val) => {
		getData()
	}
	
</script>

<style>
</style>