<template>
  <el-container>
    <el-header height="60px" class="content-header">
      <MyHeader
        :title="'链路监控'"
        :formData="headerFormData"
        @submit="handleHeaderFormSubmit"
      ></MyHeader>
    </el-header>
    <el-container>
      <el-main>
        <MyTableHeader
          :title="tableHeaderTitle"
          :tabs="tabs"
          :buttons="buttons"
          @tabClick="handleTabClick"
          @buttonClick="handleButtonClick"
        ></MyTableHeader>

        <!-- 接口 -->
        <InterfaceMonitorTable
          ref="interface"
          v-if="tabActive === 1"
          :tableList="tableData"
          :total="tableTotal"
          @changePage1="changePage1"
          @changeSize1="changeSize1"
        ></InterfaceMonitorTable>
        <!-- kafka  -->
        <KafkaMonitorTable
          ref="kafka"
          v-if="tabActive === 2"
          :tableList="tableData"
          :total="tableTotal"
          @changePage2="changePage2"
          @changeSize2="changeSize2"
          @handleSelectionChange="handleSelectionChange"
        ></KafkaMonitorTable>
        <!-- 作业监控 -->
        <JobMonitorTable
          ref="job"
          v-if="tabActive === 3"
          :tableList="tableData"
          :total="tableTotal"
          @changePage3="changePage3"
          @changeSize3="changeSize3"
          @handleSelectionChange="handleSelectionChange"
        ></JobMonitorTable>

        <!-- 库存容量监控 -->
        <InventoryCapacityMonitorTable
          ref="inventoryCapacity"
          v-if="tabActive === 4"
          :tableList="tableData"
          :total="tableTotal"
          @changePage4="changePage4"
          @changeSize4="changeSize4"
          @handleSelectionChange="handleSelectionChange"
        ></InventoryCapacityMonitorTable>

        <!-- 心跳监测 -->
        <HeartbeatMonitoringTable
          ref="heartbeat"
          v-if="tabActive === 6"
          :tableList="tableData"
          :total="tableTotal"
          @changePage6="changePage6"
          @changeSize6="changeSize6"
          @handleSelectionChange="handleSelectionChange"
        ></HeartbeatMonitoringTable>

        <!-- 监控可视化 -->
        <!-- <VisualMonitor v-if="tabActive===8" :tableList="tableData"></VisualMonitor> -->

        <!--     <MyTable
          :tableData="tableData"
          :formData="formData"
          :minWidth="340"
          ref="myTableRef"
          @selection-change="handleSelectionChange"
        >
          <template #operation="{ row, index }">
            <el-button size="mini" @click="handleView(row, 'view')" type="primary">查看</el-button>
            <el-button size="mini" @click="handleEdit(row, 'edit')" type="primary">编辑</el-button>
            <el-button
              v-if="row.status === 0"
              size="mini"
              @click="handleStart(row, index)"
              type="primary"
            >启用</el-button>
            <el-button
              v-if="row.status === 1"
              size="mini"
              @click="handleStop(row, index)"
              type="primary"
            >停用</el-button>
            <el-button size="mini" @click="handleDelete(row)" type="primary">删除</el-button>
          </template>
        </MyTable>
        <MyPagination
          :total="tableTotal"
          :page-size="pageSize"
          :current-page="currentPage"
          @pageChange="pagi_changePage"
          @sizeChange="pagi_changeSize"
        ></MyPagination>-->
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import {
  getTabLog2List,
  getKafkaLogList,
  getDataLogList,
  getSpace,
  getTabIpResultList,
} from "@/api/unified-resources/link-monitor/link-monitor-center.js";
import MyHeader from "@/components/MyHeader";
import MyTable from "@/components/MyTable";
import MyPagination from "@/components/MyPagination";
import MyTableHeader from "@/components/MyTableHeader";
//  import ConfigDialog from "./dialog/ConfigDialog.vue"
import InterfaceMonitorTable from "./components/InterfaceMonitorTable.vue";
import KafkaMonitorTable from "./components/KafkaMonitorTable.vue";
import JobMonitorTable from "./components/JobMonitorTable.vue";
import InventoryCapacityMonitorTable from "./components/InventoryCapacityMonitorTable.vue";
import HeartbeatMonitoringTable from "./components/HeartbeatMonitoringTable.vue";
import VisualMonitor from "./components/VisualMonitor.vue";

