<template>
  <div class="root_container">
    <div class="header">
      <div
        style="padding-bottom:5px"
        class="header_content_container"
      >
        <span class="title_tips"> 作业提交统计</span>
        <div
          class="header_tips"
          style="margin-left:10px"
        >
          统计信息数据每5分钟更新一次 <i class="el-icon-loading"></i>
        </div>
        <div class="select_platform">
          <el-select
            v-model="appValue"
            @change="selectApp"
            placeholder="请选择"
          >
            <el-option
              v-for="item in appList"
              :key="item.app_id"
              :label="item.app_name"
              :value="item.pro_id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="pager">
        <span style="color:#999999;display:inline-block;padding-top:9px">共 {{totalCount}} 条数据，每页 {{pageSize}} 条</span>
        <div
          class="pager_item"
          style="display:inline-block"
        >
          <el-pagination
            background
            :page-size="pageSize"
            @current-change="pageChange"
            layout="prev, pager, next"
            :total="totalCount"
            :current-page="currentPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="table_container">
      <el-table
        :data="tableData"
        :height="tableHeight"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          label=""
          width="40"
        >
        </el-table-column>
        <el-table-column
          prop="app_name"
          label="APP名称"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
        >
        </el-table-column>
        <el-table-column
          prop="week_desc"
          label="星期"
        >
        </el-table-column>
        <el-table-column
          prop="commit_count"
          label="提交次数"
        >
        </el-table-column>
        <el-table-column
          prop="commit_success_count"
          label="提交成功次数"
        >
        </el-table-column>
        <el-table-column
          prop="commit_success_rate"
          label="提交成功率（%）"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { workCommitList } from "../../api/log/statistics";
import { getAppList } from "../../api/log/app";
import { Message } from "element-ui";
export default {
  data() {
    return {
      //记录高度
      tableHeight: -1,

      //表格数据
      tableData: [],

      //选择的app
      appValue: "",
      currentAppId: "",
      appList: [],

      //分页数据
      totalCount: 0,
      currentPage: 1,
      pageSize: 20,
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 28;
    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 28;
    //获取数据
    this.obtainDataList();
  },
  methods: {
    //获取app列表
    obtainDataList() {
      if (this.appList.length == 0) {
        //先拉取getAppList
        getAppList()
          .then((result) => {
            this.appList = result.data.data;
            if (this.appList.length > 0) {
              this.appValue = this.appList[0].app_name;
              this.currentAppId = this.appList[0].pro_id;
            }
          })
          .then((result) => {
            workCommitList(this.currentPage, this.pageSize, this.currentAppId)
              .then((result) => {
                this.tableData = result.data.data.list;
                this.totalCount = result.data.data.total;
                this.currentPage = result.data.data.currentPage;
              })
              .catch((err) => {});
          })
          .catch((err) => {});
      } else {
        workCommitList(this.currentPage, this.pageSize, this.currentAppId)
          .then((result) => {
            this.tableData = result.data.data.list;
            this.totalCount = result.data.data.total;
            this.currentPage = result.data.data.currentPage;
          })
          .catch((err) => {});
      }
    },
    //页面发生变化
    pageChange(page) {
      this.currentPage = page;
      this.obtainDataList();
    },
    selectApp(item) {
      this.currentPage = 1;
      this.currentAppId = item;
      this.obtainDataList()
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}
.header {
  margin-right: 8px;
  margin-top: 18px;
}
.header_tips {
  font-size: 12px;
  padding-bottom: 10px;
  display: inline-block;
  color: #97a1af;
}

.title_tips {
  font-size: 16px;
  color: #252934;
  margin-left: 18px;
  line-height: 24px;
  font-weight: normal;
}

.table_container {
  padding-left: 18px;
  padding-right: 18px;
}

.pager {
  position: absolute;
  top: -6px;
  right: 220px;
  display: flex;
}

.select_platform {
  position: absolute;
  top: -10px;
  right: 18px;
}
</style>