<template>
  <div class="oneself">
    <div class="content">
      <div class="content-title">温馨提示：系统如无异常，请勿操作此界面</div>
      <el-form
        ref="form1"
        :model="formData1"
        :rules="rules1"
        label-width="180px"
        class="content-form"
      >
        <el-form-item label="服务器IP地址：" prop="ip">
          <el-input
            v-model="formData1.ip"
            style="width: 300px"
            placeholder="请输入服务器IP地址"
          />
        </el-form-item>
        <el-form-item label="基站名称：" prop="baseStation">
          <el-select
            v-model="formData1.baseStation"
            style="width: 300px"
            filterable
            placeholder="请选择基站"
          >
            <el-option
              v-for="item in baseStationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="FSU：" prop="fsu">
          <el-select
            v-model="formData1.fsu"
            style="width: 300px"
            filterable
            placeholder="请选择FSU"
          >
            <el-option
              v-for="item in fsuList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型配置：" prop="type">
          <el-select
            v-model="formData1.type"
            style="width: 300px"
            filterable
            placeholder="请选择设备类型配置"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        ref="form2"
        :model="formData2"
        :rules="rules2"
        label-width="180px"
        class="content-form"
      >
        <el-form-item label="设备配置下发：" prop="type">
          <div class="content-form-right">
            <el-radio-group v-model="formData2.type">
              <el-row style="margin-bottom: 10px">
                <el-radio :label="1">复位重启FSU</el-radio>
                <el-radio :label="2"
                  >常规测试>>次数
                  <el-input-number v-model="formData2.routineNum" :min="1" />
                </el-radio>
              </el-row>
              <el-row>
                <el-radio :label="3">请求实时连接</el-radio>
                <el-radio :label="4"
                  >自检测试>>次数
                  <el-input-number v-model="formData2.selfNum" :min="1" />
                </el-radio>
              </el-row>
            </el-radio-group>
            <div class="btn">
              <el-button
                style="width: 120px"
                type="primary"
                :loading="loading3"
                @click="sendContent"
                >发送查询内容</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-form>
      <el-form
        ref="form3"
        :model="formData3"
        :rules="rules3"
        label-width="180px"
        class="content-form"
      >
        <el-form-item label="设备运行参数配置下发：" prop="issue">
          <div class="content-form-right">
            <el-select
              v-model="formData3.issue"
              style="width: 300px"
              filterable
              placeholder="请选择配置下发类型"
            >
              <el-option
                v-for="item in issueList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="btn">
              <el-button
                style="width: 120px"
                type="primary"
                :loading="loading3"
                @click="sendData"
                >发送数据</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="tips">当前未向服务器下发指令！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseStationList: [],
      fsuList: [],
      typeList: [],
      issueList: [],
      formData1: {
        ip: '',
        baseStation: '',
        fsu: '',
        type: ''
      },
      rules1: {
        ip: [
          { required: true, message: '请输入服务器IP地址', trigger: 'blur' }
        ],
        baseStation: [
          { required: true, message: '请选择基站名称', trigger: 'blur' }
        ],
        fsu: [
          { required: true, message: '请选择FSU', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择设备配置类型', trigger: 'blur' }
        ]
      },
      formData2: {
        type: 1,
        routineNum: 0,
        selfNum: 0
      },
      rules2: {
        type: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      loading3: false,
      formData3: {
        issue: ''
      },
      rules3: {
        issue: [
          { required: true, message: '请选择配置下发类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    sendContent() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
        }
      })
    },
    sendData() {
      this.$refs.form3.validate((valid) => {
        if (valid) {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.oneself {
  margin: 10px;
  .content {
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    .content-title {
      width: 100%;
      height: 60px;
      background: rgba(226, 235, 255, 0.39);
      line-height: 60px;
      font-size: 18px;
      color: #333;
      font-weight: 500;
      text-align: center;
      border-bottom: 1px solid #e3e3e3;
      margin-bottom: 20px;
    }
    .content-form {
      margin: 0 auto;
      // padding: 20px 0;
      width: 800px;
      .content-form-right {
        border: 1px solid #dcdfe6;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        .btn {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .tips {
    text-align: center;
    padding-top: 50px;
    color: #1e64f6;
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
