<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="900" destroy-on-close @closed="$emit('closed')" >
		<sc-filter-table v-model="value" :apiObj="apiObj" :table-width="860" multiple :params="params" :props="props" @change="change">
            <template #header="{form, submit}">
                <el-form :inline="true" :model="form">
                    <el-form-item>
                       <el-input v-model="form.keyword" clearable :placeholder="$t('response.searchPlaceholder')">
                            <template #prepend>
                                <el-select v-model="form.queryType" style="width: 100px;">
									<el-option v-for="item in devideUserQueryOptions" :key="item.key" :label="$t('device.userQueryOptions'+item.key)" :value="item.key" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">{{$t('dialogBox.searchButtonText')}}</el-button>
                    </el-form-item>
                </el-form>
				<!-- <sc-title title="结果"></sc-title> -->
            </template>
            <el-table-column prop="UserName" :label="$t('user.userName')" width="150"></el-table-column>
            <el-table-column prop="FullName" :label="$t('user.fullName')" width="150"></el-table-column>
            <el-table-column prop="Phone" :label="$t('user.phone')" width="130"></el-table-column>
            <el-table-column prop="Email" :label="$t('user.email')" width="150"></el-table-column>
			<el-table-column prop="HospitalName" :label="$t('user.hospitalName')"></el-table-column>
        </sc-filter-table>
		<template #footer>
			<el-button @click="visible=false" >{{$t("dialogBox.cancelButtonText")}}</el-button>
			<el-button v-if="mode=='add'" type="primary" :loading="isSaveing" @click="save()">{{this.$t("dialogBox.saveButtonText")}}</el-button>
			<el-button v-if="mode=='remove'" type="primary" :loading="isSaveing" @click="save()">{{this.$t("dialogBox.removeTitle")}}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: this.$t("dialogBox.shareTitle") + this.$t("device.Title"),
					remove: this.$t("dialogBox.removeTitle") + this.$t("device.cancelShareDevice")
				},
				visible: false,
				isSaveing: false,
				apiObj: this.$API.device.deviceUserList,
				//表单数据
				form: {
                    queryType: '',
					keyword: '',
				},
				params:{
					deviceCodes:[],
					type:0
				},
				submitForm: {
					deviceCodes:[],
					userCodeList:[]
				},
				devideUserQueryOptions: [
					{ key: '0', display_name: '' },
					{ key: '1', display_name: '' },
					{ key: '2', display_name: '' },
					{ key: '3', display_name: '' },
					{ key: '4', display_name: '' },
					{ key: '5', display_name: '' },
					{ key: '6', display_name: '' }
				],				
				props: {
					//这个用来标注一条数据的唯一标识
					keyword: "UserCode"
				}
			}
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				if (this.mode == "remove")
				{
					this.params.type = 1
				}
				else
				{
					this.params.type = 0
				}
				this.visible = true;
				return this
			},
			//表单提交方法
			save(){
				var res = false;
				var curTitle = "";
				if (this.mode === "add")
				{
					curTitle = this.$t('dialogBox.confirmWarningText')+this.$t('device.confirmShareDevice')
				}
				else
				{
					curTitle = this.$t('dialogBox.confirmWarningText')+this.$t('device.confirmCancelShareDevice')
				}
				this.$confirm(curTitle, this.$t('dialogBox.confirmWarningTitle'), {
					type: 'warning',
					confirmButtonText: this.$t('dialogBox.confirmButtonText'),
					cancelButtonText: this.$t('dialogBox.cancelButtonText'),
					confirmButtonClass: 'el-button--danger'
				}).then(async () => {
					this.isSaveing = true;
					//新增或者修改
					if (this.mode === "add")
					{
						res = await this.$API.device.shareDevice.post(this.submitForm);
					}
					else
					{
						res = await this.$API.device.removeShareDevice.post(this.submitForm);
					}
					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'})
					}
				}).catch(() => {
					console.log("share method exception")
				})
			},
			//表单注入数据
			setData(data){
				if (data && data.length > 0)
				{
					this.params.deviceCodes = data;
					this.submitForm.deviceCodes = data;
				}
				else
				{
					this.params.deviceCodes = [];
					this.submitForm.deviceCodes = [];
				}
			},
			//组件选中值变化
			change(val){
				if (val && val.length > 0)
				{
					var userCodes = val.map(c => {
						return c.UserCode;
					});		
					this.submitForm.userCodeList = userCodes;
				}
			}
		}
	}
</script>

<style>
.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
	border-bottom: 2px solid rgba(0,0,0,.06);
 }
.el-dialog__body {
    padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
    color: var(--el-text-color-regular);
    font-size: var(--el-dialog-content-font-size);
    word-break: break-all;
    padding-top: 10px;
    padding-bottom: 10px;
}
.el-dialog__footer {
    padding: var(--el-dialog-padding-primary);
    padding-top: 10px;
    text-align: right;
    box-sizing: border-box;
    border-top: 2px solid rgba(0,0,0,.06);
}
.el-form-item__label {
    font-weight: bold;
    line-height: 32px;
}
</style>
