<template>
  <div class="growth" v-loading="loading" id="scrollContainer">
    <div class="growth-left">
      <div class="navbar">
        <div style="display: flex; flex: 1">
          <div class="nav-title">我的专业力必修</div>
        </div>
      </div>

      <div class="growth-item" v-for="item of list" :id="item.id">
        <div class="growth-nav">
          <div class="growth-name">{{ item.growthName }}</div>
          <div class="f-a-c">
            <div
              class="growth-state"
              :style="{
                color:
                  item.learningState === 0
                    ? '#999999'
                    : item.learningState === 1
                    ? '#6ba158'
                    : '#F2903D',
              }"
            >
              {{
                item.learningState === 0
                  ? "未开始"
                  : item.learningState === 1
                  ? "已完成"
                  : "进行中"
              }}
            </div>
            <div class="growth-btn" @click="jumpRouter(item)">去学习</div>
          </div>
        </div>
        <template v-if="item.description">
          <div class="tip-title">说明</div>
          <div class="tip-content">
            {{ item.description || "暂无说明" }}
          </div>
        </template>

        <div class="progress-title">学习进度</div>

        <div class="progress-content">
          <div class="f-j-b" style="margin-bottom: 10px">
            <div class="f-a-c">
              <div style="font-size: 16px; color: #333333">必修进度</div>
              <div style="font-size: 18px; color: #999999; margin-left: 12px">
                {{ item.requiredTaskCompletedNum }}/{{ item.requiredTaskNum }}
              </div>
            </div>
            <div style="font-size: 18px; color: #0077ec">
              {{ requiredTaskCompletionRate(item) }}%
            </div>
          </div>
          <el-progress
            :stroke-width="6"
            :show-text="false"
            :percentage="requiredTaskCompletionRate(item)"
            color="#0077EC"
          ></el-progress>
        </div>
        <template v-if="item.electiveTaskNum !== 0">
          <div class="progress-content">
            <div class="f-j-b" style="margin-bottom: 10px">
              <div class="f-a-c">
                <div style="font-size: 16px; color: #333333">选修进度</div>
                <div style="font-size: 18px; color: #999999; margin-left: 12px">
                  {{ item.electiveTaskCompletedNum }}/{{ item.electiveTaskNum }}
                </div>
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="`还需完成${item.electivePoorNum}个选修任务`"
                  placement="top-start"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div style="font-size: 18px; color: #0077ec">
                {{ electiveTaskCompletionRate(item) }}%
              </div>
            </div>
            <el-progress
              :stroke-width="6"
              :show-text="false"
              color="#0077EC"
              :percentage="electiveTaskCompletionRate(item)"
            ></el-progress>
          </div>
        </template>
        <div class="progress-content">
          <div class="f-j-b" style="margin-bottom: 10px">
            <div class="f-a-c">
              <div style="font-size: 16px; color: #333333">总进度</div>
              <div style="font-size: 18px; color: #999999; margin-left: 12px">
                {{ item.totalTaskCompletedNum }}/{{ item.totalTaskNum }}
              </div>
            </div>
            <div style="font-size: 18px; color: #0077ec">
              {{ totalTaskCompletionRate(item) }}%
            </div>
          </div>
          <el-progress
            :stroke-width="6"
            :show-text="false"
            color="#0077EC"
            :percentage="totalTaskCompletionRate(item)"
          ></el-progress>
        </div>
        <div class="growth-bg-icon">
          <img src="@/assets/images/growth/growth-bg-icon.png" />
        </div>
      </div>
      <template v-if="!list.length">
        <div class="empty">
          <el-empty :image-size="200"></el-empty>
        </div>
      </template>
    </div>
    <!-- <template v-if="!list || list.length < 2">
      <div class="growth-right">
        <div class="title">专业力必修</div>
        <div
          :key="item.id"
          class="item-growth"
          :class="activeItem.id == item.id ? 'active' : ''"
          v-for="item of list"
        >
          <div class="icon"></div>
          <div @click="handlerAnchor(item)">
            {{ item.growthName }}
          </div>
        </div>
      </div>
    </template> -->
  </div>
