<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="700" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
			<el-row :gutter="15">
				<el-col :span="24">
					<el-form-item :label="$t('device.deviceRegId')" prop="deviceCode">
						<el-input v-model="form.deviceCode" disabled clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item :label="$t('device.deviceCode')" prop="shortCode">
						<el-input v-model="form.shortCode" disabled clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('device.deviceName')" prop="deviceName">
						<el-input v-model="form.deviceName" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<el-form-item :label="$t('device.searchHosptial')" prop="organizationCode">
                        <sc-select v-model="form.organizationCode" :apiObj="$API.organization.organizationSelectList" clearable filterable style="width:100%" @change="deviceOrganizationChange(form.organizationCode)"></sc-select>
                    </el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item :label="$t('device.departmentColumnTitle')" prop="departmentCode">
                        <sc-select v-model="form.departmentCode" ref="departmentSCSelect" :params="departmentParam" style="width:100%" :apiObj="$API.organization.departmentSelectList" clearable filterable></sc-select>
                    </el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('device.deviceType')" prop="deviceType">
                        <sc-select v-model="form.deviceType" :apiObj="$API.organization.organizationSelectList" style="width:100%" disabled clearable filterable></sc-select>
                    </el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item :label="$t('device.deviceBelongUser')" prop="director">
						<el-input v-model="form.director" disabled clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('device.deviceModel')" prop="deviceModel">
						<el-input v-model="form.deviceModel" disabled clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<el-form-item :label="$t('response.description')" prop="description">
						<el-input type="textarea" v-model="form.description" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >{{$t("dialogBox.cancelButtonText")}}</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">{{this.$t("dialogBox.saveButtonText")}}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: this.$t("dialogBox.addTitle"),
					edit: this.$t("dialogBox.modifyTitle")
				},
				visible: false,
				isSaveing: false,
				//表单数据
				form: {
					deviceCode: '',
					shortCode: '',
					deviceName: '',
					director: '',
					deviceType: '',
					deviceModel: '',
					description: '',
					organizationCode: '',
					departmentCode: ''
				},
				curDepartmentCode:"",
				departmentParam:{
					organizationCode: ""
				},
				//验证规则
				rules: {
					deviceCode: [
						{required: true, message: this.$t("device.requiredDeviceTypeName"), trigger: 'blur'}
					],
					shortCode: [
						{required: true, message: this.$t("device.requiredDeviceTypeCode"), trigger: 'blur'}
					],
					deviceName: [
						{required: true, message: this.$t("device.requiredDeviceTypeCode"), trigger: 'blur'}
					],
					deviceType: [
						{required: true, message: this.$t("device.requiredDeviceTypeCode"), trigger: 'blur'}
					],
					deviceModel: [
						{required: true, message: this.$t("device.requiredDeviceTypeCode"), trigger: 'blur'}
					],
					organizationCode: [
						{required: true, message: this.$t("device.requiredDeviceTypeCode"), trigger: 'blur'}
					]
				}
			}
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate((valid) => {
					if (valid) {
						if (this.form.departmentCode !== this.curDepartmentCode)
          				{
							this.$confirm((this.$t('device.removeDeviceBindUsers')),this.$t('dialogBox.confirmWarningTitle'), {
								type: 'warning',
								confirmButtonText: this.$t('dialogBox.confirmButtonText'),
								cancelButtonText: this.$t('dialogBox.cancelButtonText'),
								confirmButtonClass: 'el-button--danger'
							}).then(() => {
								this.saveDeviceInfo();
							}).catch(() => {
								console.log("Save Device Info Error");
							})
						}
						else
						{
							this.saveDeviceInfo();
						}
					}
				})
			},
			//保存数据方法
			async saveDeviceInfo(){
				this.isSaveing = true;
				var res = false;
				//目前只有修改
				res = await this.$API.device.modifyDevice.post(this.form);
				this.isSaveing = false;
				if(res){
					this.$emit('success');
					this.visible = false;
					this.$message.success(this.$t("response.operateSuccess"))
				}else{
					this.$alert(res.message, this.$t("dialogBox.confirmWarningTitle"), {type: 'error'})
				}
			},
			//表单注入数据
			setData(data){
				if (data)
				{
					var departCode = ""
					if (data.DepartmentCode != null && data.DepartmentCode != undefined)
					{
						departCode = data.DepartmentCode;
					}
					this.form.deviceCode = data.DeviceCode;
					this.form.shortCode = data.ShortCode;
					this.form.deviceName = data.Name;
					this.form.director = data.DirectorName;
					this.form.deviceType = data.DeviceType;
					this.form.deviceModel = data.DeviceModel;
					this.form.description = data.Description;
					this.form.organizationCode = data.OrganizationCode;
					this.form.departmentCode = departCode;
					this.curDepartmentCode = departCode;
				}
			},
			//医院/机构下拉菜单改变事件
			async deviceOrganizationChange(organizationCode){
				this.form.departmentCode = ''
				if (organizationCode === '' || organizationCode === undefined) {
					this.$refs.departmentSCSelect.clear();
					this.form.director = ''
				} else {
					//重新绑定下级科室
					this.departmentParam.organizationCode = organizationCode;
					this.$refs.departmentSCSelect.upData(this.departmentParam);
					var res = await this.$API.organization.getOrganizationDirectors.post(organizationCode);
					if (res && res.length > 0)
					{
						this.form.director = res;
					}
					else
					{
						this.form.director = "";
					}
				}
			}
			
		}
	}
</script>

<style>
</style>
