<template>
  <div class="app-container">
    <Form :config="{buttonGroup: []}" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
    <div class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
      <div class="disInlineBlock w30" style="color: #000;font-weight: 600;">
        策略内容
      </div>
    </div>
    <template v-if="ruleForm.monitorTemp === 1">
      <div v-for="(item, index) of otherList['data']" style="margin-top: 10px">
        <div style="width: 90%;margin: auto;">
          <div v-for="city in item.checkList" class="mt20">
            {{city.name}}
            <template v-if="city && (city.num || city.towName)">
              <span v-if="city.towName">，{{city.towName}} {{city.typeInput}}</span>
              <span v-if="city.num">{{city.typeSelect}}{{city.num}}<span v-if="city && city.numType === 'percent'">%</span>上报告警信息</span>
            </template>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div style="padding: 50px">
        接收来自交换机的snmp Trap信息:
        <el-radio-group v-model="otherList.switchType">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </div>
    </template>
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  export default {
    name: 'AlarmManageView',
    components: {Form},
    props: {
      ruleForm: {
        type: Object,
        default: () => ({})
      },
      otherList: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        formList: [{
          config: {title: '基本信息',readonly: true},
          controls: {
            id: {label: 'ID',hidden: true},
            switchName: {label: '策略名称', span: 12, type: 'input'},
            serverPort: {label: '描述', span: 12, type: 'textarea'},
            resourceGroup: {label: '关联资源组', span: 12, type: 'select'},
            time: {label: '修改时间', span: 12, type: 'date'}
          }
        }],
        paramsData: {},
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
    },
    methods: {
      // 监听事件
      callback(result, dataVal, formVal) {}
    }
  }
</script>
<style>
</style>
