<template>
  <view class="content">
    <view class="search-view">
      <u-search class="search-bar" v-model="searchStr" placeholder="请输入课程名称进行搜索" :show-action="false"></u-search>
      <image class="msg-icon" src="@/static/message_icon.png" />
    </view>
    <view class="ad-view">
      <img class="ad-pic" src="@/static/ad.png" />
    </view>
    <view>
      <children-list :items="items" :current="current" />
    </view>

    <view class="tab-view">
      <u-tabs id="tab" :list="list" :current="currentTab" @change="tabChange"></u-tabs>
      <scroll-view scroll-y="true" class="sv" :style="{height:navHeight+'px'}">
        <u-loading class="loading" :show="isLoading" size="36"></u-loading>
        <no-content-tips :src="'/static/empty.png'" :isShow="(!isLoading && classList.length === 0)" :tips="'暂时没有430课程哦~'" />
        <view class="card item-card" v-for="item in classList" :key="item.id">
          <navigator url="/pages/my-class/course/course-detail" open-type="navigate" hover-class="navigator-hover">
            <img class="class-pic" src="@/static/logo.png"/>
            <view class="class-text-view">
              <view>
                <text class="r-text text-title">{{ item.title }}</text> <text class="r-text text-cost">{{ item.price }}</text>
              </view>
              <text class="text-info">{{ item.info }}</text>
              <br/>
              <text style="font-size: 20rpx;font-weight: 400;color: #A3ABBF;">{{ item.time }}</text>
            </view>
          </navigator>
        </view>
      </scroll-view>
  </view>
  </view>
</template>

<script>
import childrenList from '@/components/common/childrenList'
import noContentTips from '../../components/common/noContentTips.vue'

export default {
  components: {
   "children-list": childrenList,
    "no-content-tips": noContentTips
  },
  data: () => ({
    searchStr: '',
    items: [
        {
          value: "123",
          name: "乐大棒",
          class: "六年级-1班",
          imgUrl: "../../static/avater.png",
        },
        {
          value: "12",
          name: "乐小棒",
          class: "四年级-1班",
          imgUrl: "../../static/avater.png",
        },
        {
          value: "134",
          name: "乐小棒",
          class: "四年级-1班",
          imgUrl: "../../static/avater.png",
        },
        {
          value: "125",
          name: "乐小棒",
          class: "四年级-1班",
          imgUrl: "../../static/avater.png",
        }
      ],
      current: "123",
      list: [
		{
			name: '推荐'
		}, {
			name: '德育'
		}, {
			name: '智育'
		}, {
          name: '体育'
        }, {
          name: '美育'
        }],
        classList: [],
				currentTab: 0,
        pH:0, //窗口高度
		    navHeight:0, //元素的所需高度
        isLoading: false
  }),
  computed: {},
  methods: {
    search() {

    },
    // tabs通知swiper切换
	tabChange(index) {
        this.isLoading = true
				this.currentTab = index;
        this.classList = []
        window.setTimeout(() => {
          this.isLoading = false
          this.classList = [
          {
            id: '1',
            title: '花样跳绳（B）',
            price: '$800/人',
            info: '掌握跳绳技术，通过跳绳技术的学习...',
            time: '每周星期三17:10~18:10'
          },
          {
            id: '2',
            title: '花样跳绳（B）',
            price: '$800/人',
            info: '掌握跳绳技术，通过跳绳技术的学习...',
            time: '每周星期三17:10~18:10'
          },
          {
            id: '3',
            title: '花样跳绳（B）',
            price: '$800/人',
            info: '掌握跳绳技术，通过跳绳技术的学习...',
            time: '每周星期三17:10~18:10'
          }
        ]
        },1000)
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			}
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {
  let that=this;
	uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
		success(res) { //成功回调函数
			that._data.pH=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
			let titleH=uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
			titleH.boundingClientRect(data=>{
				let pH=that._data.pH; 
				that._data.navHeight=pH-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
			}).exec()
		}
	})
  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  /* onPageScroll(event) {}, */
  // 页面处理函数--用户点击右上角分享
  /* onShareAppMessage(options) {}, */
};
</script>

<style>
.card {
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 15px 1px #F0F0F0;
  border-radius: 10px;
}
.item-card {
  margin: 20rpx auto;
  width: 677rpx;
  height: 228rpx;
}
.search-bar {
  /* width: 85%;*/
  width: 88%;
  display: inline-flex;
}
.msg-icon {
  /* width: 35rpx;
  height: 28rpx;
  margin-left: 50rpx; */
  /* new*/
  width: 40rpx;
  height: 32rpx;
  margin-left: 20rpx;
}
.ad-pic {
  width: 690rpx;
  height: 220rpx;
  border-radius: 10rpx;
}
.ad-view {
  text-align: center;
}
.search-view {
  margin: 20rpx;
}
.tab-view {
  margin-top: 50rpx;
  width: 100%;
  background: #fff;
}
#tab {
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  box-shadow: 0rpx -10rpx 40rpx 0rpx #F0F0F0;
  border-radius: 60rpx 60rpx 0rpx 0rpx;
}
.class-text-view {
  width: 50%;
  display: inline-block;
  margin-left: 30rpx;
}
.text-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
.text-cost {
  font-size: 28rpx;
  font-weight: 400;
  color: #EB564F;
}
.text-info {
  font-size: 20rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}
.class-pic {
  position: relative;
  top: 28rpx;
  margin-left: 30rpx;
  width: 219rpx;
  height: 172rpx;
}
.loading {
  margin: 40% 49%;
}

</style>
