<!--
 * @Description:  公共课程
 * @Author: 空白格
 * @Date: 2023-04-24 10:52:11
 * @LastEditors: 空白格
 * @LastEditTime: 2023-05-04 11:46:53
 * @FilePath: \veterans_client_web\src\views\PublicClasses\PublicClassesIndex.vue
 * @Copyright: Copyright (c) 2016~2023 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main">
    <div class="BannerBreadcrumb-wrap">
      <BannerBreadcrumb title="颂军魂" :breadcrumb="true" />
    </div>
    <section class="app-main-box">
      <div class="app-main-box-content">
        <div class="video-title">颂军魂</div>
        <div class="video-list" v-if="videoList.length" v-loading="loading">
          <el-row :gutter="48">
            <el-col
              :xs="24"
              :sm="12"
              :md="6"
              :lg="6"
              :xl="6"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <div class="video-list-item" @click="videoClick(item)">
                <div class="video-list-item-image">
                  <el-image
                    style="
                      width: 100%;
                      height: 100%;
                      border-radius: 6px;
                      border: solid 1px #666;
                    "
                    :src="item.coverUrl"
                  />
                  <el-image
                    class="play-btn"
                    :src="require('@/assets/images/play-btn.png')"
                  />
                </div>
                <div class="video-list-item-title">{{ item.chapterName }}</div>
                <div class="video-list-item-subtitle">{{ "颂军魂" }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-empty description="暂无数据" v-else />
        <div class="pagination" v-if="total">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="currentChange"
          />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getDictData } from "@/api/Dict";
import { getPublicClassesList } from "@/api/PublicClasses";
export default {
  name: "PublicClassesIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 8,
      },
      total: 0,
      loading: false,
      videoList: [],
    };
  },
  created() {
    this.initDict();
    this.getList();
  },
  methods: {
    async initDict() {
      const { code, data } = await getDictData({ key: "site_type" });
      if (code === 200) {
        const type = this.iswap();
        const { text } = data.find((item) => item.label === type);
        console.log(location.href.includes(text));
        if (!location.href.includes(text)) {
          location.href = text;
        }
      }
    },
    async getList() {
      this.loading = true;
      const { code, data } = await getPublicClassesList({ id: 1, ...this.queryParams });
      if (code === 200) {
        this.videoList = data?.rows ?? [];
        this.total = Number(data?.total ?? 0);
        this.loading = false;
      }
    },
    videoClick(item) {
      this.$router.push({
        path: "/classesvideo",
        query: {
          videoUrl: item.videoUrl,
          chapterName: item.chapterName,
        },
      });
    },
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    iswap() {
      var uA = navigator.userAgent.toLowerCase();
      var ipad = uA.match(/ipad/i) == "ipad";
      var iphone = uA.match(/iphone os/i) == "iphone os";
      var midp = uA.match(/midp/i) == "midp";
      var uc7 = uA.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
      var uc = uA.match(/ucweb/i) == "ucweb";
      var android = uA.match(/android/i) == "android";
      var windowsce = uA.match(/windows ce/i) == "windows ce";
      var windowsmd = uA.match(/windows mobile/i) == "windows mobile";
      if (
        !(
          ipad ||
          iphone ||
          midp ||
          uc7 ||
          uc ||
          android ||
          windowsce ||
          windowsmd
        )
      ) {
        // PC 端
        return "Pc";
      } else {
        // 移动端
        return "Mobile";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.video-title {
  font-size: 24px;
  color: #222222;
  margin-bottom: 20px;
}

.video-list {
  // margin-bottom: 40px;

  &-item {
    margin-bottom: 40px;

    &-image {
      width: 100%;
      height: 162px;
      margin-bottom: 16px;
      position: relative;

      .play-btn {
        position: absolute;
        width: 70px;
        height: 70px;
        top: 50%;
        left: 50%;
        margin-left: -35px;
        margin-top: -35px;
        cursor: pointer;
      }
    }

    &-title {
      font-size: 20px;
      color: #2e2e2e;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }

    &-subtitle {
      font-size: 16px;
      color: #818181;
    }
  }
}

.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>
