<!--
 * @Description: 适应性培训
 * @Author: 空白格
 * @Date: 2022-08-12 15:23:44
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-25 16:11:24
 * @FilePath: \veterans_client_web\src\views\AdaptiveTraining\AdaptiveTrainingIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main adaptive-training">
    <!-- banner -->
    <div class="adaptive-training-banner">
      <div class="adaptive-training-banner-title">适应性培训</div>
      <div class="adaptive-training-banner-subtitle">
        -退役军人思想政治教育 -退役军人就业创业指导
      </div>
      <div class="adaptive-training-banner-describe">
        适应性培训课程包含思想政治教育、法律法规政策介绍，就业创业指导、求职技巧指导、服务项目指引等，需看完线上课程后完成适应性培训。
      </div>
    </div>
    <!-- tab -->
    <div class="adaptive-training-tab">
      <div class="app-main-box adaptive-training-tab-content">
        <div
          class="attc-item"
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: tabCur === item.value }"
          @click="tabClick(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="app-main-box adaptive-training-content">
      <template v-if="tabCur === 1">
        <div class="adaptive-training-content-statistics">
          <div class="atcs-left">
            <div class="atcs-left-item">
              已看课程<span>{{ trainingTotal.play || 0 }}</span
              >节
            </div>
            <div class="atcs-left-item">
              还需观看<span>{{ trainingTotal.playNot || 0 }}</span
              >节
            </div>
          </div>
          <div class="atcs-right">
            <el-button class="atcs-right-btn">开始学习</el-button>
          </div>
        </div>
        <div
          class="adaptive-training-content-list"
          v-if="onlineObj.list.length"
        >
          <div
            class="atcl-item"
            v-for="(item, index) in onlineObj.list"
            :key="index"
            @click="
              jumpPage('/adaptivetraining/onlinecoursedetails', { id: item.id })
            "
          >
            <div class="atcl-item-left">
              <el-image :src="item.titleImg" class="image" fit="cover">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <div class="atcl-item-right">
              <div class="name">{{ item.adaptName }}</div>
              <div class="total">
                共{{ item.amount || 0 }}节课，已学完{{
                  item.finishCount || 0
                }}节课，学习进度{{ item.finishPercent || 0 }}%
              </div>
            </div>
          </div>
          <div class="pagination" v-if="onlineObj.total">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="onlineObj.queryParams.pageSize"
              :total="onlineObj.total"
              @current-change="onlineCurrentChange"
            />
          </div>
        </div>
        <el-empty description="列表数据为空" v-else></el-empty>
      </template>
      <template v-else>
        <div class="adaptive-training-content-statistics">
          <div class="atcs-total" v-if="trainingTotal.status === 1">
            <div class="atcs-total-item">
              <p>已参加线下培训</p>
              <p>（注：必须参加线下培训才能通过适应性培训）</p>
            </div>
          </div>
          <div class="atcs-total" v-else>
            <div class="atcs-total-item">
              <p>未参加线下培训</p>
              <p>（注：必须参加线下培训才能通过适应性培训）</p>
            </div>
          </div>
        </div>
        <div class="adaptive-training-content-list">
          <div
            class="atcl-item"
            v-for="(item, index) in offlineObj.list"
            :key="index"
            @click="
              jumpPage('/adaptivetraining/offlinecoursedetails', {
                id: item.id,
              })
            "
          >
            <div class="atcl-item-offline">
              <p class="name">{{ item.adaptName || "-" }}</p>
              <div class="bottom">
                <div>{{ item.adaptAddress || "-" }}</div>
                <div>{{ parseTime(item.createTime) || "-" }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {
  getTrainingList,
  getTrainingTotal,
  getOfflineTrainingList,
} from "@/api/AdaptiveTraining";
import { mapState } from "vuex";
import { parseTime } from "@/utils/utils";
export default {
  name: "AdaptiveTrainingIndex",
  data() {
    return {
      tabCur: 1,
      tabList: [
        { label: "适应性培训", value: 1 },
        { label: "线下培训", value: 2 },
      ],
      // 线上课程
      onlineObj: {
        queryParams: {
          pageNum: 1,
          pageSize: 8,
        },
        loading: false,
        total: 0,
        list: [],
      },
      // 线下课程
      offlineObj: {
        queryParams: {
          pageNum: 1,
          pageSize: 8,
        },
        loading: false,
        total: 0,
        list: [],
      },
      trainingTotal: {
        play: 0,
        playNot: 0,
        status: 0,
      },
      parseTime: parseTime,
    };
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.user.isLogin,
    }),
  },
  mounted() {
    this.getOnlineList();
    this.getOfflineList();
    if (this.isLogin) {
      this.getTrainingTotal();
    }
  },
  methods: {
    tabClick(value) {
      this.tabCur = value;
    },
    /**
     * 获取适应性培训
     * @date 2022-08-12
     * @returns {any}
     */
    getOnlineList() {
      this.onlineObj.loading = true;
      getTrainingList(this.onlineObj.queryParams).then((res) => {
        this.onlineObj.list = res.rows;
        this.onlineObj.total = Number(res.total);
        this.onlineObj.loading = false;
      });
    },
    /**
     * 线上分页触发
     * @date 2022-08-12
     * @param {any} page
     * @returns {any}
     */
    onlineCurrentChange(page) {
      this.onlineObj.queryParams.pageNum = page;
      this.getOnlineList();
    },
    /**
     * 获取适应性培训统计
     * @date 2022-08-15
     * @returns {any}
     */
    getTrainingTotal() {
      getTrainingTotal().then((res) => {
        if (res.code === 200) {
          this.trainingTotal = res.data;
        }
      });
    },
    /**
     * 获取线下课程列表
     * @date 2022-08-15
     * @returns {any}
     */
    getOfflineList() {
      this.offlineObj.loading = true;
      getOfflineTrainingList(this.offlineObj.queryParams).then((res) => {
        this.offlineObj.list = res.rows;
        this.offlineObj.total = Number(res.total);
        this.offlineObj.loading = false;
      });
    },
    /**
     * 线下分页触发
     * @date 2022-08-15
     * @param {any} page
     * @returns {any}
     */
    offlineCurrentChange(page) {
      this.offlineObj.queryParams.pageNum = page;
      this.getOfflineList();
    },
    /**
     * 跳转指定页面携带参数
     * @date 2022-08-24
     * @param {any} path
     * @param {any} query
     * @returns {any}
     */
    jumpPage(path, query) {
      this.$router.push({
        path,
        query,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.adaptive-training {
  padding-bottom: 84px;
  &-banner {
    width: 100%;
    height: 424px;
    background: url("./../../assets/images/adaptive-training-banner.png")
      no-repeat center center;
    background-size: 100% 100%;
    &-title {
      text-align: center;
      position: relative;
      font-size: 40px;
      padding-top: 80px;
      width: 300px;
      margin: 0 auto;
      text-align: justify;
      text-align-last: justify;
      color: #fff;
    }
    &-subtitle {
      width: 90%;
      margin: 20px auto;
      padding: 20px 0;
      text-align: center;
      color: #fff;
      font-size: 22px;
      font-family: SourceHanSansCN;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
    &-describe {
      width: 90%;
      height: 60px;
      line-height: 60px;
      text-align: center;
      margin: 28px auto 0;
      background: #4d3be0;
      opacity: 0.8;
      border: solid 1px #fff;
      color: #fff;
      font-size: 14px;
    }
  }
  &-tab {
    background-color: #fff;
    &-content {
      margin: 0 auto;
      display: flex;
      .attc-item {
        font-size: 20px;
        color: #000000;
        margin-right: 120px;
        line-height: 60px;
        cursor: pointer;
      }
      .active {
        color: #335ceb;
        border-bottom: solid 2px #335ceb;
      }
    }
  }
  &-content {
    &-statistics {
      height: 100px;
      padding: 0 19px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      .atcs-left {
        display: flex;
        align-items: center;
        &-item {
          padding: 0 38px;
          font-size: 20px;
          color: #656565;
          display: flex;
          align-items: center;
          &:last-child {
            position: relative;
            &::before {
              content: "";
              display: inline-block;
              width: 2px;
              height: 22px;
              background: #656565;
              position: absolute;
              left: 0;
            }
          }
          span {
            font-size: 30px;
            color: #ff700b;
            padding: 0 10px;
          }
        }
      }
      .atcs-right {
        &-btn {
          background: #ff700b;
          color: #fff;
          border: solid 1px #ff700b;
          &:hover {
            opacity: 0.8;
          }
        }
      }
      .atcs-total {
        text-align: center;
        width: 100%;
        p {
          color: #656565;
          font-size: 20px;
          span {
            color: #505050;
            font-size: 40px;
          }
          &:last-child {
            font-size: 14px;
            margin-top: 10px;
          }
        }
      }
    }
    &-list {
      padding: 32px 19px;
      background: #fff;
      margin-top: 17px;
      .atcl-item {
        padding: 18px 27px;
        background: #ffffff;
        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.11);
        border-radius: 3px;
        margin-bottom: 17px;
        display: flex;
        cursor: pointer;
        &-left {
          margin-right: 10px;
          .image {
            width: 122px;
            height: 89px;
            border: solid 1px #e0e0e0;
            border-radius: 5px;
          }
        }
        &-right {
          width: calc(100% - 132px);
          .name {
            font-size: 16px;
            color: #424242;
            font-weight: 500;
            margin-bottom: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }
          .total {
            font-size: 14px;
            color: #6f6f6f;
          }
        }
        .atcl-item-offline {
          width: 100%;
          .name {
            font-size: 20px;
            color: #424242;
            margin-bottom: 20px;
          }
          .bottom {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #6f6f6f;
          }
        }
      }
    }
  }
  .pagination {
    text-align: center;
    :deep(.el-pager .active) {
      background-color: #ff3939;
    }
    :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
      background-color: #ff3939;
    }
  }
}
</style>
