<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: 20px">
      <div v-if="item.data && item.data.length > 0">
<!--        {{item}}-->
        <div v-if="item && item.lastTitle && item.tableKey" class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
            {{item.lastTitle}}
        </div>
        <div v-else class="form-header h4" style="padding: 15px 10px;">{{item.firstTitle}}-{{item.secondTitle}}</div>
        <div class="mt10 mb10">
          <div v-if="item && item.tableKey">
            <template v-if="item.lastTitle">
<!--              <div class="form-header">{{item.lastTitle}}</div>-->
              <TableList :config="config" :columns="columns" :queryParams="{total: 0}" :tableList="item.data"  @fnClick="callback"></TableList>
            </template>
            <template v-else>
              <TableList :config="config" :columns="columns" :queryParams="{total: 0}" :tableList="item.data"  @fnClick="callback"></TableList>
            </template>
          </div>
          <div v-else class="plr-20">
            <div v-for="(val,valIndex) of item.data" class="disInlineBlock w45">
              <span style="width: 200px" class="disInlineBlock">{{val.name}}</span>
              <span>{{val.towName}}</span>
            </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: 'MonitorTempView',
    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'}]},
            resourceName: {label: '包含资源', span: 12, type: 'input', disabled: true},
            serverPort: {label: '描述', span: 12, type: 'textarea', 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;
    },
    methods: {
      // 监听事件
      callback(result, dataVal, formVal) {}
    }
  }
</script>
<style>
</style>
