<template>
  <div class="container" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="header">
      <div class="searchInputDiv">
        <el-input
          placeholder="搜索系统实例"
          prefix-icon="el-icon-search"
          v-model="searchVal"
          @input="searchInputChange"
        >
        </el-input>
      </div>
      <div class="addDiv">
        <el-button type="primary" @click="createSystemGraph"
          >新建系统图</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="tableContainer">
        <el-table :data="graphArr" border style="width: 100%">
          <el-table-column prop="name" label="系统图名称"> </el-table-column>
          <el-table-column prop="sysType" label="系统类"> </el-table-column>
          <el-table-column prop="sysInstance" label="系统实例名称">
          </el-table-column>
          <el-table-column prop="sysTemplate" label="系统图模版">
          </el-table-column>
          <el-table-column prop="stateName" label="状态"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewGraph(scope.row)"
                >预览</el-button
              >
              <el-button type="text" size="small" @click="editGraph(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pageContainer">
        <el-pagination
          background
          v-if="dataCount > 0"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="dataCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { sysGraphController } from "@/controller/systemGraph/sysGraphController";

export default {
  props: [],
  data() {
    return {
      //搜索关键字
      searchVal: "",
      //后台返回的所有的数据
      allGraphArr: [],
      //用于页面绑定的数据全集
      allGraphArrToPage: [],
      //用于表格内绑定
      graphArr: [],
      //当前页码
      currentPage: 1,
      //每页条数
      pageSize: 20,
      //总条数
      dataCount: 0,
      //进入编辑页面时的状态 0 预览； 1 编辑；  2 新建
      state: 0,
      //选择的某一个系统图
      selDiagram: {},
      fullscreenLoading: true,
    };
  },
  computed: {
    ...mapState(["selectProject"]),
  },
  methods: {
    //每页条数改变
    handlePageSizeChange: function (pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
      this.getCurrPageData();
    },
    //页码改变
    handleCurrentPageChange: function (currentPage) {
      this.currentPage = currentPage;
      this.getCurrPageData();
    },
    //新建系统图
    createSystemGraph: function () {
      this.state = 2;
      this.selDiagram = {};
      this.openGraphPage();
    },
    //预览系统图
    viewGraph: function (item) {
      this.state = 0;
      this.selDiagram = item;
      this.openGraphPage();
    },
    //编辑系统图
    editGraph: function (item) {
      this.state = 1;
      this.selDiagram = item;
      this.openGraphPage();
    },
    //从allGraphArr中取出对应页数的数据
    getCurrPageData: function () {
      var startIndex = (this.currentPage - 1) * this.pageSize;
      var endIndex = startIndex + this.pageSize;
      this.graphArr = this.allGraphArrToPage.slice(startIndex, endIndex);
    },
    //关键词输入框输入改变事件
    searchInputChange: function () {
      this.currentPage = 1;
      var keyVal = this.searchVal;
      var tempArr = !keyVal
        ? this.allGraphArr
        : this.allGraphArr.filter((_c) => {
            return (_c.sysInstance || "").indexOf(keyVal) > -1;
          });
      this.allGraphArrToPage = tempArr;
      this.dataCount = this.allGraphArrToPage.length;
      this.getCurrPageData();
    },
    //查询数据
    getData: async function () {
      try {
        this.allGraphArr = await sysGraphController.getDiagrams();
        this.searchInputChange();
        this.getCurrPageData();

        this.fullscreenLoading = false;
      } catch (error) {
        console.error(error);
        this.allGraphArr = [];
        this.allGraphArrToPage = [];
        this.graphArr = [];
        this.dataCount = 0;
        this.fullscreenLoading = false;
      }
    },
    //打开系统图新增、预览、编辑页面
    openGraphPage: function () {
      sysGraphController.openGraphPage(
        this.state,
        this.selDiagram.id,
        this.selectProject.groupCode,
        this.selectProject.id,
        this.selectProject.name,
        window.__systemConf.baseRouteUrl,
        true
      );
    },
  },
  created() {
    this.getData();
  },
  mounted() {},
  components: {},
  watch: {
    selectProject: function () {
      this.getData();
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.header {
  height: 70px;
  line-height: 70px;
  text-align: right;
}

.content {
  flex: 1;
  overflow: hidden;
}

.searchInputDiv {
  width: 150px;
  height: 100%;
  display: inline-block;
}

.addDiv {
  width: 100px;
  height: 100%;
  display: inline-block;
}

.tableContainer {
  height: calc(100% - 148px);
  overflow: auto;
}

.pageContainer {
  margin-top: 66px;
  margin-bottom: 50px;
}
</style>