<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="
                        toFixed(
                          (goodsCount.rightNum / goodsCount.doNum) * 100
                        ) || 0
                      "
                      color="#34C759"
                      :stroke-width="10"
                    ></el-progress>
                  </div>
                </div>
                <div class="text">
                  <div class="green">正确：{{ goodsCount.rightNum }}</div>
                  <div class="normal">已做：{{ goodsCount.doNum }}</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="
                        toFixed(
                          (goodsCount.doNum / goodsCount.totalNum) * 100
                        ) || 0
                      "
                      color="#3F8DFD"
                      :stroke-width="10"
                    ></el-progress>
                  </div>
                </div>

                <div class="text">
                  <div class="blue">已做：{{ goodsCount.doNum }}</div>
                  <div class="normal">总数：{{ goodsCount.totalNum }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="goods-menu__body">
            <div class="menu-title">
              <div class="percent-title">正确率</div>
              <div class="num-title">已做/总数</div>
            </div>
            <div class="menu-list">
              <div class="item" v-for="(item, index) in bankList" :key="index">
                <template v-if="item.type == 1">
                  <div class="item__title" @click="moduleExam(item)">
                    <i
                      :class="{
                        'el-icon-caret-right': !item.showList,
                        'el-icon-caret-bottom': item.showList,
                      }"
                    ></i>
                    {{ item.name }}
                  </div>
                  <div class="item__content" v-if="item.showList">
                    <div class="bank-chapter">
                      <div
                        class="bank-chapter__item"
                        v-for="(chapter, chapterIndex) in item.list"
                        :key="chapterIndex"
                      >
                        <div
                          class="bank-chapter__item__text"
                          @click="chapterExam(chapter, item.majorId)"
                        >
                          <i
                            :class="{
                              'el-icon-caret-right': !chapter.showList,
                              'el-icon-caret-bottom': chapter.showList,
                            }"
                          ></i
                          >{{ chapter.name }}
                        </div>

                        <div class="bank-section" v-if="chapter.showList">
                          <div
                            class="bank-section__item"
                            v-for="(section, sectionIndex) in chapter.list"
                            :key="sectionIndex"
                          >
                            <div class="bank-section__item__text">
                              <div class="title">{{ section.examName }}</div>
                            </div>
                            <div class="num">
                              <!-- 练习 -->
                              <template v-if="section.doType == 1">
                                {{
                                  section.doQuestionNum != 0
                                    ? (
                                        (section.rightQuestionNum /
                                          section.doQuestionNum) *
                                        100
                                      ).toFixed(0) + "%"
                                    : 0 + "%"
                                }}
                              </template>
                              <!-- 考试 -->
                              <template v-if="section.doType == 2">
                                {{
                                  section.totalQuestionNum != 0
                                    ? (
                                        (section.rightQuestionNum /
                                          section.totalQuestionNum) *
                                        100
                                      ).toFixed(0) + "%"
                                    : 0 + "%"
                                }}
                              </template>
                            </div>
                            <div class="num">
                              {{
                                section.doQuestionNum +
                                "/" +
                                section.totalQuestionNum
                              }}
                            </div>
                            <el-button
                              type="primary"
                              @click="goDetail(section)"
                              class="btn"
                              >详情</el-button
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>

                <template v-if="item.type == 2">
                  <div class="item__content">
                    <div class="bank-chapter">
                      <div class="bank-chapter__item">
                        <div
                          class="bank-chapter__item__text"
                          @click="chapterExam(item, 0)"
                        >
                          <i
                            :class="{
                              'el-icon-caret-right': !item.showList,
                              'el-icon-caret-bottom': item.showList,
                            }"
                          ></i
                          >{{ item.name }}
                        </div>

                        <div class="bank-section" v-if="item.showList">
                          <div
                            class="bank-section__item"
                            v-for="(section, sectionIndex) in item.list"
                            :key="sectionIndex"
                          >
                            <div class="bank-section__item__text">
                              <div class="title">{{ section.examName }}</div>
                            </div>
                            <div class="num">
                              <!-- 练习 -->
                              <template v-if="section.doType == 1">
                                {{
                                  section.doQuestionNum != 0
                                    ? (
                                        (section.rightQuestionNum /
                                          section.doQuestionNum) *
                                        100
                                      ).toFixed(0) + "%"
                                    : 0 + "%"
                                }}
                              </template>
                              <!-- 考试 -->
                              <template v-if="section.doType == 2">
                                {{
                                  section.totalQuestionNum != 0
                                    ? (
                                        (section.rightQuestionNum /
                                          section.totalQuestionNum) *
                                        100
                                      ).toFixed(0) + "%"
                                    : 0 + "%"
                                }}
                              </template>
                            </div>
                            <div class="num">
                              {{
                                section.doQuestionNum +
                                "/" +
                                section.totalQuestionNum
                              }}
                            </div>
                            <el-button
                              type="primary"
                              @click="goDetail(section)"
                              class="btn"
                              >详情</el-button
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>

                <template v-if="item.type == 3">
                  <div class="item__content">
                    <div class="bank-section">
                      <div class="bank-section__item">
                        <div class="bank-section__item__text">
                          <div class="title">{{ item.name }}</div>
                        </div>
                        <div class="num">
                          <!-- 练习 -->
                          <template v-if="item.doType == 1">
                            {{
                              item.doQuestionNum != 0
                                ? (
                                    (item.rightQuestionNum /
                                      item.doQuestionNum) *
                                    100
                                  ).toFixed(0) + "%"
                                : 0 + "%"
                            }}
                          </template>
                          <!-- 考试 -->
                          <template v-if="item.doType == 2">
                            {{
                              item.totalQuestionNum != 0
                                ? (
                                    (item.rightQuestionNum /
                                      item.totalQuestionNum) *
                                    100
                                  ).toFixed(0) + "%"
                                : 0 + "%"
                            }}
                          </template>
                        </div>
                        <div class="num">
                          {{ item.doQuestionNum + "/" + item.totalQuestionNum }}
                        </div>
                        <el-button
                          type="primary"
                          @click="goDetail(item)"
                          class="btn"
                          >详情</el-button
                        >
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "BankDetail",
  components: {},
  data() {
    return {
      orderGoodsId: "",
      goodsCount: {},
      bankList: [],
      goodsId: 0,
    };
  },
  mounted() {
    this.orderGoodsId = this.$route.query.orderGoodsId || "";
    this.goodsId = this.$route.params.goodsId;
    this.goodsBankQuestionNum();
    this.goodsBankDolist();
  },
  methods: {
    toFixed(num) {
      if (num) {
        let str = String(num).indexOf(".");

        if (str != -1) {
          return +num.toFixed(2);
        } else {
          return num;
        }
      } else {
        return 0;
      }
    },
    handleNodeClick(data) {
      console.log(data);
    },
    goDetail(section) {
      this.$router.push({
        path: "/person-center/my-bank/bank-explain-detail/" + this.goodsId,
        query: {
          examId: section.examId || section.majorId,
          orderGoodsId: this.orderGoodsId,
        },
      });
    },

    chapterExam(chapter, moduleId) {
      if (chapter.list.length) {
        chapter.showList = !chapter.showList;
        return;
      }
      this.$request
        .goodsExamDolist({
          moduleExamId: moduleId,
          chapterExamId: chapter.chapterExamId || chapter.majorId,
          orderGoodsId: this.orderGoodsId,
          goodsId: this.goodsId,
        })
        .then((res) => {
          chapter.showList = !chapter.showList;
          chapter.list = res.data;
        });
    },

    moduleExam(module) {
      if (module.list.length) {
        module.showList = !module.showList;
        return;
      }
      this.$request
        .goodsChapterDolist({
          moduleExamId: module.majorId,
          orderGoodsId: this.orderGoodsId,
          goodsId: this.goodsId,
        })
        .then((res) => {
          res.data.forEach((item) => {
            item.showList = false;
            item.list = [];
          });
          module.showList = !module.showList;
          module.list = res.data;
        });
    },

    goodsBankDolist() {
      this.$request
        .goodsBankDolist({
          orderGoodsId: this.orderGoodsId,
          goodsId: this.goodsId,
        })
        .then((res) => {
          console.log(res);
          res.data.forEach((item) => {
            item.showList = false;
            item.list = [];
          });
          this.bankList = res.data;
        });
    },
    goodsBankQuestionNum() {
      this.$request.goodsBankQuestionNum(this.orderGoodsId).then((res) => {
        this.goodsCount = res.data;
      });
    },
  },
};
</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 {
              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;

          .menu-title {
            padding: 10px;
            text-align: right;
            .percent-title {
              width: 80px;
              display: inline-block;
              text-align: center;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-right: 20px;
            }
            .num-title {
              width: 80px;
              display: inline-block;
              text-align: center;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-right: 128px;
            }
          }

          .menu-list {
            .item {
              overflow: hidden;
              background: #fff;
              padding: 0 10px;

              &__title {
                padding: 20px 0;
                cursor: pointer;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #333333;
                border-bottom: 1px solid #eeeeee;

                .note {
                  display: inline-block;
                  margin-left: 20px;
                  width: 40px;
                  height: 24px;
                  border: 1px solid #ff3b30;
                  border-radius: 8px;
                  line-height: 22px;
                  color: #ff3b30;
                  text-align: center;
                }
              }

              &__content {
                background: #fff;

                .bank-chapter {
                  margin-left: 4px;

                  &__item {
                    font-size: 16px;
                    align-items: center;

                    &__text {
                      padding-top: 20px;
                      padding-bottom: 20px;
                      border-bottom: 1px solid #eeeeee;
                      cursor: pointer;
                      flex: 1;
                    }
                  }
                }

                .bank-section {
                  margin-left: 14px;

                  &__item {
                    padding-top: 20px;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #eeeeee;
                    font-size: 16px;
                    display: flex;
                    align-items: center;

                    &__text {
                      flex: 1;
                    }

                    .num {
                      width: 80px;
                      text-align: center;
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #999999;
                      margin-right: 20px;
                    }

                    .btn {
                      margin-right: 20px;
                      width: 88px;
                      height: 32px;
                      padding: 0;
                      border-radius: 16px;
                      line-height: 32px;
                      text-align: center;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
