<template>
  <div class="page_info">
    <div class="card_info">
      <div class="info_list">
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          stripe
          :header-cell-style="{ background: '#e6e7ea', color: '#0C1935' }"
          @sort-change="dataListSortChangeHandle"
          style="width: 100%"
          :height="screenHeight"
        >
          <el-table-column
            prop="requestMethod"
            label="请求方式"
            header-align="center"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="requestUri"
            label="请求URL"
            header-align="center"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="requestParams"
            label="请求参数"
            header-align="center"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="userAgent"
            label="User-Agent"
            header-align="center"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="ip"
            label="IP地址"
            header-align="center"
            align="center"
            width="130"
          ></el-table-column>
          <el-table-column
            prop="createDate"
            label="创建时间"
            header-align="center"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            label="操作"
            :resizable="false"
            fixed="right"
            header-align="center"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="infoHandle(scope.row.errorInfo)"
                >明细</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template v-if="total > 0">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        >
        </el-pagination>
      </template>
    </div>
    <el-drawer
      size="60%"
      :visible.sync="drawer"
      :with-header="false"
      :modal="false"
      @close="closedrawer"
    >
      <div class="drawer_info">
        <div class="drawer_title">异常详情</div>
        <div class="drawer_list">
          {{ this.errorInfo }}
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      screenHeight: "564px",
      mixinViewModuleOptions: {
        getDataListURL: "/sys/log/error/page",
        getDataListIsPage: true,
        exportURL: "/sys/log/error/export",
      },
      dialogVisible: false,
      errorInfo: "",
    };
  },
  mounted() {
    this.setTableHeight();
    // 页面创建完成后添加监听
    window.addEventListener("resize", this.setTableHeight);
  },
  methods: {
    setTableHeight() {
      setTimeout(() => {
        const fontSize = getComputedStyle(window.document.documentElement)[
          "font-size"
        ].replace("px", "");
        this.screenHeight =
          getComputedStyle(document.querySelector(".info_list")).height.replace(
            "px",
            ""
          ) -
          0.25 * fontSize +
          "px";
      }, 1000);
    },
    // 异常信息
    infoHandle(info) {
      this.errorInfo = info;
      this.drawer = true;
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.setTableHeight);
  },
};
</script>

<style lang="scss" scoped>
.mod-sys__log-error {
  &-view-info {
    width: 80%;
  }
}
.card_info {
  height: 100%;
  .info_list {
    padding: 0.25rem 0 0 0 !important;
    height: calc(100% - 0.85rem) !important;
  }
}
</style>

