<template>
	<view class="study">
		<view class="banner">
			<u-swiper :list="banner"></u-swiper>
		</view>
		<!-- <u-tabs :list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
		<view>
					<u-tabs-swiper ref="uTabs" :list="tabs" :current="current" @change="tabsChange" :is-scroll="false"
					 swiperWidth="750"></u-tabs-swiper>
				</view>
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 800rpx;width:100%;" @scrolltolower="onreachBottom">
							<view class="standard" @click="goToPrint">
								<text>充电桩交付规范</text>
								<text >></text>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 666rpx;width:100%;" @scrolltolower="onreachBottom" >
							<view  v-for="item in list" :key="item.id" class="notice" @click="bbb">
								<view class="n-head">
									《{{item.title}}》
								</view>
								<view class="">
									{{item.body}}
								</view>
							</view>
							<view v-shou="isLoadMore">
								<u-loadmore :status="loadStatus" />
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height:500rpx;width:100%;">
							<view class="lean">
								<view class="top">
									<view class="currency-class">
										<text class="title">通用课程</text>
										<view class="class1">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													服务规范
												</view>
												<view class="">
													为用户提供更好服务,自己赚更多钱
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<u-line-progress  active-color="#2979ff" :percent="30" style="width:54%;"></u-line-progress>
													<text>继续</text>
												</view>
											</view>
										</view>
										<view class="class1">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													接单操作
												</view>
												<view class="">
													快速学习,使用APP接单、抢单
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<u-line-progress  active-color="#2979ff" :percent="30" style="width:54%;"></u-line-progress>
													<text>未观看</text>
												</view>
											</view>
										</view>
									</view>
									<view class="currency-class">
										<text class="title">技能课程</text>
										<view class="class1">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													从0-1学习充电桩安装服务
												</view>
												<view class="">
													让你全面了解充电桩市场及服务规范
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<u-line-progress  active-color="#2979ff" :percent="100" style="width:54%;"></u-line-progress>
													<text>完成</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y style="height:800rpx;width:100%;" @scrolltolower="onreachBottom">
							<view class="lean">
								<view class="top">
									<view class="currency-class">
										<text class="title">通用认证</text>
										<view class="class1" @click="aaa">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													服务规范
												</view>
												<view class="">
													通过本认证,是接单的前提条件
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<text>随机20题,及格20题</text>
													<text>通过</text>
												</view>
											</view>
										</view>
										<view class="class1" @click="aaa">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													接单操作
												</view>
												<view class="">
													快速认证,是否具备接单操作能力
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<text>随机20题,及格16题</text>
													<text>未通过</text>
												</view>
											</view>
										</view>
									</view>
									<view class="currency-class">
										<text class="title">技能认证</text>
										<view class="class1" @click="aaa">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													从0-1学习充电桩安装服务
												</view>
												<view class="">
													通过本认证后,可接充电桩业务单
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<text>随机30题,及格25题</text>
													<text>未通过</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      banner: [
        {
          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
      tabs: [
        {
          name: "交付规范",
        },
        {
          name: "培训通知",
        },
        {
          name: "在线学习",
        },
        {
          name: "考核认证",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      params: {
        start: 0,
      },
      list: [],
      loadStatus: "loading", //加载样式:loadMore-加载前样式,loading-加载加载中样式,nomore-没有数据样式
      isLoadMore: false, //是否加载中
    };
  },
  onLoad() {
    this.getList();
  },

  methods: {
    getList() {
      this.$u.api
        .getTrainingNoticeList(this.params)
        .then((res) => {
          if (res.code == 200) {
            if (res.data) {
              this.list = this.list.concat(res.data);
              if (res.data.length < 5) {
                //判断接口返回数据量小于请求数据量，则表示此为最后一页
                this.isLoadMore = true;
                this.loadStatus = "nomore";
              } else {
                this.isLoadMore = false;
              }
            } else {
              this.isLoadMore = true;
              this.loadStatus = "nomore";
            }
          } else {
            //接口请求失败的处理
            uni.showToast({ title: res.message, icon: "none" });
            this.isLoadMore = false;
            if (this.params.start > 0) {
              this.page -= 5;
            }
          }
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: "none",
          });
          this.isLoadMore = false;
          if (this.params.start > 0) {
            this.page -= 5;
          }
        });
    },
    //tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    //swiper-item左右移动,通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    //跳转到assessment页面
    aaa() {
      wx.navigateTo({
        url: "./assessment",
      });
    },
    //跳转到
    bbb() {
      wx.navigateTo({
        url: "./news-details",
      });
    },
    //scroll-view到底部加载更多
    onreachBottom() {
      console.log("上拉触底函数");
      //上拉触底函数
      if (!this.isLoadMore) {
        this.isLoadMore = true;
        this.params.start += 5;
        if (this.loadStatus !== "nomore") {
          this.getList();
        }
      }
    },
    //跳转到拍照小程序首页
    goToPrint() {
      console.log("111111");
      uni.navigateToMiniProgram({
        appId: "wxd1d6eede324b0465",
        success(res) {
          //打开成功
          console.log("success", res);
        },
        fail(err) {
          console.log("err", err);
        },
      });
    },
  },
};
</script>

<style>
.study {
  background: #f9f9f9;
  padding: 15rpx;
  height: 100%;
}
.banner {
  padding: 2rpx;
}
//交付规范
.standard {
  width: 656rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #82848a;
  padding: 0 34rpx;
  margin: 72rpx auto;
}
//培训通知
.notice {
  border: #808080 solid 2rpx;
  width: 100%;
  height: 400rpx;
  margin-top: 36rpx;
}
.n-head {
  text-align: center;
  margin: 32rpx 0;
}
//在线学习
.currency-class {
  width: 100%;
  height: 455rpx;
  background: #ffffff;
  padding: 18rpx;
  margin-bottom: 11px;
}
.class1 {
  display: flex;
  justify-content: space-between;
  padding-top: 22rpx;
  margin-top: 28rpx;
  border-top: 1rpx solid #808080;
}
.img {
  width: 200rpx;
  height: 126rpx;
  display: block;
  margin-right: 0rpx;
}
.right {
  width: 428rpx;
  height: 147rpx;
}
.tab {
  background: #fff;
  height: 82rpx;
  margin: 0 0;
}
.text {
  margin: 0 40rpx;
  line-height: 82rpx;
  color: #667eb5;
}
.content {
  margin: 5px 0;
  height: 485rpx;
  background: #fff;
}
swiper {
  height: 691rpx;
}
</style>
