<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
			<el-form-item :label="$t('device.deviceTypeCode')" prop="deviceTypeCode">
				<el-input v-model="form.deviceTypeCode" :disabled="mode!='add'" clearable style="width: 100%;"></el-input>
			</el-form-item>
			<el-form-item :label="$t('device.deviceTypeName')" prop="deviceTypeName">
				<el-input v-model="form.deviceTypeName" clearable style="width:85%;"></el-input>
                <el-button style="margin-left: 10px;" type="primary" icon="el-icon-plus" circle @click="addModel"></el-button>
			</el-form-item>
            <el-form-item
                v-for="(deviceModel, index) in form.deviceModels"
                :key="deviceModel.key"
                :label="$t('device.deviceModel') + (index+1)"
                :prop="'deviceModels.' + index + '.value'"
                :rules="{required: true, message: $t('device.deviceTypeNotNull'), trigger: 'blur'}">
                <el-input v-model="deviceModel.value" style="width: 85%;" />
                <el-button style="margin-left: 10px;" type="danger" icon="el-icon-delete" circle @click.prevent="removeModel(deviceModel)"></el-button>
            </el-form-item>
		</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: {
                    deviceTypeCode: '',
                    deviceTypeName: '',
					deviceModels: []
				},
				//验证规则
				rules: {
					deviceTypeName: [
						{required: true, message: this.$t("device.requiredDeviceTypeName"), trigger: 'blur'}
					],
					deviceTypeCode: [
						{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(async (valid) => {
					if (valid) {
						this.isSaveing = true;
                        var res = false;
                        //新增或者修改
                        if (this.mode === "add")
                        {
						    res = await this.$API.device.addDeviceType.post(this.form);
                        }
                        else
                        {
                            res = await this.$API.device.modifyDeviceType.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)
				{
					this.form.deviceTypeCode = data.DictionaryCode;
					this.form.deviceTypeName = data.Value;
					if (data.DictionaryList && data.DictionaryList.length > 0)
					{
						var dictionaryList = data.DictionaryList;
						for (var i = 0; i < dictionaryList.length; i++) {
							this.form.deviceModels.push({
								value: dictionaryList[i].Value,
								key: dictionaryList[i].DictionaryCode
							})
						}
					}
				}
			},
            //新增型号
            addModel() {
                this.form.deviceModels.push({
                    value: '',
                    key: Date.now().toString()
                })
            },
            //移除型号，包括编辑状态移除型号
            async removeModel(item) {
                this.isSaveing = true;
                //查询
                var res = await this.$API.device.queryDeviceModelBindNum.post(item.key);
                this.isSaveing = false;
                if (res > 0) {
                    this.$alert(this.$t('device.deviceModel1') + res + this.$t('device.deviceModel2'), {
                        confirmButtonText: this.$t('dialogBox.confirm'),
                        callback: () => {
                            this.$message({
                                type: 'info',
                                message: this.$t('dialogBox.cancelButtonText')
                            })
                        }
                    })
                } else {
                    var index = this.form.deviceModels.indexOf(item)
                    if (index !== -1) {
                        this.form.deviceModels.splice(index, 1)
                    }
                }
            },
		}
	}
</script>

<style>
</style>
