<template>
  <div class="bank-detail">
    <section class="section">
      <div class="section__body">
        <div class="left-box">
          <el-tabs v-model="activeName">
            <el-tab-pane label="章节练习" name="1">
              <div class="goods-menu">
                <div class="goods-menu__header">
                  <div class="title">这是题库的第一个模块标题</div>
                  <span class="question-num">已做/总数</span>
                  <span class="question-do"></span>
                </div>
                <div class="goods-menu__body">
                  <el-tree
                    class="tree"
                    :highlight-current="false"
                    :data="data"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}</span>
                      <span v-if="!data.children">
                        <span class="question-num">0/14</span>
                        <span class="question-do" @click.stop="doQuestion()"
                          >继续做题</span
                        >
                      </span>
                    </span></el-tree
                  >
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="收藏题集" name="2"> </el-tab-pane>
            <el-tab-pane label="错题集" name="3"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="right-box">
          <div class="right-box__header">
            <div class="title">
              <router-link to="/person-center/my-bank/bank-statistics/123"
                >做题统计></router-link
              >
            </div>
            <div class="content">
              <div class="left">
                <div class="title">总进度</div>
                <div class="note">2.5%</div>
              </div>
              <div class="right">
                <div class="title"><span class="blue">已答题</span>/未答题</div>
                <div class="note"><span class="blue">25</span>/1000</div>
              </div>
            </div>
          </div>
          <div class="right-box__body">
            <div class="title">
              推荐题库
              <span class="more">更多></span>
            </div>
            <ul class="list">
              <li
                class="course-item"
                v-for="(item, index) in 5"
                :key="index"
                @click="goodsDetail()"
              >
                <div class="course-item__img">
                  <div class="note">2022</div>
                </div>
                <div class="course-item__title">
                  2022年二建建设工程法规及相关知识（黄金基础班）
                </div>
                <div class="course-item__desc">
                  <div class="price">￥100</div>
                  <a class="add">加购物车</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "BankDetail",
  components: {},
  data() {
    return {
      activeName: "1",
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {},
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-detail {
  .section {
    &__header {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    &__body {
      .left-box {
        float: left;
        width: 768px;

        /deep/.el-tabs__item {
          height: 98px;
          line-height: 98px;
        }
        .goods-menu {
          padding: 0 16px 16px;
          border-radius: 10px;
          background: #f5f7fa;

          &__header {
            display: flex;
            padding-right: 8px;
            align-items: center;
            .title {
              padding: 10px 0;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              flex: 1;
            }

            .question-num {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              text-align: center;
              display: inline-block;
              width: 80px;
            }

            .question-do {
              width: 88px;
            }
          }

          &__body {
            .tree {
              /deep/.el-tree-node:focus > .el-tree-node__content {
                background: none;
              }

              /deep/ .el-tree-node:focus {
                background: none;
              }
              /deep/ .el-tree-node:hover {
                background: none;
              }

              /deep/ .el-tree-node__content:hover {
                background: none;
              }

              /deep/ .el-tree-node__content:focus {
                background: none;
              }

              /deep/ .el-tree-node__content {
                padding-top: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid #eeeeee;
                height: auto;
              }
              .custom-tree-node {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                padding-right: 8px;

                .question-num {
                  font-size: 16px;
                  text-align: center;
                  display: inline-block;
                  width: 80px;
                }

                .question-do {
                  display: inline-block;
                  width: 88px;
                  height: 32px;
                  background: #3f8dfd;
                  border-radius: 16px;
                  text-align: center;
                  line-height: 32px;
                  color: #fff;
                }
              }
            }
          }
        }
      }

      .right-box {
        width: 300px;
        float: right;

        &__header {
          height: 98px;
          border-bottom: 2px solid #e4e7ed;

          .title {
            cursor: pointer;
            height: 32px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 32px;
          }

          .content {
            height: 64px;
            font-size: 0;
            .left {
              width: 50%;
              display: inline-block;
              border-right: 1px solid #e4e7ed;
              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
              }

              .note {
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #3f8dfd;
              }
            }

            .right {
              text-align: center;
              display: inline-block;
              width: 50%;
              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
                .blue {
                  color: #3f8dfd;
                }
              }

              .note {
                font-size: 24px;
                font-family: Microsoft YaHei;
                color: #999999;
                .blue {
                  font-size: 24px;
                  color: #3f8dfd;
                }
              }
            }
          }
        }

        &__body {
          .title {
            margin-top: 15px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
            position: relative;

            .more {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              position: absolute;
              right: 0;
            }
          }

          .list {
            .course-item {
              margin: 110px 0 0;
              width: 300px;
              height: 178px;
              background: #ffffff;
              box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
              border-radius: 10px;
              position: relative;
              background: #fff;
              padding-top: 100px;

              &__img {
                width: 280px;
                height: 178px;
                background: #ffffff;
                box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
                border-radius: 10px;
                position: absolute;
                left: 10px;
                top: -78px;
                background: rgba(122, 136, 246, 1);
                overflow: hidden;

                .note {
                  width: 80px;
                  height: 24px;
                  background: #d94404;
                  box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
                  border-radius: 10px 0px 20px 0px;
                  text-align: center;
                  line-height: 24px;
                  color: #fff;
                }
              }

              &__title {
                margin: 0 8px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                line-height: 24px;
              }

              &__desc {
                height: 32px;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                margin-left: 8px;
                display: flex;
                justify-content: space-between;

                .price {
                  font-size: 18px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #ff2d55;
                  line-height: 32px;
                }

                .add {
                  display: block;
                  width: 118px;
                  height: 32px;
                  line-height: 30px;
                  background: #f2f4f7;
                  border-radius: 10px 0px 10px 0px;
                  font-size: 16px;
                  color: #3f8dfd;
                  text-align: center;

                  &:hover {
                    background: #3f8dfd;
                    color: #f2f4f7;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
