<template>
  <view class="growth">
    <page-title :showBack="true">专业力必修</page-title>
    <view class="title">
      <view class="title-text" @click="openTip">
        <view style="margin-right: 8rpx">专业力必修</view>
        <u-icon name="question-circle-fill" color="#686868" size="20"></u-icon>
      </view>
      <view v-if="selectData" class="select" @click="show = true">
        <image src="../../static/images/icon/qiehuan.jpg"></image>
        <view>切换</view>
      </view>
    </view>
    <!-- 有数据 -->
    <template v-if="selectData">
      <view class="container">
        <view class="growth-name">{{ selectData.growthName }}</view>
        <view class="growth-state">
          <view>学习状态：</view>
          <view
            :style="{
              color:
                selectData.learningState === 0
                  ? '#fe9400'
                  : selectData.learningState === 1
                  ? '#6ba158'
                  : '#0079ee',
            }"
            >{{
              selectData.learningState === 0
                ? "未开始"
                : selectData.learningState === 1
                ? "已完成"
                : "进行中"
            }}</view
          >
        </view>
        <view class="growth-tip">
          <view class="tip-title">
            <image src="../../static/images/shuoming.jpg" />
            <view>说明</view>
          </view>
          <view class="tip-text">
            {{ selectData.description || "暂无说明" }}
          </view>
        </view>
        <view class="growth-progress">
          <view class="progress-title">
            <image src="../../static/images/jindu.jpg" />
            <view>学习进度</view>
          </view>
          <view class="progress-text">
            <view class="total">总任务：{{ selectData.totalTaskNum }}个</view>
            <view class="progress-item">
              <view class="label"> 必修进度</view>
              <view class="value">
                <u-line-progress
                  active-color="#2979ff"
                  :showText="false"
                  inactive-color="#a6d0f9"
                  :percentage="requiredTaskCompletionRate"
                  height="20rpx"
                ></u-line-progress>
              </view>
              <view class="text">{{ requiredTaskCompletionRate }}%</view>
            </view>
            <view class="progress-item">
              <view class="label"> 选修进度</view>
              <view class="value">
                <u-line-progress
                  active-color="#2979ff"
                  :showText="false"
                  inactive-color="#a6d0f9"
                  :percentage="electiveTaskCompletionRate"
                  height="20rpx"
                ></u-line-progress>
              </view>
              <view class="text">{{ electiveTaskCompletionRate }}%</view>
            </view>
            <view class="progress-item">
              <view class="label"> 总进度</view>
              <view class="value">
                <u-line-progress
                  active-color="#2979ff"
                  :showText="false"
                  inactive-color="#a6d0f9"
                  :percentage="totalTaskCompletionRate"
                  height="20rpx"
                ></u-line-progress>
              </view>
              <view class="text">{{ totalTaskCompletionRate }}%</view>
            </view>
          </view>
        </view>
        <view class="confirm" @click="loaddetail">
          <view>学习</view>
        </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: null,
      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 {
        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) {
    // 获取专业力必修
    studentGrowthList().then((res) => {
      this.list = res.data;
      this.selectData = this.list[0];
    });
  },
  methods: {
    // 切换任务
    select({ value }) {
      this.selectData = value[0];
      this.show = false;
    },
    openTip() {
      uni.showModal({
        showCancel: false,
        content:
          "根据您所在的组织、标准岗位、任职资格等级，已为您匹配专业力必修任务，抓紧时间学习吧～",
      });
    },
    // 学习任务跳转详情
    loaddetail(task) {
      let taskUrl = "";
      if (this.selectData.template == 1) {
        //路径图
        let params = encodeURIComponent("routerId=" + this.selectData.id);
        // "/pages/forward?to=/fe-student-h5-release/growthPath&params=" + params;
        taskUrl = "/pages/forward?to=/student-h5/growthPath&params=" + params;
      } else {
        //任务列表
        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>
page {
  background-color: #fff;
}
.growth {
  .container {
    margin: 0 20rpx;
    background-image: linear-gradient(to bottom, #e2eefd 0rpx, #fff 200rpx);
    border: 1rpx solid #e2eefd;
    border-radius: 20rpx 20rpx 0 0;
    padding: 16rpx 28rpx;
    .confirm {
      display: flex;
      justify-content: center;
      padding: 45rpx 0 30rpx 0;
      view {
        width: 190rpx;
        height: 64rpx;
        border-radius: 10rpx;
        background-color: #0079ee;
        box-sizing: border-box;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .progress-item {
      display: flex;
      align-items: center;
      margin-bottom: 28rpx;
      .label {
        width: 160rpx;
      }
      .value {
        flex: 1;
      }
      .text {
        color: #0079ee;
        margin-left: 8rpx;
      }
    }
    .progress-title {
      margin-top: 34rpx;
    }
    .progress-text {
      padding-left: 14rpx;
      .total {
        margin: 64rpx 0 56rpx 0;
      }
    }
    .tip-title,
    .progress-title {
      display: flex;
      align-items: center;
      image {
        width: 44rpx;
        height: 44rpx;
      }
      view {
        font-weight: 650;
        color: #333333;
        margin-left: 10rpx;
      }
    }
    .tip-text {
      margin-top: 28rpx;
      color: #333333;
      line-height: 60rpx;
    }
    .growth-name {
      font-size: 28rpx;
      color: #0079ee;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
    }
    .growth-state {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      justify-content: end;
      margin-top: 40rpx;
      color: #333333;
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 40rpx;
  }
  .title-text {
    display: flex;
    align-items: center;
  }
  .select {
    display: flex;
    flex-direction: column;
    font-size: 20rpx;
    align-items: center;
    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}
</style>
