<template>
  <view class="growth">
    <u-navbar
      title="专业力必修"
      bgColor="#3e7eff"
      :safeAreaInsetTop="true"
      placeholder
      leftIconColor="#fff"
      @leftClick="leftClick"
      fixed
      titleStyle="color:#fff"
    >
      <template slot="right">
        <view class="select-growth" @click="show = true" v-if="selectData.id">
          <u-image
            width="30rpx"
            height="30rpx"
            src="@/static/images/growth/qiehuan.png"
          ></u-image>
          <div style="margin-left: 4px">切换岗位</div>
        </view>
      </template>
    </u-navbar>

    <!-- 有数据 -->
    <template v-if="selectData.id">
      <view class="growth-name">
        {{ selectData.growthName }}
      </view>
      <view class="growth-state">
        <view
          :style="{
            color:
              selectData.learningState === 0
                ? '#fe9400'
                : selectData.learningState === 1
                ? '#6ba158'
                : '#ff8726',
          }"
          >{{
            selectData.learningState === 0
              ? "学习未开始"
              : selectData.learningState === 1
              ? "学习已完成"
              : "学习进行中"
          }}</view
        >
      </view>
      <view class="growth-tip" v-if="selectData.description">
        <view class="growth-tip-content">
          <view class="tip-title"> 说明 </view>
          <view class="tip-content">
            {{ selectData.description || "暂无说明" }}</view
          >
        </view>
      </view>
      <view class="growth-progress">
        <view class="progress-title">
          <view class="line"></view>
          <view class="text">{{ `学习进度` }}</view>
          <view class="line"></view>
        </view>
        <view class="progress-total">
          {{ `总任务：${selectData.totalTaskNum} 个` }}
        </view>
        <view class="progress-card">
          <view class="progress-card-item">
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <view class="label">必修进度</view>
              <view class="rate">{{ requiredTaskCompletionRate }}%</view>
            </view>
            <view class="progress">
              <u-line-progress
                active-color="#0077EC"
                :showText="false"
                inactive-color="#E5E7EB"
                :percentage="requiredTaskCompletionRate"
                height="3"
              ></u-line-progress>
            </view>
          </view>
          <template v-if="selectData.electiveTaskNum !== 0">
            <view class="progress-card-item">
              <view
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <view class="label">选修进度</view>
                <view class="rate">{{ electiveTaskCompletionRate }}%</view>
              </view>
              <view class="progress">
                <u-line-progress
                  active-color="#0077EC"
                  :showText="false"
                  inactive-color="#E5E7EB"
                  :percentage="electiveTaskCompletionRate"
                  height="3"
                ></u-line-progress>
              </view>
            </view>
          </template>
          <view class="progress-card-item">
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <view class="label">总进度</view>
              <view class="rate">{{ totalTaskCompletionRate }}%</view>
            </view>
            <view class="progress">
              <u-line-progress
                active-color="#0077EC"
                :showText="false"
                inactive-color="#E5E7EB"
                :percentage="totalTaskCompletionRate"
                height="3"
              ></u-line-progress>
            </view>
          </view>
        </view>
      </view>
      <view class="confirm" @click="loaddetail">
        <view>{{
          selectData.learningState == 2 ? "继续学习" : "开始学习"
        }}</view>
      </view>
    </template>
    <!-- 无数据 -->
    <template v-else>
      <u-empty marginTop="200rpx" mode="data"> </u-empty>
    </template>

    <u-picker
      :show="show"
      :columns="[list]"
      keyName="growthName"
      @cancel="show = false"
      @confirm="select"
    ></u-picker>
  </view>
</template>

