<template>
  <div class="book">
    <MenuPage cur-key="/project_manage/book" />

    <div class="book-list">
      <el-table :data="list">
        <el-table-column label="序号" width="60" class-name="index-column" align="center" header-align="center">
          <template slot-scope="{ $index }">
            {{ cur_page_begin_index + $index }}
          </template>
        </el-table-column>
        <el-table-column prop="sn" label="编号" width="120" header-align="center" />
        <el-table-column prop="name" label="名称" width="240" header-align="center" />
        <el-table-column prop="version" label="版本" width="80" header-align="center" />
        <el-table-column prop="project_sn" label="项目编号" width="120" header-align="center" />
        <el-table-column prop="project_name" label="项目名称" width="240" header-align="center" />
        <el-table-column prop="content_count" label="教材页面数" width="120" header-align="center" align="center" />
        <el-table-column prop="shangjia_time" label="上架时间" header-align="center" width="160" />
        <el-table-column label="已申请下架" header-align="center" align="center">
          <template slot-scope="{ row }">
            <span style="color: #f53f3f">
              {{ isTrue(row.is_request_xiajia) ? '√' : '' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="150" header-align="center">
          <template slot-scope="{ row }">
            <span class="link">查看信息</span>
            <span class="link" @click="previewCourseware(row.id)">预览教材</span>
          </template>
        </el-table-column>
      </el-table>

      <PaginationPage :total="total" @getList="pageQueryMyProjectYSJBookList_Leader" />
    </div>
  </div>
</template>

<script>
import PaginationPage from '@/components/PaginationPage.vue';
import MenuPage from '@/views/personal_workbench/common/menu.vue';

import { PageQueryMyProjectYSJBookList_Leader } from '@/api/list';
import { isTrue } from '@/utils/validate';

export default {
  name: 'BookPage',
  components: {
    PaginationPage,
    MenuPage,
  },
  data() {
    return {
      list: [],
      total: 0,
      cur_page_begin_index: 0,
      isTrue,
    };
  },
  methods: {
    pageQueryMyProjectYSJBookList_Leader(data) {
      PageQueryMyProjectYSJBookList_Leader(data).then(({ total_count, cur_page_begin_index, book_list }) => {
        this.total = total_count;
        this.cur_page_begin_index = cur_page_begin_index;
        this.list = book_list;
      });
    },
    previewCourseware(projectId) {
      this.$router.push({ path: `/project_manage/book/preview/${projectId}` });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.book {
  @include page-base;
  @include table-list;
}
</style>
