<template>
  <view>
    <!--    <app-loading v-if="loading" />-->
    <unitv-zone
      id="mine_curriculum_learning_first_zone"
      class="mine_curriculum_learning_first_zone"
      left="tabs_zone"
      :values="list"
      :column="1"
      :row="list.length"
      @scrolltolower="fnScrollToLower"
    >
      <unitv-item
        v-for="(item, index) in list"
        :key="index"
        :item="index"
        class="item"
        @click="fnCurriculumDetails"
      >
        <view class="image">
          <image :src="item.img" mode="widthFix" />
        </view>
        <view class="right">
          <view class="info">
            <view class="title line-2">{{ item.title }}</view>
            <view class="progressbar">
              <liu-progressbar
                :text-hide="false"
                :progress="70"
                ds-color="#24408b"
                bg-color="#254eff"
                height="4rpx"
              />
            </view>
          </view>
          <view class="button">
            <button>继续学习</button>
          </view>
        </view>
      </unitv-item>
    </unitv-zone>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      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();
    },
    fnCurriculumDetails() {
      uni.navigateTo({
        url: "/pages/curriculum/details",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.mine_curriculum_learning_first_zone {
  .item {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    .image {
      width: 130rpx;
      height: 70rpx;
      border-radius: 6rpx;

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

    .right {
      flex: 1;
      margin-left: 20rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .info {
        height: 100%;
        padding: 10rpx 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 14rpx;
        }
      }

      .button {
        margin-left: 20rpx;

        button {
          width: 70rpx;
          height: 24rpx;
          line-height: 24rpx;
          background-color: rgba(37, 78, 255, 0.4);
          border-radius: 30rpx;
          color: #fff;
          font-size: 9rpx;
        }
      }
    }

    &.hover {
      .button {
        button {
          background-color: #254eff;
        }
      }
    }
  }
}
</style>
