<!--
 * @Description: 适应性培训备份
 * @Author: 空白格
 * @Date: 2022-08-22 11:24:50
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-22 11:24:50
 * @FilePath: \veterans_client_web\src\views\AdaptiveTraining\AdaptiveTrainingIndex copy.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main adaptive-training">
    <BannerBreadcrumb title="适应性培训" />
    <div class="app-main-box">
      <!-- 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>
      <!-- 统计 -->
      <div class="adaptive-training-statistics">
        <div class="adaptive-training-statistics-box">
          <div class="atsb-tab">
            <div
              class="atsb-tab-item"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ 'atsb-tab-active': tabCur === item.value }"
              @click="tabClick(item)"
            >
              {{ item.label }}
            </div>
          </div>
          <template v-if="tabCur === 1">
            <div class="atsb-total">
              <div class="atsb-total-item">
                <p>已看课程</p>
                <p>
                  <span>{{ trainingTotal.play || 0 }}</span
                  >个
                </p>
              </div>
              <div class="atsb-total-item">
                <p>还需观看</p>
                <p>
                  <span>{{ trainingTotal.playNot || 0 }}</span
                  >个
                </p>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="atsb-total" v-if="trainingTotal.status === 0">
              <div class="atsb-total-item">
                <p>未参加线下培训</p>
                <p>（注：必须参加线下培训才能通过适应性培训）</p>
              </div>
            </div>
            <div class="atsb-total" v-else>
              <div class="atsb-total-item">
                <p>已参加线下培训</p>
                <p>（注：必须参加线下培训才能通过适应性培训）</p>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 列表 -->
      <template v-if="tabCur === 1">
        <div
          class="app-main-box-content adaptive-training-list"
          v-loading="onlineObj.loading"
          v-if="onlineObj.list.length"
        >
          <el-row :gutter="16">
            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              :xl="12"
              v-for="(item, index) in onlineObj.list"
              :key="index"
            >
              <div class="adaptive-training-list-item">
                <div class="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="right">
                  <div class="name">{{ item.adaptName }}</div>
                  <div class="total">
                    共{{ item.amount || 0 }}节课，已学完{{
                      item.finishCount || 0
                    }}节课，学习进度{{ item.finishPercent || 0 }}%
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <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="app-main-box-content adaptive-training-list"
          v-loading="offlineObj.loading"
          v-if="offlineObj.list.length"
        >
          <el-row :gutter="16">
            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              :xl="12"
              v-for="(item, index) in offlineObj.list"
              :key="index"
            >
              <div class="adaptive-training-list-item">
                <div class="offline">
                  <p class="name">{{ item.adaptName || "-" }}</p>
                  <div class="bottom">
                    <div>{{ item.adaptAddress || "-" }}</div>
                    <div>{{ parseTime(item.createTime) || "-" }}</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="pagination" v-if="offlineObj.total">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="offlineObj.queryParams.pageSize"
              :total="offlineObj.total"
              @current-change="offlineCurrentChange"
            />
          </div>
        </div>
        <el-empty description="列表数据为空" v-else></el-empty>
      </template>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import {
  getTrainingList,
  getTrainingTotal,
  getOfflineTrainingList,
} from "@/api/AdaptiveTraining";
import { mapState } from "vuex";
import { parseTime } from "@/utils/utils";
export default {
  name: "AdaptiveTrainingIndex",
  components: {
    BannerBreadcrumb,
  },
  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,
    }),
  },
  created() {
    this.getOnlineList();
    this.getOfflineList();
    if (this.isLogin) {
      this.getTrainingTotal();
    }
  },
  methods: {
    tabClick(item) {
      this.tabCur = item.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();
    },
  },
};
</script>

<style lang="scss" scoped>
.adaptive-training {
  padding-bottom: 30px;
  &-banner {
    width: 100%;
    height: 300px;
    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: 20px;
      width: 300px;
      margin: 0 auto;
      text-align: justify;
      text-align-last: justify;
      color: #fff;
      &::before {
        content: "";
        display: block;
        width: 26px;
        height: 26px;
        background: url("./../../assets/images/star-icon.svg") no-repeat center
          center;
        background-size: 100% 100%;
        position: absolute;
        left: -30px;
        top: 30px;
      }
    }
    &-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;
    }
  }
  &-statistics {
    background-color: #fff;
    height: 270px;
    &-box {
      height: 270px;
      background-image: url(./../../assets/images/adaptive-training-bg.png);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100% 196px;
      .atsb-tab {
        display: flex;
        width: 400px;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 20px;
        margin-bottom: 18px;
        &-item {
          font-size: 30px;
          color: #000;
          border-bottom: 3px solid #fff;
          padding-bottom: 10px;
          cursor: pointer;
          &:hover {
            color: #335ceb;
            border-bottom: 3px solid #335ceb;
          }
        }
        &-active {
          color: #335ceb;
          border-bottom: 3px solid #335ceb;
        }
      }
      .atsb-total {
        width: calc(100% - 80px);
        height: 140px;
        background: #fff;
        margin: 0 auto;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.11);
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        &-item {
          text-align: center;
          &:first-child {
            margin-right: 15%;
          }
          p {
            color: #656565;
            font-size: 22px;
            span {
              color: #505050;
              font-size: 40px;
            }
            &:last-child {
              font-size: 20px;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  &-list {
    margin-top: 10px;
    &-item {
      height: 91px;
      display: flex;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 18px 15px;
      cursor: pointer;
      margin-bottom: 20px;
      .left {
        width: 122px;
        height: 89px;
        margin-right: 10px;
        .image {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          border: solid 1px #e0e0e0;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        .name {
          font-size: 20px;
          color: #424242;
          line-height: 30px;
          margin-bottom: 20px;
        }
        .total {
          font-size: 14px;
          color: #6f6f6f;
          padding-left: 10px;
        }
      }
      .offline {
        width: 100%;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 20px;
          color: #424242;
          line-height: 30px;
          flex: 1;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          color: #6f6f6f;
          padding-left: 10px;
        }
      }
    }
    .pagination {
      text-align: center;
      margin-top: 20px;
      :deep(.el-pager .active) {
        background-color: #ff3939;
      }
      :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
        background-color: #ff3939;
      }
    }
  }
}
</style>
