<template>
  <div>
    <MyTable
      :tableData="tableData"
      :formData="formData"
      :minWidth="340"
      ref="myTableRef"
      @selection-change="handleSelectionChange"
    >
      <!-- 自定义操作按钮，传递 row 和 index -->
      <template #operation="{ row }">
        <el-button size="mini" @click="handleView(row, 'view')" 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="handleEdit(row, 'edit')" type="primary"
          >设置</el-button
        >-->
      </template>
    </MyTable>
    <MyPagination
      :total="tableTotal"
      :page-size="pageSize"
      :current-page="currentPage"
      @pageChange="pagi_changePage"
      @sizeChange="pagi_changeSize"
    ></MyPagination>

    <div v-if="showDialog">
      <InterfaceLogLineChartDialog
        v-model="showDialog"
        :title="title"
        :rowObj="rowObj"
        :itemUrl="itemUrl"
        @confirm="showDialog = false"
      ></InterfaceLogLineChartDialog>
    </div>
  </div>
</template>
<script>
import { getTabLog2DetailListByUrl } 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 InterfaceLogLineChartDialog from "../dialog/InterfaceLogLineChartDialog.vue";
export default {
  name: "access-config",
  props: {
    tableList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    total: {
      type: Number,
      default: 0,
    },
  },

  watch: {
    tableList: {
      handler(newVal) {
        this.tableData = newVal;
      },
      deep: true, // 深入监听
      immediate: true,
    },
    total: {
      handler(newVal) {
        this.tableTotal = newVal;
      },
      deep: true, // 深入监听
      immediate: true,
    },
  },
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
    InterfaceLogLineChartDialog,
  },
  data() {
    return {
      itemUrl: "",
      showDialog: false,
      tableData: [],
      formData: [
        {
          label: "接口",
          fieldName: "url",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "监控询问时间",
          fieldName: "responseTime",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "状态",
          fieldName: "status",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "最近响应时间",
          fieldName: "time",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "最近监测结果",
          fieldName: "reponse",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
      ],
      tableTotal: 0,
      pageSize: 10,
      currentPage: 1,
    };
  },

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

    getList() {
      getTabLog2DetailListByUrl({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },
    // 列表分页
    pagi_changePage(page) {
      this.currentPage = page;
      this.$emit("changePage1", page);
    },
    pagi_changeSize(size) {
      this.pageSize = size;
      // this.getList();
      this.$emit("changeSize1", size);
    },

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

    // 编辑
    handleView(row) {
      this.rowObj = row;
      this.itemUrl = row.url;
      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");
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}

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