<template>
  <div class="app-container">
    <Form :config="{buttonGroup: []}" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
    <div v-for="(item, key, index) of otherList" style="margin-top: 50px">
      <div v-if="item.data && item.data.length > 0">
<!--        {{item}}-->
        <div class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
          <div class="disInlineBlock w30" style="color: #000;font-weight: 600;">
            {{item.firstTitle}}>>{{item.secondTitle}}<span v-if="item && item.lastTitle">>>{{item.lastTitle}}</span>
          </div>
          <span class="disInlineBlock" style="font-size: 14px;color: #000;" v-if="item.hasOwnProperty('time')">当前所有子项的采集周期均为{{item.time || 0}}分钟</span>
        </div>
        <div class="w70" style="margin: auto;">
          <div class="plr-50">
            <div v-for="city of item.data" class="w100 mt10 mb10 disInlineBlock fontSize15">
              <div class="disInlineBlock w80">
                <span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
                <span>{{city.towName}}</span>
              </div>
              <div v-if="city && city['time']" class="disInlineBlock" style="color: #606266">
                采集周期为{{city['time']}}分钟
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import TableList from "@/components/table/index.vue"
  export default {
    name: 'MonitorStategyView',
    components: {Form,TableList},
    props: {
      ruleForm: {
        type: Object,
        default: () => ({})
      },
      otherList: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        formList: [{
          config: {title: '基本信息'},
          controls: {
            id: {label: 'ID',hidden: true},
            switchName: {label: '策略名称', span: 12, type: 'input', disabled: true, rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
            serverPort: {label: '描述', span: 12, type: 'textarea', disabled: true, style: 'display: block;'},
            monitorTemp: {label: '关联监控模版', span: 12, type: 'select', disabled: true, hidden: true, style: 'display: block;margin: 0 auto;'},
            resourceGroup: {label: '关联资源组', span: 12, type: 'select', disabled: true,}
          }
        }],
        paramsData: {},
        columns: {
          id: { label: `ID`, visible: false },
          ident: { label: `监控标识`, visible: true},
          name: { label: `监控名称`, visible: true},
          monitor: { label: `监控OID`, visible: true },
          filter: { label: `过滤值`},
          explain: { label: `监控说明`, visible: true}
        },
        config: {colHiddenCheck: true}
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      console.log('otherList=',this.otherList);
    },
    methods: {
      // 监听事件
      callback(result, dataVal, formVal) {}
    }
  }
</script>
<style>
</style>
