<template>
    <div class="addTerminalDialog">
        <el-dialog center width="636px" title="添加车载终端" :visible.sync="addTerminalData.dialogVisible">
            <el-form label-width="110px" ref="ruleForm" :rules="rules" :model="addTerminalForm">
                <el-form-item label="车载终端编码" prop="terminalCode">
                    <el-input placeholder="请输入车载终端编码" v-model="addTerminalForm.terminalCode"></el-input>
                </el-form-item>
                <el-form-item label="车载终端名称" prop="terminalName">
                    <el-input placeholder="请输入车载终端名称" v-model="addTerminalForm.terminalName"></el-input>
                </el-form-item>
                <!-- <el-form-item label="状态" prop="status">
                    <el-radio v-model="addTerminalForm.status" label="1">在线</el-radio>
                    <el-radio v-model="addTerminalForm.status" label="2">离线</el-radio>
                </el-form-item> -->
                <!-- <el-form-item label="终端经度" prop="terminalLongitude">
                    <el-input type="number" max="90" placeholder="请输入终端经度" v-model="addTerminalForm.terminalLongitude"></el-input>
                </el-form-item>
                <el-form-item label="终端纬度" prop="terminalLatitude">
                    <el-input type="number" max="180" placeholder="请输入终端纬度" v-model="addTerminalForm.terminalLatitude"></el-input>
                </el-form-item> -->
                <el-form-item label="备注">
                    <el-input v-model="addTerminalForm.remark" type="textarea" autocomplete="off" placeholder="请输入备注" maxlength="200"
                        show-word-limit />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="search" @click="addTerminal">保 存</div>
                <div class="reset" @click="reset">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        addTerminalData: {
            type: Object,
            default: {}
        }
    },
    watch:{
        'addTerminalForm.terminalLongitude': function (newval, oldval) {
			   var reg = /^(\d{0,3})(\.(\d{0,13}))?$/g;
				if (!reg.test(newval)) {
					if (newval == undefined || newval == null ) {
						this.addTerminalForm.terminalLongitude = '';
						return;
					}
					this.addTerminalForm.terminalLongitude = oldval
				} else {
					this.addTerminalForm.terminalLongitude = newval.replace(/^\./g, "")
				}				
			},
            'addTerminalForm.terminalLatitude': function (newval, oldval) {
			   var reg = /^(\d{0,3})(\.(\d{0,13}))?$/g;
				if (!reg.test(newval)) {
					if (newval == undefined || newval == null ) {
						this.addTerminalForm.terminalLatitude = '';
						return;
					}
					this.addTerminalForm.terminalLatitude = oldval
				} else {
					this.addTerminalForm.terminalLatitude = newval.replace(/^\./g, "")
				}				
			}
    },
    data() {
        return {
            addTerminalForm: {
                terminalCode: '',
                terminalName: '',
                // status: '1',
                terminalLongitude: '',
                terminalLatitude: '',
                remark:''
            },
            rules: {
                terminalCode: [{ required: true, message: '请输入车载终端编码', trigger: 'blur' },],
                terminalName: [{ required: true, message: '请输入车载终端名称', trigger: 'blur' }],
                status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
                terminalLongitude: [{ required: true, message: '请输入终端经度', trigger: 'blur' }],
                terminalLatitude: [{ required: true, message: '请输入终端纬度', trigger: 'blur' }],
            }
        }
    },
    methods: {
        addTerminal() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$emit("addTerminal", this.addTerminalForm)
                }
            })
        },
        reset() {
            this.addTerminalForm = {
                terminalCode: '',
                terminalName: '',
                status: '',
                terminalLongitude: '',
                terminalLatitude: ''
            }
            this.addTerminalData.dialogVisible = false
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 20px 95px !important;
}
::v-deep .el-textarea .el-input__count {
  bottom: -40px;
}
</style>