<template>
	<el-drawer :title="titleMap" v-model="visible" :size="450" destroy-on-close @closed="$emit('closed')" style="border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    color: #3c4a54;">
		<el-container >
			<el-main style="padding:0 20px 20px 20px">
				<el-form ref="dialogForm" :model="form" label-width="100px" label-position="left">
                    <el-form-item :label="$t('device.searchHosptial')" prop="hospitals">
                        <sc-select v-model="form.hospitals" :apiObj="$API.organization.organizationSelectList" clearable filterable style="width: 100%;"></sc-select>
                    </el-form-item>
                    <el-form-item :label="$t('device.searchAdmin')" prop="adminName">
                        <el-input v-model="form.adminName" :placeholder="$t('device.searchAdminPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('device.searchUser')" prop="userName">
                        <el-input v-model="form.userName" :placeholder="$t('device.searchUserPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('response.keywordLabel')" prop="keyword">
                       <el-input v-model="form.keyword" clearable :placeholder="$t('response.searchPlaceholder')">
                            <template #prepend>
                                <el-select v-model="form.searchType" style="width: 100px;">
                                    <el-option :label="$t('device.deviceID')" value="0"></el-option>
                                    <el-option :label="$t('device.deviceType')" value="1"></el-option>
                                    <el-option :label="$t('device.deviceName')" value="2"></el-option>
                                    <el-option :label="$t('device.deviceModel')" value="3"></el-option>
                                    <el-option :label="$t('device.deviceCode')" value="4"></el-option>
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" @click="submit">{{$t('dialogBox.searchButtonText')}}</el-button>
				<el-button @click="clearSearch">{{$t('dialogBox.clearButtonText')}}</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				titleMap: this.$t('dialogBox.searchButtonText'),
				form: {
                    searchType: '',
                    keyword: '',
                    hospitals: '',
                    userName: '',
                    adminName: ''
                },
				visible: false,
			}
		},
        // watch:{
		// 	searchType(val){
		// 		if(val === 'deviceType'){
		// 			this.search.deviceType = this.keyword
		// 		}else if(val === 'deviceModel'){
		// 			this.search.deviceModel = this.keyword
		// 		}
		// 	},
		// 	keyword(val){
		// 		if (this.searchType === "deviceType"){
		// 			this.search.deviceType = val
		// 		}
		// 		else if(this.searchType === 'deviceModel'){
		// 			this.search.deviceModel = val
		// 		}
		// 	}
		// },
		methods: {
		    //显示
			open(){
				this.visible = true;
				return this;
			},
			//表单提交方法
			submit(){
                this.$emit('success', this.form)
                this.visible = false;
			},
			//表单注入数据
			setData(data){
				Object.assign(this.form, data)
			},
			//清空搜索
			clearSearch(){
				this.form.searchType = ''
				this.form.keyword = ''
				this.form.hospitals = ''
				this.form.userName = ''
				this.form.adminName = ''
			}
		}
	}
</script>
