<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="!showText" 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="leftImg">
            <img src="~@/assets/img/Home/shenghuo.png" alt="" />
          </div>
          <div class="rightCon">
            <div class="top">
              <div class="rc_title">{{ item.title }}</div>
              <div class="rc_date">{{ item.time }}</div>
            </div>
            <div class="bottom" @click="viewDetail(index)">查看</div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="showText" 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>
export default {
  data() {
    return {
      activeBar: 0,
      leftBar: [
        {
          name: "筛查",
          list: [
            {
              id: 1,
              title: "筛查数据的科学性",
              text: "123",
              time: "2022/06-30",
            },
            {
              id: 2,
              title: "筛查数据的科学性",
              text: "1",
              time: "2022/06-30",
            },
          ],
        },
        {
          name: "生活",
        },
        {
          name: "医学知识",
        },
        {
          name: "其他",
        },
      ],
      showText: "",
      showTitle: [],
    }
  },
  mounted() {
    console.log(this.$route)
    if (this.$route.query.tabIndex) {
      this.activeBar = this.$route.query.tabIndex
    }
  },
  methods: {
    changeActive(i) {
      this.activeBar = i
      this.showText = ""
    },
    viewDetail(i) {
      this.showText = this.leftBar[this.activeBar].list[i].text
      this.showTitle[0] = this.leftBar[this.activeBar].name
      this.showTitle[1] = this.leftBar[this.activeBar].list[i].title
      console.log(this.showText)
    },
    back(index) {
      if (index == 0) {
        this.showText = ""
      }
    },
  },
}
</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 {
        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;
          }
          .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>