<template>
  <div class="app-container" style="padding-top:15px">
    <!-- <div class="filter-container" /> -->
    <!-- <div class="workBookLayout"> -->
    <!-- <div class="title">工作手册管理</div> -->
    <!-- <div class="text-center" style="padding:10% 0">
        <img class="img" src="./img/comingSoon.png" alt="">
        <h2>业务正在努力开发中...</h2>
        <div style="color:#787878">该功能即将上线，请稍等</div>
      </div> -->
    <!-- </div> -->

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="工作手册id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="工作手册标题" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="新闻副标题" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.subtitle }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="工作手册简介" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.introduction }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="新闻列表上的图片地址集合" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.images }}</span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="发布时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.releaseTime | parseTime }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="操作" width="300px" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            @click="
              $router.push({
                path: '/workBook/detail',
                query: { id: scope.row.id }
              })
            "
            type="primary"
            size="mini"
            style="font-size:12px;padding:10px 20px"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { workBookList } from "@/api/workBook";

export default {
  components: { Pagination },
  data() {
    return {
      listLoading: false,
      loading: false,
      list: [],
      listQuery: {
        lastPageIndex: 1,
        size: 99999,
        keyword: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      workBookList(this.listQuery).then(res => {
        // console.log(res)
        this.listLoading = false;
        this.list = res.d.records;
      });
    }
  }
};
</script>

<style scoped>
.workBookLayout {
  padding-top: 20px;
  background: #fff;
  height: 100%;
}
.app-container .title {
  border-left: 5px solid #1890ff;
  padding-left: 8px;
  font-size: 18px;
  color: #000000;
}
.img {
  width: 486px;
  height: 268px;
}
</style>
