<template>
  <view class="min-height">
    <scroll-view class="tab-box" scroll-x="true">
      <view :class="['tab-item',{active:tabIndex === index}]" v-for="(item,index) in tabList" :key="index"
            @click="handTab(index)">
        {{ item.name }}
      </view>
    </scroll-view>
    <view class="layout layout-train">
      <view class="title-box">
        <view class="title">培训任务</view>
        <view class="link"></view>
      </view>
      <view class="train-box">
        <view v-for="(item,index) in trainList" :key="index" class="mb-25"
              @click="$jump(`/pages/promote/learn?courseId=${item.courseId}&trainId=${item.id}`)">
          <view class="train-item" v-if="item.cover">
            <view class="img">
              <uv-image :src="item.cover" radius="20rpx" width="700rpx"
                        height="280rpx"></uv-image>
            </view>
            <view class="name">
              <uv-text :text="item.title" size="28rpx" lineHeight="40rpx" :lines="1"
                       align="center" bold
                       color="#000"></uv-text>
              <uv-text v-if="item.endDate" :text="`结束日期:${item.endDate}`" size="24rpx"
                       lineHeight="40rpx" :lines="1"
                       align="center"
                       color="#AAA"></uv-text>
              <uv-text :text="`已学:${(item.learnSec / 3600).toFixed(2)}个学时`" size="24rpx"
                       lineHeight="40rpx" :lines="1"
                       align="center"
                       color="#AAA"></uv-text>
            </view>
            <view class="text">
              <uv-line-progress :percentage="item.progress" activeColor="#00d61d"></uv-line-progress>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uv-gap height="30rpx" bgColor="#f4f4f4"></uv-gap>
    <view class="layout layout-plan">
      <view class="title-box" @click="taskLink">
        <view class="title">考试任务</view>
        <view class="link"></view>
      </view>
      <view class="exam-box">
        <view class="exam-item" v-for="(item,index) in examList"
              :key="index"
              @click="resultLink(item)">
          <view class="info info-1">
            <view class="name">
              <uv-text :text="item.paper.title" size="24rpx" lineHeight="40rpx" :lines="1" bold></uv-text>
            </view>
            <view class="fen">考试类型: {{ ['线上', '线下'][item.type] }}</view>
            <template v-if="item.type === 1 && item.trainExamPeopleInRoom">
              <view v-if="item.trainExamPeopleInRoom.roomConfig" class="fen">考场:
                {{ item.trainExamPeopleInRoom.roomConfig.position }}
              </view>
              <view v-if="item.trainExamPeopleInRoom.examSession" class="fen">考试时间:
                {{ item.trainExamPeopleInRoom.examSession.startTime }} ~
                {{ item.trainExamPeopleInRoom.examSession.endTime }}
              </view>
            </template>
            <view class="fen" v-if="item.type === 0">考试截止日期: {{ item.examDate }}</view>
            <view class="fen" v-if="item.workTypeLists && item.workTypeLists.length > 0">考试科目:
              {{
                item.workTypeLists[0].course.title
              }}({{
                ['初级', '中级', '高级', '技师', '高级技师'][item.workTypeLists[0].course.level]
              }})
            </view>
            <view class="fen" v-if="!item.trainExamPeopleInfo">总分 {{ item.paper.totalPoint }} 合格分
              {{ item.paper.passPoint }}
            </view>
            <view class="fen" v-else>
              <template v-if="item.text === '已完成' && item.trainExamPeopleInfo.realScore">
                <view v-if="item.type === 0">
                  <text>考试得分 {{ item.trainExamPeopleInfo.score }}</text>
                  <text class="ml-15" v-if="item.trainExamPeopleInfo.inWhiteList === 0">平时分
                    {{ item.trainExamPeopleInfo.normalScore }}
                  </text>
                  <text class="ml-15">总分
                    {{ item.trainExamPeopleInfo.normalScore + item.trainExamPeopleInfo.score }}
                  </text>
                  <text class="ml-15">实际得分
                    {{ item.trainExamPeopleInfo.realScore }}
                  </text>
                </view>
                <view v-else>
                  <text>考试得分 {{ item.trainExamPeopleInfo.score }}</text>
                  <text class="ml-15">实操得分 {{ item.trainExamPeopleInfo.operateScore }}</text>
                  <text class="ml-15">总分
                    {{ item.trainExamPeopleInfo.realScore }}
                  </text>
                </view>
                <view class="mt-15"
                      :class="[item.trainExamPeopleInfo.totalScore >= 60 ? 'text-green' : 'text-red']"
                      v-if="item.showResult">{{
                    item.trainExamPeopleInfo.totalScore >= 60 ? '合格' : '不合格'
                  }}
                </view>
              </template>
            </view>
            <view class="fen"
                  v-if="item.trainExamPeopleInfo && item.trainExamPeopleInfo.highLevelStatus > 0">
              <text>专家评审结果:</text>
              <text class="ml-15"
                    :class="[item.trainExamPeopleInfo.highLevelStatus === 1 ? 'text-green' : 'text-red']">
                {{ ['待审核', '已通过', '未通过'][item.trainExamPeopleInfo.highLevelStatus] }}
              </text>
            </view>
          </view>
          <mprogress
            :progress="item.progress"
            :activeColor="item.color"
            :valueColor="item.color"
            :valueFontSize="12"
            :valueText="item.text"
            :width="50"
            :borderWidth="4"
          ></mprogress>
        </view>
      </view>
    </view>
    <uv-gap height="30rpx" bgColor="#f4f4f4"></uv-gap>
    <!-- 竞赛任务 -->
    <view class="layout layout-plan">
      <view class="title-box" @click="$jump('/pages/match/match')">
        <view class="title">竞赛任务</view>
        <view class="link"></view>
      </view>
      <view class="exam-box">
        <view class="exam-item" v-for="(item,index) in matchList" :key="index">
          <view class="info info-1">
            <view class="name">
              <uv-text :text="item.title" size="24rpx" lineHeight="40rpx" :lines="1" bold></uv-text>
            </view>
            <view class="between">
              <view class="ren">{{ item.peopleNum }}人</view>
              <view class="progress">
                <uv-line-progress :percentage="item.progress"
                                  :activeColor="item.color"></uv-line-progress>
              </view>
            </view>
          </view>
          <mprogress
            :progress="item.progress"
            :activeColor="item.color"
            :valueColor="item.color"
            :valueFontSize="12"
            :valueText="item.text"
            :width="50"
            :borderWidth="4"
          ></mprogress>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
