<template>
  <div class="root_container">
    <div class="header">
      <el-form
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-button
            type="primary"
            @click="onCreateProject"
          >新建项目</el-button>
        </el-form-item>
        <el-form-item>
          <span style="color:#606266;font-size:12px">共 {{formData.length}} 条数据</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <el-table
        :data="tableDatas"
        :style="{height: tableHeight ,width: '100%'}"
        border
      >
        <el-table-column
          prop="app_id"
          label="APPID"
        >
        </el-table-column>
        <el-table-column
          prop="app_name"
          label="应用名称"
        >
        </el-table-column>
        <el-table-column
          prop="desc"
          label="应用描述"
        >
        </el-table-column>
        <el-table-column
          prop="add_time"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="add_time"
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                size="default"
                type="primary"
                plain
                @click="onOpenDetails(scope.row.pro_id)"
              >详情</el-button>
              <el-button
                size="default"
                type="danger"
                plain
                @click="onStopProject(scope.row.pro_id)"
              >停用</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getAppList } from "./../../api/log/app";
import { Message } from "element-ui";
export default {
  data() {
    return {
      formData: {
        length: "0",
      },
      tableDatas: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],

      //记录高度
      tableHeight: "0px",
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50 + "px";
    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 50 + "px";
    //获取数据
    this.obtainAppList();
  },
  methods: {
    //获取app列表
    obtainAppList() {
      getAppList()
        .then((result) => {
          this.tableDatas = result.data.data;
          this.formData.length = this.tableDatas.length;
        })
        .catch((err) => {});
    },
    //新建项目
    onCreateProject() {
      Message.warning("暂不开放");
    },
    //查看详情
    onOpenDetails(pro_id) {
      this.$router.push({ path: "/app/details?pro_id=" + pro_id });
    },
    //停用项目
    onStopProject(pro_id) {
      Message.warning("暂不开放");
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}
.header {
  margin-left: 18px;
  margin-top: 18px;
}
.table_container {
  margin-left: 18px;
  margin-right: 18px;
}
</style>