</template>
<script>
import { listData, getTotalGrowthTaskDetail } from "@/api/growth/growthpath";
export default {
  data() {
    return {
      list: [],
      loading: false,
      totalData: {},
      activeItem: {},
    };
  },
  computed: {
    // 完成进度
    totalTaskCompletionRate() {
      return (item) => {
        if (item.totalTaskCompletedNum && item.totalTaskNum) {
          let num = item.totalTaskCompletedNum / item.totalTaskNum;
          num = num * 100;
          num = num.toFixed(0);
          return Number(num);
        } else {
          return 0;
        }
      };
    },
    // 选修进度
    electiveTaskCompletionRate() {
      return (item) => {
        if (item.electiveTaskCompletedNum && item.electiveTaskNum) {
          let num = item.electiveTaskCompletedNum / item.electiveTaskNum;
          num = num * 100;
          num = num.toFixed(0);
          return Number(num);
        } else if (item.electiveTaskNum == 0) {
          return 100;
        } else {
          return 0;
        }
      };
    },
    // 必修进度
    requiredTaskCompletionRate() {
      return (item) => {
        if (item.requiredTaskCompletedNum && item.requiredTaskNum) {
          let num = item.requiredTaskCompletedNum / item.requiredTaskNum;
          num = num * 100;
          num = num.toFixed(0);
          return Number(num);
        } else {
          return 0;
        }
      };
    },
  },
  methods: {
    select(item) {},
    jumpRouter(item) {
      let studentPath = process.env.VUE_APP_STUDENT_PATH;
      let params = encodeURIComponent("routerId=" + item.id);
      this.$router.push(
        "/forward?to=" + studentPath + "/growthList&params=" + params
      );
    },

    handlerAnchor(item, index) {
      this.activeItem = item;
      let dom = document.getElementById(`${item.id}`);
      dom.classList.add("handler-add-padding");
      dom.scrollIntoView({ behavior: "smooth" });
    },
  },
  created() {
    this.loading = true;
    listData().then((res) => {
      this.activeItem = res.data[0];
      this.list = res.data;
      this.loading = false;
    });
    getTotalGrowthTaskDetail().then((res) => {
      this.totalData = res.data;
    });
    // 处理滚动事件的代码
    let that = this;
    window.addEventListener("scroll", function () {
      let dom = document.getElementById(`${that.activeItem.id}`);
      if (dom) {
        dom.classList.remove("handler-add-padding");
      }
    });
  },
};
</script>
<style lang="less" scoped>
.f-a-c {
  display: flex;
  align-items: center;
}
.f-j-b {
  display: flex;
  justify-content: space-between;
}
.f-j-c {
  display: flex;
  justify-content: center;
}
.growth {
  .empty {
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }
  .el-icon-question {
    color: #387df7;
    font-size: 16px;
    margin-left: 5px;
  }
  .handler-add-padding {
    padding: 100px 38px 66px 40px !important;
    margin-top: -80px;
  }
  display: flex;
  .growth-left {
    margin-right: 10px;

    flex: 1;
    .growth-item {
      background: #ffffff;
      padding: 30px 38px 66px 40px;
      margin-bottom: 35px;
      position: relative;
      .growth-bg-icon {
        position: absolute;
        right: 92px;
        bottom: 0;
      }
      .progress-title {
        // font-weight: 700;
        font-size: 18px;
        color: #000000;
        margin: 28px 0 20px 0;
      }
      .progress-content {
        margin-bottom: 28px;
      }
      .tip-title {
        // font-weight: 700;
        font-size: 18px;
        color: #000000;
        margin: 30px 0 10px 0;
      }
      .tip-content {
        font-size: 16px;
        color: #333333;
        line-height: 30px;
      }
      .growth-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 28px;
        border-bottom: 2px solid #f5f5f5;
      }
      .growth-name {
        font-weight: bold;
        font-size: 18px;
        color: #0071ed;
      }
      .growth-state {
        font-size: 15px;
        margin-right: 18px;
      }
      .growth-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 36px;
        background: #f2903d;
        border-radius: 4px;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;
      }
    }
    .navbar {
      display: flex;
      align-items: center;
      height: 90px;
      padding-left: 40px;
      margin-bottom: 10px;
      color: #ffffff;
      background-image: url(../../assets/images/growth/growth-bg.png);
      background-size: 100% 100%;
      .nav-title {
        font-weight: 700;
        font-size: 18px;
        margin-right: 10%;
      }
      .nav-total {
        // margin-left: 15%;
        width: 20%;
      }
      .total-num {
        font-weight: bold;
        font-size: 22px;
      }
    }
  }
  .growth-right {
    width: 30%;
    max-width: 464px;
    margin-bottom: 35px;
    background-color: #ffffff;
    padding: 35px 20px 20px 30px;
    .title {
      font-size: 18px;
      color: #000000;
      font-weight: 700;
      margin-bottom: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item-growth {
      display: flex;
      align-items: center;
      border-radius: 5px;
      font-size: 14px;
      color: #666666;
      padding: 10px 20px 10px 8px;
      cursor: pointer;
    }
    .icon {
      width: 4px;
      height: 4px;
      background: #4c5564;
      border-radius: 50%;
      margin-right: 10px;
    }
    .active {
      background: #e3edfe;
      color: #000;
      .icon {
        background: #0077ec;
      }
    }
  }
}
</style>
