<template>
  <div>
    <div class="heardTitle">
      报警推送配置
    </div>
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="deviceForm"
      label-well-code="right"
      label-width="100px"
    >
      <div class="titleStyle">
        报警推送方式
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="推送方式" prop="devcode">
            <el-input
              v-model.trim="deviceForm.devcode"
              clearable
              size="small"
              :disabled="dialogStatus"
              type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="titleStyle">
        WEB端推送配置
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务地址" prop="devcode">
            <el-input
              v-model.trim="deviceForm.devcode"
              clearable
              size="small"
              :disabled="dialogStatus"
              type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="titleStyle">
        APP端推送配置
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="appId" prop="devcode">
            <el-input
              v-model.trim="deviceForm.devcode"
              clearable
              size="small"
              :disabled="dialogStatus"
              type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="appKey" prop="devcode">
            <el-input
              v-model.trim="deviceForm.devcode"
              clearable
              size="small"
              :disabled="dialogStatus"
              type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="appSecret" prop="devcode">
            <el-input
              v-model.trim="deviceForm.devcode"
              clearable
              size="small"
              :disabled="dialogStatus"
              type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-button size="small" @click="up">
        修改
      </el-button>
      <el-button size="small" @click="saveData">
        保存
      </el-button>
      <el-button size="small" @click="dialogFormVisible = false">
        取消
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmPushCondig',
  data() {
    return {
      dialogStatus: true,
      // 表单内容
      deviceForm: {
        devcode: '',
        imei: '',
        iccid: ''
      },
      // 表单校验规则
      rules: {
        devcode: [{ required: true, message: '设备编号必填', trigger: ['blur', 'change'] }],
        imei: [{ required: true, message: 'IMEI号必填', trigger: ['blur', 'change'] }],
        iccid: [{ required: true, message: 'SIM卡号必填', trigger: ['blur', 'change'] }]
      }
    }
  },
  methods: {
    saveData() {}
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.titleStyle{
    margin: 20px;
}
.el-row{
    margin-left: 20px;
}
.heardTitle{
    margin: 10px 0;
    font-weight: 600;
}
</style>