<template>
  <div class="app-container">
    <el-row>
      <!-- 筛选条件 -->
      <el-form ref="formRef" :inline="true" size="mini" :model="query.data">
        <el-form-item label="服务名称">
          <el-input v-model="query.data.name"></el-input>
        </el-form-item>
        <el-form-item label="请求用户">
          <el-input v-model="query.data.userName"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="query.data.time"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getOpenDataList"
            icon="Search"
          >搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="table_box">
      <el-table
        stripe
        :data="tableData"
        :height="tableHeight"
        style="width: 100%"
        size="small"
        :header-cell-style="{
          background: '#ebf3fb',
          color: '#333',
          padding: '4px 0',
          'border-right': '1px solid #fff',
        }"
      >
        <el-table-column type="index" align="center" label="序号" :index="1"/>
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="150"
          prop="name"
          label="服务名称"
        />
        <el-table-column
          show-overflow-tooltip
          prop="srvUrl"
          label="服务地址"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="80"
          prop="srvMethod"
          label="请求方式"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="160"
          prop="tm"
          label="请求时间"
        >
          <template #default="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.tm }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="100"
          prop="userName"
          label="请求用户"
        />
        <el-table-column
          show-overflow-tooltip
          align="left"
          width="150"
          prop="appName"
          label="请求应用"
        />
      </el-table>
    </el-row>
    <el-pagination
      v-show="dataTotal > 0"
      style="margin-top:1%"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[ 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataTotal">
      </el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ServiceInvocationLog",
  components: {},
  data() {
    return {
      dataUrl: "/pt/service/log/listByFactor",
      tableData: [],
      tableHeight: window.innerHeight - 300,
      dataTotal: 0,
      pageSize:20,
      pageNum:'',
      query: {
        pageNum: 1,
        pageSize: 20,
        orderBy: "",
        data: {
          name: "",
          userName: "",
          time: [],
          sttm: "",
          entm: "",
        },
      },
      shortcuts: [
        {
          text: "近一周",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: "近一个月",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
        {
          text: "近三个月",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
        {
          text: "近一年",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
      ],
    };
  },
  mounted() {
    this.getOpenDataList();
  },
  methods: {
    handleSizeChange(num){
      this.query.pageSize = num
      this.getOpenDataList()
    },
    handleCurrentChange(num){
      this.query.pageNum = num
      this.getOpenDataList()
    },
    getOpenDataList() {
      // 获取服务调用数据
      request.post(this.dataUrl, this.query).then((r) => {
        this.tableData = r.rows;
        this.dataTotal = r.total;
      });
    },
  },
  watch: {
    //普通的watch监听
    "query.data.time": {
      handler(newName, oldName) {
        this.query.data.sttm = newName[0];
        this.query.data.entm = newName[1];
      },
      immediate: true,
      // deep: true,
    },
  },
};
</script>
<style scoped>
.el-row {
  margin-bottom: 10px;
}

.table_box ::v-deep .el-table {
  border: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-bottom: none;
  border-radius: 5px;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>
