<template>
	<view>
		<view style="height: 555rpx;position: relative;">
			<image src="../../static/indexbh.png" style="width: 100%;height: 555rpx;position: absolute;" mode="">
			</image>
			<view style="display: flex;align-items: center;justify-content: space-between; padding: 88rpx 25rpx;">
				<image src="../../static/logo.png" style="width: 187rpx;height:50rpx;" mode=""></image>
				<view style="z-index: 50;width: 236rpx;line-height: 43rpx;background: rgba(255,255,255,0.29);border-radius: 7rpx 7rpx 7rpx 7rpx;
				font-weight: 400;font-size: 21rpx;color: rgba(255,255,255,0.85);display: flex;align-items: center;"
					@tap="moreVideo">
					<!-- <uni-icons type="search" size="16" style="color: rgba(255,255,255,0.85);"></uni-icons> -->
					<image src="../../static/dwbimgs/sosuo.png" style="height: 34rpx;width: 34rpx;" mode=""></image>
					点击搜索更多好剧
				</view>
			</view>

			<template v-if="noticeList.length > 0 && isShowMoneyPay">
				<view class="gongao">
					<view class="gongaoicon">
						公告
					</view>
					<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
						class="swiperstyle">
						<swiper-item @tap='goMsg(item.url)' v-for="(item, index) in noticeList" :key="index">
							<view style="height: 80rpx;line-height: 80rpx;">{{ item.title }}</view>
						</swiper-item>
					</swiper>
				</view>
			</template>
		</view>
		<view style="display: flex;align-items: center;justify-content: space-between;padding:0 20rpx;">
			<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
				:style="active == 1 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('', 1)">
				最新
			</view>
			<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
				:style="active == 2 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('1', 2)">
				排行
			</view>
			<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
				:style="active == 3 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('2', 3)">
				最热
			</view>
			<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
				:style="active == 4 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('1', 4)">
				剧情
			</view>
			<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
				:style="active == 5 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('2', 5)">
				飙升
			</view>
		</view>
		<view class="">
			<contentlist :list='list'></contentlist>
		</view>
		<u-image v-if="isShowMoneyPay" @click="goMsg('/me/VjgyqAzklr/VjgyqAzklr')"
			:src="`../../static/red-pack-new.gif`"
			style="width: 200rpx;height: 200rpx;position: fixed;right: 10rpx;bottom: 180rpx;"></u-image>

		<u-modal v-model="ruleShow" confirm-text="知道了" :title="rule_title" :title-style="{ fontWeight: '700' }"
			confirm-color="rgb(255, 117, 129)">
			<view class="u-p-30 u-text-left">
				<scroll-view scroll-y="true" style="max-height: 50vh;">
					<rich-text class="color-666" :nodes="rule_content"></rich-text>
				</scroll-view>
			</view>

		</u-modal>
	</view>
</template>

<script>
import contentlist from './components/contentlist.vue'
import httpsRequest from '@/common/httpRequest.js'
export default {
	components: {
		contentlist
	},
	data() {
		return {
			noticeList: [], //公告列表
			list: [],
			page: 1,
			active: 1,
			isShowMoneyPay: true,
			ruleShow: false,
			rule_title: '',
			rule_content: '',

		}
	},
	onShow() {
		this.getMsg()
		this.getrecomVideo()

		httpsRequest.getT("/app/common/type/919", {}).then(res => {
			if (res.code == 0) {
				const sysInfo = uni.getSystemInfoSync();
				let isIos = sysInfo.platform == 'ios'
				this.isIosApp = isIos
				this.isShowMoneyPay = !(res.data.value == '1' && isIos)
			}
		});

		httpsRequest.getT("/app/announcement", {}).then(res => {
			if (res.code == 0) {
				if (res.data && res.data.state == 1) {
					this.ruleShow = true
					this.rule_title = res.data.title
					this.rule_content = res.data.content
				}
			}
		});
	},
	onReachBottom() {
		++this.page
		this.getrecomVideo()
	},
	methods: {
		// 跳转公告链接
		goMsg(url) {
			if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
				uni.navigateTo({
					url
				});
			} else {
				//#ifndef H5
				uni.navigateTo({
					url: '/pages/index/webView?url=' + url
				});
				//#endif
				//#ifdef H5
				window.location.href = url;
				//#endif	
			}
		},
		moreVideo() {
			uni.navigateTo({
				url: '/pages/index/course/courseList?title=最新热播'
			})
		},
		// 列表
		//获取推荐视频
		getrecomVideo(sort, active = 1) {
			this.active = active
			if (sort) {
				this.page = 1
			}
			let data = {
				page: this.page,
				limit: 12,
				sort: sort,
				classifyId: ''
			}
			this.$Request.getT('/app/course/selectCourse', data).then(res => {
				if (res.code == 0) {
					if (this.page == 1) {
						this.list = res.data.list
					} else {
						this.list = [...this.list, ...res.data.list]
					}


				}
			})
		},
		// 公告
		getMsg() {
			let data = {
				page: 1,
				limit: 5,
				state: 1
			}
			this.$u.api.msg(data).then(res => {
				if (res.code == 0) {
					this.notice = res.data.list
					res.data.list.forEach(res => {
						this.noticeList.push(res)
					})
				} else {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
				}
			})
		},

	}
}
</script>

<style scoped lang="scss">
.gongao {
	position: absolute;
	bottom: 75rpx;
	left: 70rpx;
	border-radius: 21rpx 21rpx 21rpx 21rpx;
	width: 611rpx;
	height: 78rpx;
	background-color: rgba(255, 255, 255, .65);
	display: flex;
	align-items: center;
	padding: 12rpx;

	.gongaoicon {
		color: #ffffff;
		width: 98rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-image: url('../../static/gonggaobg.png');
		background-size: 98rpx 50rpx;
	}

	.swiperstyle {
		height: 78rpx;
		width: 80%;
	}
}
</style>