<script>
import { studentGrowthList } from "@/api/modules/growth";
export default {
  data() {
    return {
      selectData: {
        electiveTaskNum: 0,
      },
      list: [],
      // 是否展示选框
      show: false,
    };
  },
  computed: {
    // 完成进度
    totalTaskCompletionRate() {
      if (
        this.selectData.totalTaskCompletedNum &&
        this.selectData.totalTaskNum
      ) {
        let num =
          this.selectData.totalTaskCompletedNum / this.selectData.totalTaskNum;
        num = num * 100;
        num = num.toFixed(0);
        return Number(num);
      } else {
        return 0;
      }
    },
    // 选修进度
    electiveTaskCompletionRate() {
      if (
        this.selectData.electiveTaskCompletedNum &&
        this.selectData.electiveTaskNum
      ) {
        let num =
          this.selectData.electiveTaskCompletedNum /
          this.selectData.electiveTaskNum;
        num = num * 100;
        num = num.toFixed(0);
        return Number(num);
      } else if (this.selectData.electiveTaskNum === 0) {
        return 100;
      } else {
        return 0;
      }
    },
    // 必修进度
    requiredTaskCompletionRate() {
      if (
        this.selectData.requiredTaskCompletedNum &&
        this.selectData.requiredTaskNum
      ) {
        let num =
          this.selectData.requiredTaskCompletedNum /
          this.selectData.requiredTaskNum;
        num = num * 100;
        num = num.toFixed(0);
        return Number(num);
      } else {
        return 0;
      }
    },
  },
  onLoad: function (options) {
    // 获取专业力必修
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    studentGrowthList().then((res) => {
      this.list = res.data;
      if (this.list[0]) {
        this.selectData = this.list[0];
      }
      uni.hideLoading()
    });
  },
  methods: {
    leftClick() {
      this.$router.push({ path: "/pages/my/index" });
    },
    toBack() {
      uni.navigateBack();
    },
    // 切换任务
    select({ value }) {
      this.selectData = value[0];
      this.show = false;
    },
    // 学习任务跳转详情
    loaddetail(task) {
      let taskUrl = "";
      let params = encodeURIComponent("routerId=" + this.selectData.id);
      taskUrl = "/pages/forward?to=/student-h5/growthDetails&params=" + params;
      uni.navigateTo({
        url: taskUrl,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.growth {
  background-image: url(@/static/images/growth/bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
  font-family: PingFang SC;
  .select-growth {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 188rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #ffffff;
  }
  .confirm {
    display: flex;
    justify-content: center;
    margin-top: 114rpx;
    margin-bottom: 50px;
    view {
      width: 560rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: linear-gradient(0deg, #266eff 0%, #528bff 100%);
      box-shadow: 0px 5rpx 15rpx 0rpx rgba(42, 112, 255, 0.5);
      border-radius: 44rpx;
      font-weight: 700;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  .growth-progress {
    margin-top: 35rpx;
    .progress-card {
      background: #ffffff;
      padding: 30rpx 27rpx 21rpx 27rpx;
      margin: 42rpx 50rpx 0 50rpx;
      box-shadow: 0px 10px 15px 0px rgba(44, 106, 231, 0.2);
      border-radius: 16rpx;
      .progress-card-item {
        .label {
          font-weight: 700;
          font-size: 28rpx;
          color: #333333;
        }
        .rate {
          font-weight: 700;

          font-size: 30rpx;
          color: #0077ec;
        }
        .progress {
          margin-top: 17rpx;
          margin-bottom: 44rpx;
        }
      }
    }
    .progress-total {
      text-align: center;
      font-size: 28rpx;
      color: #ffffff;
      margin-top: 14rpx;
    }
    .progress-title {
      display: flex;
      justify-content: center;
      align-items: center;
      .line {
        width: 40rpx;
        height: 6rpx;
        background: #ffffff;
        border-radius: 3rpx;
        opacity: 0.8;
        margin: 0 32rpx;
      }
      .text {
        font-size: 36rpx;
        color: #ffffff;
        opacity: 0.8;
      }
    }
  }
  .growth-tip {
    background-image: url(@/static/images/growth/card-top.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 38rpx 26rpx 0 26rpx;
    padding: 45rpx 24rpx 0 24rpx;
    .growth-tip-content {
      background: linear-gradient(0deg, #dfe9ff 0%, #ffffff 100%);
      border-radius: 0px 0px 16px 16px;
      word-wrap: break-word;
      .tip-title {
        margin-left: 38rpx;
        font-weight: 700;
        color: #2f3f5a;
      }
      .tip-content {
        margin: 0 37rpx 0 46rpx;
        padding-bottom: 37rpx;
        font-size: 28rpx;
        color: #333333;
        line-height: 30px;
      }
    }
  }
  .growth-name {
    font-size: 30rpx;
    color: #ffffff;
    line-height: 40rpx;
    margin: 24rpx 98rpx 24rpx 47rpx;
  }
  .growth-state {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 28rpx;
    justify-content: end;
    view {
      padding: 16rpx 26rpx;
      background: #ffffff;
      border-radius: 50rpx 0px 0px 50rpx;
    }
  }
}
</style>
