<template>
  <div class="commonList">
    <ul class="left_bar">
      <li
        v-for="(item, index) in leftBar"
        :key="index"
        :class="index == activeBar ? 'activeBar' : ''"
        @click="changeActive(index)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div v-loading="listLoading" class="right_list">
      <div class="list_title">
        {{ leftBar[activeBar].name }}
      </div>
      <ul v-if="tableData.length > 0" class="list">
        <li
          v-for="(item, index) in tableData"
          :key="index"
          title="点击预览pdf"
          @click="setPdf(item)"
        >
          <div class="left_text">
            <div class="circle"></div>
            <div class="title">{{ item.articleTitle }}</div>
          </div>

          <div class="rig_date">
            {{ item.createTime }}
          </div>
        </li>
      </ul>
      <el-empty v-else description="暂无数据"></el-empty>
      <div v-if="pageSize && total > 10" class="pagination-footer">
        <!-- <span class="description">{{ description }}</span> -->
        <el-pagination
          background
          :current-page="pageIndex"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <pdf-dialog
      ref="pdfDialog"
      :cur-pdf="curPdf"
      :pdf-src="pdfSrc"
    ></pdf-dialog>
  </div>
</template>
<script>
import { articleList } from "@/api/operation-management"
import paginationMixin from "@/components/TabComponents/mixin"
import PdfDialog from "../PdfDialog/index.vue"
export default {
  components: { PdfDialog },
  mixins: [paginationMixin],
  data() {
    return {
      activeBar: 0,
      listLoading: false,
      leftBar: [
        {
          name: "筛查技术方案",
        },
        {
          name: "筛查指南",
        },
        {
          name: "学术成果",
        },
        {
          name: "项目进展与成果",
        },
      ],
      tableData: [],
      curPdf: { articleTitle: "测试pdf" },
      pdfSrc: "",
    }
  },
  mounted() {
    if (this.$route.query.tabIndex) {
      this.activeBar = this.$route.query.tabIndex
    }
    this.getArticleList()
  },
  methods: {
    changeActive(i) {
      this.activeBar = i
      this.getArticleList()
      // this.$router.replace("/scientificresearch")
    },
    // 获取科学研究
    getArticleList() {
      this.listLoading = true
      let params = {
        size: this.pageSize,
        current: this.pageIndex,
        moduleType: "5",
        articleType: this.activeBar - 0 + 1,
      }
      articleList(params)
        .then((res) => {
          if (res.code == 1) {
            this.tableData = [...res.data.records]
            this.total = res.data.total
            this.listLoading = false
          }
        })
        .catch((e) => {
          this.listLoading = false
        })
    },
    setPdf(item) {
      this.$refs.pdfDialog.showPdf = true
      this.curPdf = item
      this.pdfSrc =
        "https://ds.cixincloud.com/geca-api/disease-data/file/info/" +
        item.filePath[0].bucketName +
        "/" +
        item.filePath[0].uuidName
    },
  },
}
</script>
<style lang="scss" scoped>
.commonList {
  display: flex;
  justify-content: space-between;
  .left_bar {
    width: 188px;
    height: 760px;
    background: #ffffff;
    border-radius: 4px;
    padding: 20px 0;
    li {
      width: 188px;
      height: 52px;
      font-size: 16px;
      font-family: AlibabaPuHuiTiM;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: rgba(78, 104, 255, 0.04);
      }
      // background: rgba(78, 104, 255, 0.1);
    }
    .activeBar {
      color: #4e68ff;
      background: rgba(78, 104, 255, 0.1);
    }
  }
  .right_list {
    width: calc(100% - 208px);
    height: 760px;
    background: #ffffff;
    border-radius: 4px;
    padding: 32px;
    .list_title {
      height: 37px;
      font-size: 16px;
      font-family: AlibabaPuHuiTiR;
      color: rgba(0, 0, 0, 0.8);
      border-bottom: 1px solid #efefef;
    }
    .list {
      li {
        height: 22px;
        font-size: 16px;
        font-family: AlibabaPuHuiTiR;
        color: #333333;
        line-height: 22px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        &:hover {
          background: rgba(78, 104, 255, 0.04);
          .left_text .title {
            color: #4e68ff;
          }
        }
        .left_text {
          display: flex;
          align-items: center;

          .circle {
            width: 6px;
            height: 6px;
            background: #4e68ff;
            border-radius: 50%;
            margin-right: 8px;
          }
        }
        .rig_date {
          font-size: 14px;
          font-family: Roboto-Regular, Roboto;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
</style>