import mprogress from "@/components/m-progress/mprogress.vue";
import {trainExamListReq, trainInfoUserListReq} from "@/api/trainInfo";
import dayjs from "dayjs";
import {onLoad} from "@dcloudio/uni-app";
import {userTrainListReq} from "@/api/train";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {matchListReq} from "@/api/match";

const tabIndex = ref(3)
const tabList = [
  {id: 1, name: '技能大师工作室'},
  {id: 2, name: '企业级团队'},
  {id: 3, name: '部门级团队'},
  {id: 4, name: '班组级团队'},
]

const handTab = (index) => {
  tabIndex.value = index
}

const trainInfoList = ref([])
const getTrainInfoList = async () => {
  const res = await trainInfoUserListReq()
  trainInfoList.value = []
  if (res) {
    trainInfoList.value = res.data
    if (trainInfoList.value.length > 0) {
      await getExamList(trainInfoList.value[0].trainId)
    }
  }
}

const examList = ref([])
const getExamList = async () => {
  const res = await trainExamListReq({})
  examList.value = []
  if (res) {
    examList.value = res.data.filter(item => {
      return (item.paper && item.trainExamPeopleInfo)
    }).map(item => {
      let progress = 0, text = '未完成', color = '#cacaca'
      if (dayjs(item.examDate).isSame(dayjs())) {
        progress = 50
        color = '#57d801'
        text = '进行中'
      } else if ((item.type === 0 && item.hasResult) || (item.type === 1 && item.trainExamPeopleInfo && item.trainExamPeopleInfo.score > 0)) {
        progress = 100
        color = '#f29900'
        text = '已完成'
      }
      item.progress = progress
      item.color = color
      item.text = text
      // item.showResult = dayjs(item.examDate).isSameOrBefore(dayjs())
      item.showResult = true
      return item
    })
  }
}

const trainList = ref([])
const getTrainList = async () => {
  const {data} = await userTrainListReq({
    withProgress: true,
    page: 1,
    limit: 9999,
    groupType: tabList.value[tabIndex.value].id
  })
  trainList.value = data.list
}

const taskLink = () => {
  uni.navigateTo({
    url: `/pages/promote/task?trainId=${this.trainInfoList[0].trainId}`
  })
}

const matchList = ref([])
const getMatchList = async () => {
  const {data} = await matchListReq({deleted: 0})
  matchList.value = data.map(item => {
    item.process = 50
    item.color = '#57d801'
    item.text = '进行中'
    return item
  })
}

