<template>
  <view class="content">
    <!--    <app-loading v-if="loading" />-->
    <view class="system">
      <unitv-zone
        id="course_classification_first_zone"
        class="course_classification_first_zone"
        up="tabs_zone"
        right="course_classification_second_zone"
        :values="systemList"
        :column="1"
        :row="systemList.length"
      >
        <unitv-item
          v-for="(item, index) in systemList"
          :key="index"
          :item="index"
          class="item"
          @click="fnClickSystem"
        >
          <view class="title line-1">{{ item.title }}</view>
        </unitv-item>
      </unitv-zone>
    </view>
    <view class="right">
      <view class="search">
        <view class="block">
          <view class="main_title">最新</view>
          <unitv-zone
            id="course_classification_second_zone"
            class="search_zone"
            up="tabs_zone"
            down="course_classification_third_zone"
            left="course_classification_first_zone"
            :values="newestList"
            :column="newestList.length"
          >
            <unitv-item
              v-for="(item, index) in newestList"
              :key="index"
              :item="index"
              class="item"
              @click="fnClickSearch($event, 'newestList')"
            >
              <view class="title">{{ item.title }}</view>
            </unitv-item>
          </unitv-zone>
        </view>
        <view class="block">
          <view class="main_title">行业</view>
          <unitv-zone
            id="course_classification_third_zone"
            class="search_zone"
            up="course_classification_second_zone"
            down="course_classification_fourth_zone"
            left="course_classification_first_zone"
            :values="industryList"
            :column="industryList.length"
          >
            <unitv-item
              v-for="(item, index) in industryList"
              :key="index"
              :item="index"
              class="item"
              @click="fnClickSearch($event, 'industryList')"
            >
              <view class="title">{{ item.title }}</view>
            </unitv-item>
          </unitv-zone>
        </view>
        <view class="block">
          <view class="main_title">专区</view>
          <unitv-zone
            id="course_classification_fourth_zone"
            class="search_zone"
            up="course_classification_third_zone"
            left="course_classification_first_zone"
            down="course_classification_fifth_zone"
            :values="specialZoneList"
            :column="specialZoneList.length"
          >
            <unitv-item
              v-for="(item, index) in specialZoneList"
              :key="index"
              :item="index"
              class="item"
              @click="fnClickSearch($event, 'specialZoneList')"
            >
              <view class="title">{{ item.title }}</view>
            </unitv-item>
          </unitv-zone>
        </view>
      </view>
      <unitv-zone
        id="course_classification_fifth_zone"
        class="course_classification_fifth_zone"
        left="course_classification_first_zone"
        up="course_classification_fourth_zone"
        :values="list"
        :column="4"
        @scrolltolower="fnScrollToLower"
      >
        <unitv-item
          v-for="(item, index) in list"
          :key="index"
          :item="index"
          class="item"
          @click="fnCurriculumDetails"
        >
          <image :src="item.img" mode="widthFix" />
          <view class="title line-1">{{ item.title }}</view>
        </unitv-item>
      </unitv-zone>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      systemList: [
        { title: "安全培训" },
        { title: "职业健康" },
        { title: "工伤预防" },
        { title: "职业技能" },
        { title: "建筑施工" },
        { title: "特种设备" },
        { title: "道路运输" },
        { title: "专项培训" },
      ],
      newestList: [{ title: "最新上线" }, { title: "最多播放" }],
      industryList: [
        { title: "高危行业" },
        { title: "金属冶炼" },
        { title: "煤矿开采" },
        { title: "高危行业" },
        { title: "金属冶炼" },
        { title: "煤矿开采" },
        { title: "高危行业" },
        { title: "高危行业" },
        { title: "金属冶炼" },
        { title: "煤矿开采" },
        { title: "高危行业" },
        { title: "金属冶炼" },
        { title: "煤矿开采" },
        { title: "高危行业" },
      ],
      specialZoneList: [{ title: "免费视频" }, { title: "付费视频" }],
      list: [],
      // loading: true,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  created() {
    this.fnGetData();
  },
  methods: {
    async fnGetData() {
      // setTimeout(() => {
      this.list.push({
        img: require(`../../static/public_images/video_bg1.jpg`),
        title: "气体基础知识",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg2.jpg`),
        title: "现场一线员工全面安全培训",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg3.jpg`),
        title: "出差人员基础安全知识与应急处置",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg4.jpg`),
        title: "现场安全负责人全面安全培训",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg5.jpg`),
        title: "《四川省安全生产条例》特色解读",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg6.jpg`),
        title: "企业贯彻落实《四川省安全生产条例》精要",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg7.jpg`),
        title: "《四川省安全生产举报奖励办法》解读",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg8.jpg`),
        title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg9.jpg`),
        title: "危险货物运输包装-气瓶",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg10.jpg`),
        title: "职业病危害专项治理",
      });
      //   this.loading = false;
      // }, 5000);
    },
    fnScrollToLower() {
      this.pagination.currentPage++;
      if (this.pagination.currentPage <= this.pagination.total)
        this.fnGetData();
    },
    fnClickSystem(event) {
      console.log(this.systemList[event].title);
      this.list = [];
      this.pagination = {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      };
      this.fnGetData();
    },
    fnClickSearch(event, key) {
      console.log(this[key][event].title);
      this.list = [];
      this.pagination = {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      };
      this.fnGetData();
    },
    fnCurriculumDetails() {
      uni.navigateTo({
        url: "/pages/curriculum/details",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  margin-top: 19rpx;
  display: flex;

  .system {
    width: 94rpx;

    .course_classification_first_zone {
      font-size: 14rpx;
      text-align: center;

      .item {
        margin-top: 5rpx;
        background-color: transparent;
        border-radius: 34rpx;
        padding: 6rpx 18rpx;

        &.hover {
          background-color: #254eff;
        }

        &.active {
          background-color: rgba(37, 78, 255, 0.39);
        }
      }
    }
  }

  .right {
    margin-left: 34rpx;
    flex: 1;

    .search {
      .block {
        display: flex;
        margin-top: 5rpx;

        &:first-child {
          margin-top: 0;
        }

        .main_title {
          font-size: 10rpx;
          font-weight: bold;
          margin-right: 15rpx;
          padding: 2rpx 0;
          margin-top: 5rpx;
        }

        .search_zone {
          flex: 1;
          display: flex;
          flex-wrap: wrap;

          .item {
            background-color: transparent;
            border-radius: 34rpx;
            padding: 2rpx 12rpx;
            margin-top: 5rpx;

            .title {
              font-size: 9rpx;
            }

            &.hover {
              background-color: #254eff;
            }

            &.active {
              background-color: rgba(37, 78, 255, 0.39);
            }
          }
        }
      }
    }

    .course_classification_fifth_zone {
      margin-top: 14rpx;
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 130rpx;
        position: relative;
        border: 2px solid transparent;
        border-radius: 4rpx;
        font-size: 0;
        height: 117rpx;
        margin-top: 14rpx;
        margin-left: 10rpx;

        &:not(:nth-child(n + 5)) {
          margin-top: 0;
        }

        &:nth-child(4n + 1) {
          margin-left: 0;
        }

        image {
          width: 100%;
          height: 100% !important;
          border-radius: 4rpx;
        }

        .title {
          width: 80%;
          font-size: 12rpx;
          color: #fff;
          position: absolute;
          bottom: 9rpx;
          left: 7rpx;
        }

        &.hover {
          border: 2rpx solid rgba(0, 180, 255, 0.79);
        }
      }
    }
  }
}
</style>
