<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 class="right_list">
      <div class="list_title">
        {{ leftBar[activeBar].name }}
      </div>
      <ul class="list">
        <li v-for="(item, index) in leftBar[activeBar].list" :key="index">
          <div class="left_text">
            <div class="circle"></div>
            <div class="title">{{ item.title }}</div>
          </div>

          <div class="rig_date">
            {{ item.time }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeBar: 0,
      leftBar: [
        {
          name: "筛查技术方案",
          list: [
            {
              title: "筛查数据的科学性",
              text: "",
              time: "2022/06-30",
            },
            {
              title: "筛查数据的科学性",
              text: "",
              time: "2022/06-30",
            },
          ],
        },
        {
          name: "筛查指南",
        },
        {
          name: "学术成果",
        },
        {
          name: "项目进展与成果",
        },
      ],
    }
  },
  watch: {},
  mounted() {
    if (this.$route.query.tabIndex) {
      this.activeBar = this.$route.query.tabIndex
    }
  },
  methods: {
    changeActive(i) {
      this.activeBar = i
      // this.$router.replace("/scientificresearch")
    },
  },
}
</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;
      // 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;
        .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>