export default {
  name: "access-config",
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
    InterfaceMonitorTable,
    KafkaMonitorTable,
    JobMonitorTable,
    InventoryCapacityMonitorTable,
    HeartbeatMonitoringTable,
    VisualMonitor,
  },
  data() {
    return {
      // searchTitle:'接口',
      showDialog: false,
      title: "新增",
      rowObj: {},
      type: "add",
      tableData: [],
      formData: [
        {
          label: "接口",
          fieldName: "dataManner",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "监控询问时间",
          fieldName: "gatewayIp",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "状态",
          fieldName: "status",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "最近响应时间",
          fieldName: "sixIp",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "最近监测结果",
          fieldName: "sixPort",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
      ],
      tableTotal: 0,
      pageSize: 10,
      currentPage: 1,
      selectedRows: [], // 存储选中的行数据
      searchForm: {},
      treeSearchVal: "",
      tableHeaderTitle: "项目列表",
      tabActive: 1,
      tabs: [
        { label: "接口监听监控", value: 1, active: true },
        {
          label: "kafka消费生产监控",
          value: 2,
          active: false,
        },
        { label: "作业监控", value: 3, active: false },
        { label: "库存容量监控", value: 4, active: false },
        { label: "监测预警", value: 5, active: false },
        { label: "心跳监测", value: 6, active: false },
        { label: "数据对账", value: 7, active: false },
        { label: "监控可视化", value: 8, active: false },
      ],
      buttons: [
        // {
        //   label: "启用",
        //   type: "primary",
        //   methodName: "action1",
        //   icon: "el-icon-video-play",
        // },
        // {
        //   label: "停用",
        //   type: "primary",
        //   methodName: "action2",
        //   icon: "el-icon-video-pause",
        // },
        {
          label: "导出",
          type: "primary",
          methodName: "action1",
          icon: "el-icon-upload",
        },
      ],

      headerFormData: [
        {
          label: "接口",
          fieldName: "url",
          type: "input",
          value: "",
          placeholder: "请输入接口",
          // isRequired: true,
        },
      ],
      headerFormData1: [
        {
          label: "接口",
          fieldName: "url",
          type: "input",
          value: "",
          placeholder: "请输入接口",
          // isRequired: true,
        },
      ],
      headerFormData2: [
        {
          label: "主题Topic名称",
          fieldName: "tabName",
          type: "input",
          value: "",
          placeholder: "请输入主题Topic名称",
          // isRequired: true,
        },
      ],
      headerFormData3: [
        {
          label: "项目名称",
          fieldName: "systemName",
          type: "input",
          value: "",
          placeholder: "请输入项目名称",
          // isRequired: true,
        },
      ],
      headerFormData4: [
        {
          label: "文件夹名称",
          fieldName: "filepath",
          type: "input",
          value: "",
          placeholder: "请输入文件夹名称",
          // isRequired: true,
        },
      ],
      headerFormData6: [
        {
          label: "心跳监测项目",
          fieldName: "url",
          type: "input",
          value: "",
          placeholder: "请输入心跳监测项目",
          // isRequired: true,
        },
      ],
    };
  },

  methods: {
    // 头部搜索框
    handleHeaderFormSubmit(form) {
      this.searchForm = form;
      if (this.tabActive === 1) {
        this.getList();
      } else if (this.tabActive === 2) {
        this.getList2();
      } else if (this.tabActive === 3) {
        this.getList3();
      } else if (this.tabActive === 4) {
        this.getList4();
      } else if (this.tabActive === 5) {
        this.getList5();
      } else if (this.tabActive === 6) {
        this.getList6();
      }
    },
    // 树结构点击
    handleNodeClick() {},
    // 列表头部
    handleTabClick(tab) {
      this.tabs.forEach((item) => {
        if (item.label === tab.label) {
          item.active = true;
          this.tabActive = item.value;
          if (item.value === 1) {
            this.getList();
            this.headerFormData = this.headerFormData1;
          } else if (item.value === 2) {
            this.getList2();
            this.headerFormData = this.headerFormData2;
          } else if (item.value === 3) {
            this.getList3();
            this.headerFormData = this.headerFormData3;
          } else if (item.value === 4) {
            this.getList4();
            this.headerFormData = this.headerFormData4;
          } else if (item.value === 5) {
            this.getList5();
          } else if (item.value === 6) {
            this.getList6();
            this.headerFormData = this.headerFormData6;
          }

          if (item.value === 8) {
            this.$router.push('/resources/linkMonitor/visualMonitor')

          }
        } else {
          item.active = false;
        }
      });
    },
    // 列表头部功能按钮
    handleButtonClick(methodName) {
      console.log(methodName, "methodName");

      switch (methodName) {
        case "action1":
          // 导出
          if (this.tabActive === 1) {
            if (this.$refs.interface.selectedRows) {
              let ids = [];
              ids = this.selectedRows.map((item) => item.id);
              this.download(
                "/web/tab-log2/export",
                {
                  ids,
                },
                `接口监听监控_${new Date().getTime()}.xlsx`
              );
            } else {
              this.$confirm("请选择列表项?", "提示", {
                confirmButtonText: "关闭",
                cancelButtonText: "取消",
                showCancelButton: false,
                showConfirmButton: false,
                type: "warning",
                center: true,
              })
                .then(() => {})
                .catch(() => {});
            }
          } else if (this.tabActive === 2) {
            if (this.$refs.kafka.selectedRows) {
              let ids = [];
              ids = this.selectedRows.map((item) => item.id);
              this.download(
                "/web/tab-kafkalog/export",
                {
                  ids,
                },
                `kafka消费生产监控${new Date().getTime()}.xlsx`
              );
            } else {
              this.$confirm("请选择列表项?", "提示", {
                confirmButtonText: "关闭",
                cancelButtonText: "取消",
                showCancelButton: false,
                showConfirmButton: false,
                type: "warning",
                center: true,
              })
                .then(() => {})
                .catch(() => {});
            }
          } else if (this.tabActive === 3) {
            if (this.$refs.job.selectedRows) {
              let ids = [];
              ids = this.selectedRows.map((item) => item.id);
              this.download(
                "/web/tab-datalog/export",
                {
                  ids,
                },
                `作业监控_${new Date().getTime()}.xlsx`
              );
            } else {
              this.$confirm("请选择列表项?", "提示", {
                confirmButtonText: "关闭",
                cancelButtonText: "取消",
                showCancelButton: false,
                showConfirmButton: false,
                type: "warning",
                center: true,
              })
                .then(() => {})
                .catch(() => {});
            }
          } else if (this.tabActive === 4) {
            if (this.$refs.inventoryCapacity.selectedRows) {
              let ids = [];
              ids = this.selectedRows.map((item) => item.id);
              this.download(
                "/web/tab-system-space/export",
                {
                  ids,
                },
                `库存容量监控_${new Date().getTime()}.xlsx`
              );
            } else {
              this.$confirm("请选择列表项?", "提示", {
                confirmButtonText: "关闭",
                cancelButtonText: "取消",
                showCancelButton: false,
                showConfirmButton: false,
                type: "warning",
                center: true,
              })
                .then(() => {})
                .catch(() => {});
            }
          } else if (this.tabActive === 5) {
            // this.getList5();
          } else if (this.tabActive === 6) {
            
            if (this.$refs.heartbeat.selectedRows) {
              let ids = [];
              ids = this.selectedRows.map((item) => item.id);
              this.download(
                "/web/tab-ip-result/export",
                {
                  ids,
                },
                `心跳监测_${new Date().getTime()}.xlsx`
              );
            } else {
              this.$confirm("请选择列表项?", "提示", {
                confirmButtonText: "关闭",
                cancelButtonText: "取消",
                showCancelButton: false,
                showConfirmButton: false,
                type: "warning",
                center: true,
              })
                .then(() => {})
                .catch(() => {});
            }
          }

          break;

        default:
          break;
      }
    },
    // 处理选中项变化
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows; // 获取选中的行
    },

    getList() {
      getTabLog2List({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },

    getList2() {
      getKafkaLogList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },
    getList3() {
      getDataLogList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },

    getList4() {
      getSpace({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },

    getList5() {
      // getSpace({
      //   pageNum: this.currentPage,
      //   pageSize: this.pageSize,
      //   ...this.searchForm
      // }).then(res => {
      //   if (+res.code === 200) {
      //     this.tableData = res.rows;
      //     this.tableTotal = +res.total;
      //   }
      // });
    },

    getList6() {
      getTabIpResultList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },

    // 弹窗
    handleConfirm() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },

    // 编辑
    handleView(row) {
      this.rowObj = row;
      this.title = "查看";
      this.showDialog = true;
    },
    handleEdit(row) {
      console.log(row, "row");
      this.rowObj = row;
      this.title = "编辑";
      this.showDialog = true;
    },

    beforeClose() {
      this.showDialog = false;
    },

    handleStart(row) {
      let pForm = {};
      pForm = { ...row };
      pForm.status = 1;
      updateTabAccessConfigById({ ...pForm }).then((res) => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleStop(row) {
      let pForm = {};
      pForm = { ...row };
      pForm.status = 0;
      updateTabAccessConfigById({ ...pForm }).then((res) => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning",
      })
        .then(() => {
          delTabAccessConfigById(row.id).then((res) => {
            if (+res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log(row, "row");
    },
    changePage1(page) {
      this.currentPage = page;
      this.getList();
    },
    changeSize1(size) {
      this.pageSize = size;
      this.getList();
    },
    changePage2(page) {
      this.currentPage = page;
      this.getList2();
    },
    changeSize2(size) {
      this.pageSize = size;
      this.getList2();
    },
    changePage3(page) {
      this.currentPage = page;
      this.getList3();
    },
    changeSize3(size) {
      this.pageSize = size;
      this.getList3();
    },
    changePage4(page) {
      this.currentPage = page;
      this.getList4();
    },
    changeSize4(size) {
      this.pageSize = size;
      this.getList4();
    },
    changePage5(page) {
      this.currentPage = page;
      this.getList5();
    },
    changeSize5(size) {
      this.pageSize = size;
      this.getList5();
    },
    changePage6(page) {
      this.currentPage = page;
      this.getList6();
    },
    changeSize6(size) {
      this.pageSize = size;
      this.getList6();
    },
  },
  created() {},
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}

.el-icon-search {
  font-size: 16px;
  font-weight: 700;
  color: #1e80e0;
}
</style>