const resultLink = ({
                      id,
                      type,
                      examId,
                      hasResult,
                      paper,
                      examDate,
                      needFinishAdventure,
                      hasFinishAdventure,
                      needFinishNormal,
                      hasFinishNormal
                    }) => {
  if (type === 1) return
  let url
  if (needFinishAdventure === 1 && !hasFinishAdventure) return toast('请先完成游戏学')
  if (needFinishNormal === 1 && !hasFinishNormal) return toast('请先完成常规学')
  // url = `/pages/exam/exam?paperId=${examId}&title=${paper.title}&examType=0&examId=${id}`
  url = `/pages/promote/exam?paperId=${examId}&title=${paper.title}&examType=0&examId=${id}`
  // }
  uni.navigateTo({url})
}

onLoad
(() => {
  getTrainInfoList()
  getTrainList()
  getExamList()
  getMatchList()
})

</script>

<style scoped lang="scss">

.title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;

  .title {
    font-size: 32rpx;
    font-weight: 600;
    line-height: 40rpx;
    color: $black-color;
  }

  .link {
    position: relative;
    padding-right: 30rpx;
    font-size: 24rpx;
    line-height: 32rpx;
    color: $grey-color;

    &::after {
      position: absolute;
      right: 10rpx;
      top: 50%;
      z-index: 90;
      display: block;
      margin-top: -6rpx;
      transform: rotate(45deg);
      content: '';
      width: 12rpx;
      height: 12rpx;
      border-top: 1px solid $grey-color;
      border-right: 1px solid $grey-color;
    }
  }
}

.tab-box {
  white-space: nowrap;
  padding: 10rpx 0rpx;

  .tab-item {
    position: relative;
    z-index: 9;
    display: inline-block;
    margin-right: 20rpx;
    padding: 10rpx 4rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    color: $dark-color;

    &:last-child {
      margin-right: 0;
    }
  }

  .active {
    font-weight: 600;
    color: $black-color;

    &::after {
      position: absolute;
      left: 0;
      bottom: 10rpx;
      z-index: -1;
      content: '';
      width: 100%;
      height: 12rpx;
      background: $blue-color;
    }
  }
}

.layout {
  padding: 20rpx 30rpx;
}

.train-box {
  padding: 20rpx 0 30rpx;
}

.swiper-train {
  width: 100%;
  height: 460rpx;
}

.train-item {
  width: 700rpx;
  height: auto;

  .name {
    padding: 20rpx 0;
  }
}

.exam-box {
  padding: 10rpx 0 20rpx;

  .exam-item {
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    padding: 24rpx 24rpx;
    border-radius: 16rpx;
    border: 1px solid #6c6c6c;
    overflow: hidden;
  }

  .info {
    position: relative;
    flex: 1;
    margin-right: 20rpx;

    .fen {
      margin-top: 8rpx;
      font-size: 24rpx;
      line-height: 32rpx;
      color: #bababa;
    }
  }

  .info-1 {
    min-height: 80rpx;

    &::after {
      position: absolute;
      right: 0%;
      top: 50%;
      z-index: 9;
      margin-top: -25rpx;
      content: '';
      width: 1px;
      height: 50rpx;
      background: #f3f3f3;
    }
  }

  .look {
    display: inline-block;
    width: 110rpx;
    height: 44rpx;
    font-size: 24rpx;
    line-height: 44rpx;
    color: #fff;
    text-align: center;
    border-radius: 22rpx;
    background: #00abf4;
  }

  .between {
    display: flex;
    align-items: center;

    .ren {
      width: 100rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      color: $grey-color;
    }

    .progress {
      flex: 1;
      margin-right: 20rpx;
    }
  }
}

.shen-box {
  padding: 20rpx 0;

  .shen-item {
    padding: 10rpx 0;
    font-size: 30rpx;
    line-height: 40rpx;
    color: $dark-color;
  }
}

.record-item {
  display: flex;
  align-items: center;
  margin-top: 24rpx;
  padding: 40rpx 30rpx;
  border-radius: 16rpx;
  border: 1px solid $grey-color;
  overflow: hidden;

  .text {
    flex: 1;
    margin-right: 20rpx;
    font-size: 28rpx;
    font-weight: 600;
    line-height: 40rpx;
    color: $black-color;
  }

  .time {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 600;
    color: $green-color;
  }

  .round {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    border: 1px solid $grey-color;
    border-radius: 50%;
    font-size: 24rpx;
    color: $grey-color;
  }
}
</style>