<template>
  <div class="bank-statistics">
    <section class="section">
      <div class="section__header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item, index) in $route.matched"
            :key="index"
            :to="{ path: item.path }"
            >{{ item.name }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="section__body">
        <div class="goods-menu">
          <div class="goods-menu__header clearfix">
            <div class="chart">
              <div class="chart__title">正确率统计（不含简答和案例题）</div>
              <div class="chart__content">
                <div class="circle-wrap">
                  <div class="circle">
                    <el-progress
                      type="circle"
                      :percentage="25"
                      color="#34C759"
                      :stroke-width="10"
                    ></el-progress>
                  </div>
                </div>
                <div class="text">
                  <div class="green">正确：72</div>
                  <div class="normal">已做：100</div>
                </div>
              </div>
            </div>
            <div class="chart">
              <div class="chart__title">做题进度（不含简答和案例题）</div>
              <div class="chart__content">
                <div class="circle-wrap">
                  <div class="circle">
                    <el-progress
                      type="circle"
                      :percentage="25"
                      color="#3F8DFD"
                      :stroke-width="10"
                    ></el-progress>
                  </div>
                </div>

                <div class="text">
                  <div class="blue">已做：72</div>
                  <div class="normal">总数：100</div>
                </div>
              </div>
            </div>
          </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="goDetail()">详情</span>
                </span>
              </span></el-tree
            >
          </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() {
    console.log(this.$route);
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    goDetail() {
      this.$router.push({
        path: "/person-center/my-bank/bank-explain-detail/123",
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-statistics {
  .section {
    overflow: hidden;
    &__header {
      height: 20px;
      margin-top: 20px;
    }

    &__body {
      .goods-menu {
        &__header {
          .chart {
            margin-right: 24px;
            padding: 16px;
            float: left;
            width: 300px;
            height: 240px;
            background: #ffffff;
            border: 1px solid #eeeeee;
            border-radius: 8px;

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

            &__content {
              margin-top: 20px;
              display: flex;
              align-items: center;

              .circle-wrap {
                display: table;

                .circle {
                  display: table-cell;
                  text-align: center;
                  vertical-align: middle;
                  width: 158px;
                  height: 162px;
                }
              }

              .text {
                margin-left: 24px;
                flex: 1;
                .green {
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #34c759;
                  line-height: 24px;
                  margin: 20px 0;
                }

                .blue {
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #3f8dfd;
                  line-height: 24px;
                  margin: 20px 0;
                }

                .normal {
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #999999;
                  line-height: 24px;
                  margin: 20px 0;
                }
              }
            }
          }
        }

        &__body {
          margin-top: 32px;
          padding: 16px;
          border-radius: 10px;
          background: #f5f7fa;
          .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;
              }
            }
          }
        }
      }
    }
  }
}
</style>
