<template>
  <div class="page-data">
    <div class="page-data_head">
      <!--搜索-->
      <page-filter
        :query.sync="filterInfo.query"
        @handleClick="handleClick"
      />
    </div>
    <div class="page-data_body">
      <page-table
        tabIndex
        pagination
        :api-url="tableInfo.url"
        :refresh="tableInfo.refresh"
        :data.sync="tableInfo.data"
        :query="filterInfo.query"
        :is-level="tableInfo.isLevel"
        :list-type-info="listTypeInfo"
        :init-curpage="tableInfo.initCurpage"
        :field-list="tableInfo.fieldList"
        @handleClick="handleClick"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //搜索相关
      filterInfo: {
        query: {
          serverIp: this.$route.query.publicAddress
        }
      },
      //表格相关
      tableInfo: {
        url: this.nozzle.nginxWatch, //接口地址
        refresh: 1,
        initCurpage: 1,
        data: [],
        isLevel: true,
        fieldList: [
          { label: "nginx名称", value: "nginxName", minWidth: 100, tooltip: true },
          { label: "nginx端口", value: "nginxPort", width: 90 },
          { label: "监控路径", value: "monitorPath", minWidth: 120, tooltip: true },
          { label: "服务地址", value: "url", minWidth: 100, tooltip: true },
          { label: "服务端口", value: "serverPort", width: 90 },
          { label: "端口类型", value: "portType", width: 100, list: "portTypeList" },
          { label: "描述", value: "description", minWidth: 80, tooltip: true },
          { label: "关联应用(jar)", value: "relatedApplication", minWidth: 100, tooltip: true },
        ]
      },
      //列表相关
      listTypeInfo: {
        portTypeList: [
          {key: "内网", value: 1},
          {key: "外网", value: 2},
          {key: "第三方", value: 3},
          {key: "本地", value: 4},
        ]
      }
    }
  },
  mounted() {
    this.tableInfo.refresh = Math.random();
  },
  methods: {
    //点击事件
    handleClick(event, data) {
      switch(event) {
        //搜索
        case "search":
          this.tableInfo.initCurpage = Math.random();
          this.tableInfo.refresh = Math.random();
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-data{
  height: 100%;
  &_head{

  }
  &_body{
    flex: 1;
  }
}
</style>