<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-if="!showDetail" v-loading="listLoading" class="right_list">
      <div class="list_title">
        {{ leftBar[activeBar].name }}
      </div>
      <ul class="list" v-if="tableData.length > 0">
        <li v-for="(item, index) in tableData" :key="index">
          <div class="leftImg">
            <img
              :src="
                'https://ds.cixincloud.com/geca-api/disease-data/file/info/' +
                item.imgPath[0].bucketName +
                '/' +
                item.imgPath[0].uuidName
              "
              alt=""
            />
          </div>
          <div class="rightCon">
            <div class="top">
              <div class="rc_title">{{ item.articleTitle }}</div>
              <div class="rc_date">{{ item.createTime }}</div>
            </div>
            <div class="bottom" @click="viewDetail(index)">查看</div>
          </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>
    <div v-if="showDetail" class="right_content">
      <div class="breadcum">
        <div
          v-for="(item, index) in showTitle"
          :key="index"
          :class="[index != showTitle.length - 1 ? 'before' : 'now']"
          @click="back(index)"
        >
          {{ item }}<span v-if="index != showTitle.length - 1"> / </span>
        </div>
      </div>
      {{ showText }}
    </div>
  </div>
</template>
<script>
import { articleList } from "@/api/operation-management"
import paginationMixin from "@/components/TabComponents/mixin"
export default {
  mixins: [paginationMixin],
  data() {
    return {
      activeBar: 0,
      listLoading: false,
      leftBar: [
        {
          name: "筛查",
        },
        {
          name: "生活",
        },
        {
          name: "医学知识",
        },
        {
          name: "其他",
        },
      ],
      showText: "",
      showTitle: [],
      showDetail: false,
      // 分页数据
      total: 0,
      tableData: [],
    }
  },
  mounted() {
    console.log(this.$route)
    if (this.$route.query.tabIndex) {
      this.activeBar = this.$route.query.tabIndex
    }
    this.getArticleList()
  },
  methods: {
    // 获取健康科普
    getArticleList() {
      this.listLoading = true
      let params = {
        size: this.pageSize,
        current: this.pageIndex,
        moduleType: "4",
        articleType: this.activeBar - 0 + 1,
      }
      articleList(params)
        .then((res) => {
          if (res.code == 1) {
            this.tableData = [...res.data.records]
            this.total = res.data.total - 0
            this.listLoading = false
          }
        })
        .catch((e) => {
          this.listLoading = false
        })
    },
    changeActive(i) {
      this.activeBar = i
      this.showDetail = false
      this.showText = ""
      this.getArticleList()
    },
    viewDetail(i) {
      this.showDetail = true
      this.showText = this.tableData[i].articleContent
      this.showTitle[0] = this.leftBar[this.activeBar].name
      this.showTitle[1] = this.tableData[i].articleTitle
      console.log(this.showText)
    },
    back(index) {
      if (index == 0) {
        this.showText = ""
        this.showDetail = false
      }
    },
  },
}
</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 {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .leftImg {
          width: 132px;
          height: 98px;
          border-radius: 4px;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .rightCon {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 98px;
          .rc_title {
            font-size: 16px;
            font-family: AlibabaPuHuiTiR;
            color: #333333;
          }
          .rc_date {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #999999;
            margin-top: 8px;
          }
          .bottom {
            cursor: pointer;
            width: 68px;
            height: 28px;
            background: rgba(78, 104, 255, 0.1);
            border-radius: 16px;
            text-align: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #4e68ff;
            line-height: 28px;
            &:hover {
              background: rgba(78, 104, 255, 0.2);
            }
          }
        }
      }
    }
  }
  .right_content {
    width: calc(100% - 208px);
    height: 760px;
    background: #ffffff;
    border-radius: 4px;
    padding: 32px;
  }
}
.breadcum {
  display: flex;

  .before {
    font-size: 16px;
    font-family: AlibabaPuHuiTiR;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    &:hover {
      color: #4e68ff;
    }
  }
  .now {
    margin-left: 5px;
    font-size: 16px;
    font-family: AlibabaPuHuiTiR;
  }
}
</style>
