<template>
		<list :pagingEnabled="true" :scroll-top="scrollTop" :scrollable="scrollable"class="zhi_index04" :offset-accuracy="videoStyle.height" :show-scrollbar="false"  ref="list" :loadmoreoffset="loadMoreHeight" @scroll="Scroll">
			<cell style="position:relative;" :style="videoStyle"  v-for="(l,i) in lie" :key='i' @disappear="Disappear($event,i)"  @appear="onappear">
				<template v-if="nowId==l.id">
					<video @click="closeAllAlert(l.id)" :style="videoStyle" @play='play' @pause="pause" @timeupdate="Timeupdate" :id="`video_${l.id}`" :ref="`video_${l.id}`" :loop="true" :src="'http://qiniu.w.zhaodizhu.cn'+l.video" controls="false" :enable-progress-gesture="false"  :show-center-play-btn="false" />
					<!-- 导航栏区域 -->
					<div class="navBarWrap" :style="{top:statusBarHeight}">
						<image @click="back" src="../../static/image/back_white.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<image @click="showMoreHandle = !showMoreHandle" src="../../static/image/gengduo.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					</div>
					<div class="moreHandleWrap" v-if="showMoreHandle" :style="{height:l.user.id != userinfo.id ? '72rpx' : '144rpx'}">
						<!-- <div class="handleItem" @click="showShare = true">
							<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="../../static/image/fenxiang-22_1@2x.png" mode=""></image>
							<text style="color: #35655f;font-size: 28rpx;">转发</text>
						</div> -->
						<div class="handleItem" @click="report">
							<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="../../static/image/jubao-9_1@2x.png" mode=""></image>
							<text style="color: #35655f;font-size: 28rpx;">{{l.user.id != userinfo.id ? '举报' : '编辑'}}</text>
						</div>
						<div class="handleItem" @click="delAct" v-if="l.user.id == userinfo.id">
							<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="../../static/image/shanchu-9_1.png" mode=""></image>
							<text style="color: #35655f;font-size: 28rpx;">删除</text>
						</div>
					</div>
					<div v-if="playIconStatus" style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;flex-direction: row;justify-content: center;align-items: center;z-index:1;">
						<image src="../../static/image/bofang.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
					</div>
					<!-- 用户信息区域 -->
					<div class="userInfoWrap" :style="{bottom:expandStatus ? '400rpx' : '200rpx'}">
						<div class="userInfoLeft">
							<div class="userIcon" @click="goMainPage(l.user.id)">
								<image :src="l.user.avatar" style="width: 93rpx;height: 93rpx;border-radius: 20rpx 0 20rpx 0;" mode="aspectFill"></image>
							</div>
							<div class="userNameAddress">
								<div class="userName">
									<text style="font-size: 32rpx;color: #fff;">{{l.user.nickname}}</text>
								</div>
								<div class="userAddress" v-if="l.area != ''">
									<image src="../../static/image/weizhi.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
									<text style="color: rgba(255,255,255,0.80);font-size: 24rpx;padding-top: 8rpx;">{{l.area}}</text>
								</div>
							</div>
						</div>
						<div class="userInfoRight" v-if="l.user.id != userinfo.id">
							<div class="gzBtn" @click="follow(l.user.id)">
								<text class="btnTxt">{{articleInfo.is_follow_user == 1 ? '已关注' : '关注'}}</text>
							</div>
							<div class="lwBtn" @click="showSendGift = true" v-if="plat == 'android' || (plat == 'ios' && switchTab == '1')">
								<text class="btnTxt">送礼物</text>
							</div>
						</div>
					</div>
					<!-- 介绍区域 -->
					<div class="contentWrap">
						<div class="content">
							<text v-if="!expandStatus" style="font-size: 28rpx;color: #fff;line-height: 100rpx;">{{l.content}}</text>
						</div>
						<div class="expandBtn" @click="changeExpand">
							<text style="line-height: 100rpx;color: #99a1a4;font-size: 28rpx;">{{expandStatus ? '收起' : '展开'}}</text>
						</div>
					</div>
					<div class="otherHandleWrap">
						<div class="sayWhat" @click="getRemarkList">
							<image src="../../static/image/sayWhatIcon.png" mode="" style="width: 32rpx;height: 32rpx;margin-right: 8rpx;"></image>
							<text style="color: rgba(255,255,255,0.60);font-size: 24rpx;">说点什么</text>
						</div>
						<div class="userHandle">
							<image @click="like" class="handleImg" :src="articleInfo.is_like == 1 ? '../../static/image/yidianzan.png' : '../../static/image/dianzan.png'" mode=""></image>
							<text class="handleNum">{{articleInfo.like_num}}</text>
							<image class="handleImg" @click="getRemarkList" src="../../static/image/liuyan.png" mode=""></image><text class="handleNum">{{articleInfo.remark_num}}</text>
							<image @click="collect" class="handleImg" :src="articleInfo.is_collect == 1 ? '../../static/image/yishoucang.png' : '../../static/image/shoucang.png'" mode=""></image>
							<text class="handleNum">{{articleInfo.collect_num}}</text>
						</div>
					</div>
				</template>
			</cell>		
			<progress :percent="bofangjindu" stroke-width="1" activeColor="#FFFFFF" backgroundColor="rgba(226, 226, 226, 0.3)" class="zhi_index24"/>
			<!-- 展开内容区域 -->
			<!-- <scroll-view scroll-y class="expandContentWrap" v-if="expandStatus">
				<div style="white-space: pre-line;">
					<textarea style="width: 100%;height: 100rpx;font-size: 28rpx;color: #fff;line-height: 100rpx;" :value="articleInfo.content" :disabled="true" />
				</div>
			</scroll-view> -->
			<div v-if="expandStatus" style="position: fixed;bottom: 200rpx;width: 750rpx;height: 200rpx;flex-direction: column;justify-content: center;align-items: center;">
				<textarea style="width: 686rpx;height: 200rpx;font-size: 28rpx;color: #fff;" :value="articleInfo.content" :disabled="true" />
			</div>
			<!-- 评论内容弹框 -->
			<div class="commentAlert" v-if="showCommentAlert">
				<div class="commentNum" @click="closeAllAlert">
					<text style="text-align: center;font-size: 28rpx;line-height: 100rpx;">共{{remarkList.length}}条评论</text>
					<image @click="showCommentAlert = false" class="closeBtn" src="../../static/image/close.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
				</div>
				<scroll-view scroll-y class="commentList">
					<div v-for="(item,index) in remarkList" :key="index" @click="closeAllAlert">
						<div class="commentItem">
							<image  @click="goMainPage(item.user.id)" :src="item.user.avatar" style="width: 93rpx;height: 93rpx;border-radius: 20rpx 0 20rpx 0;" mode="aspectFill"></image>
							<div class="commentRight">
								<div class="userNickName">
									<text style="color: #969799;font-size: 28rpx;">{{item.user.nickname}}</text>
									<text style="color: #969799;font-size: 28rpx;">{{item.createtime}}</text>
								</div>
								<text @longpress="changeAskHandle(index)" @click="remarkInp(item.id,index)" style="font-size: 28rpx;line-height: 42rpx;padding-top: 8rpx;">{{item.content}}</text>
								<text @click="item.showReply = true" style="font-size: 28rpx;color: #5176d1;padding-top: 16rpx;" v-if="item.article_reply.length > 0 && !item.showReply">展开{{item.article_reply.length}}条回复</text>
							</div>
						</div>
						<div class="askHandleWrap" v-if="item.showAskHandle">
							<div class="handleItem" @click="reply(item.id,index)">
								<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="../../static/image/huifu.png" mode=""></image>
								<text style="color: #35655f;font-size: 28rpx;">回复</text>
							</div>
							<div class="handleItem" @click="handleAsk(item.id,index,item.user.id)">
								<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="../../static/image/jubao-9_1@2x.png" mode=""></image>
								<text style="color: #35655f;font-size: 28rpx;">{{item.user.id != userinfo.id ? '举报' : '删除'}}</text>
							</div>
						</div>
						<div v-for="(subItem,subIndex) in item.article_reply" :key="subIndex">
							<div class="replyHandleWrap" v-if="subItem.showReplyHandle && subItem.user.id == userinfo.id">
								<div class="handleItem" @click="handleReply(subItem.id,subIndex,subItem.user.id)">
									<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="../../static/image/jubao-9_1@2x.png" mode=""></image>
									<text style="color: #35655f;font-size: 28rpx;">删除</text>
								</div>
							</div>
							<div v-if="item.showReply" class="commentSubItem">
								<image  @click="goMainPage(subItem.user.id)" :src="subItem.user.avatar" style="width: 68rpx;height: 68rpx;border-radius: 20rpx 0 20rpx 0;" mode="aspectFill"></image>
								<div class="commentRight">
									<div class="userNickName">
										<text style="color: #969799;font-size: 28rpx;">{{subItem.user.nickname}}</text>
										<text style="color: #969799;font-size: 28rpx;">{{subItem.createtime}}</text>
									</div>
									<text @longpress="subItem.showReplyHandle = true" @click="subItem.showReplyHandle = false" style="font-size: 28rpx;line-height: 42rpx;padding-top: 8rpx;">{{subItem.content}}</text>
								</div>
							</div>
						</div>
					</div>
				</scroll-view>
				<div class="bottomBtn" :style="{bottom: keyboardHeight+'rpx'}" @click="closeAllAlert">
					<div class="sayWhatInp">
						<image src="../../static/image/edit_comment.png" mode="" style="width: 32rpx;height: 32rpx;margin-right: 8rpx;"></image>
						<input ref="remarkInp" class="inpTxt" type="text" v-model="content" placeholder="说点什么" :adjust-position="false"/>
					</div>
					<text style="color: #969799;font-size: 32rpx;" @click="remark">发送</text>
				</div>
			</div>
			<!-- 送礼物弹框 -->
			<div class="sendGiftAlert" v-if="showSendGift">
				<div class="sendGift">
					<div class="giftPad">
						<div class="giftList">
							<div class="giftItem" v-for="(item,index) in giftList" :key="index" @click="chooseGift(index)">
								<div class="giftImg">
									<div class="giftImgActive" :class="{active:giftIndex == index}">
										<image style="width: 120rpx;height: 120rpx;" :src="item.image" mode=""></image>
									</div>
								</div>	
								<div class="giftName"><text style="text-align: center;color: #e8c760;font-size: 28rpx;">{{item.price}}问野币</text></div>
							</div>
						</div>
						<div class="giftForm">
							<div class="inpItem">
								<div class="inpKey">余额</div>
								<div class="inpVal">{{wallet.landlord_money}}问野币</div>
							</div>
							<div class="inpItem">
								<div class="inpKey">数量</div>
								<div class="inpVal">
									<input style="width: 200rpx;text-align: right;" type="number" @keyup="inpNum = inpNum.length === 1 ? inpNum.replace(/[^1-9]/g, '') : inpNum.replace(/\D/g, '')" v-model="inpNum" placeholder="请输入数量" placeholder-class="inpValPh"/>
								</div>
							</div>
							<div class="inpItem">
								<div class="inpKey">总计</div>
								<div class="inpVal">{{jbNum}}问野币</div>
							</div>
						</div>
						<div class="bottomBtn" @click="sendGift">
							<text style="text-align: center;line-height: 88rpx;font-size: 32rpx;color: #fff;">送出礼物</text>
						</div>
					</div>
					<div class="closeBtn" @click="showSendGift = false">
						<image style="width: 44rpx;height: 44rpx;" src="../../static/image/cross@2x.png" mode=""></image>
					</div>
				</div>
			</div>
			<div class="shareBox" v-if="showShare">
				<div class="shareDialog">
				<div class="sharelist">
					<div class="shareitem" @click="share('weixin','WXSceneSession')">
						<div class="imgWrap">
							<image class="shareImg" src="../../static/image/share-icon1.png" mode=""></image>
						</div>
						<text style="text-align: center;line-height: 40rpx;font-size: 24rpx;">微信好友</text>
					</div>
					<div class="shareitem" @click="share('weixin','WXSenceTimeline')">
						<div class="imgWrap">
							<image class="shareImg" src="../../static/image/share-icon2.png" mode=""></image>
						</div>
						<text style="text-align: center;line-height: 40rpx;font-size: 24rpx;">微信朋友圈</text>
					</div>
					<!-- <div class="shareitem" @click="share('qq')">
						<image src="../static/share-icon3.png" mode=""></image>
						<text>QQ</text>
					</div>
					<div class="shareitem" @click="share('sinaweibo')">
						<image src="../static/share-icon4.png" mode=""></image>
						<text>微博</text>
					</div> -->
				</div>
				<div class="cancelShare" @click="showShare = false">
					<text style="font-size: 28rpx;line-height: 86rpx;text-align: center;">取消分享</text>
				</div>
				</div>
			</div>
		</list>	
</template>
<script>
	const deviceInfo = uni.getSystemInfoSync()   
	import canshu from './index.js'
	import {mapState} from "vuex"
	if(deviceInfo.brand=='Xiaomi'){
		deviceInfo.windowHeight+=1
	}
	// var apiUrl = 'http://landlord.t.brotop.cn/api'
	var apiUrl = 'http://app.zhaodizhu.cn/api'
	export default {
		data() {
			return {
				playIconStatus:false,
				keyboardHeight:0,//键盘高度
				showShare:false,
				wallet:{},//我的钱包
				inpNum:'',//输入礼物数量
				giftIndex:-1,
				showSendGift:false,
				giftList:[],//礼物列表
				showMoreHandle:false,
				article_remark_id:'',
				remarkType:'',
				remarkQueryParam:{
					article_id:'',
					page:1,
					pageNum:15
				},
				remarkList:[],
				content:'',
				article_id:'',
				articleInfo:{},
				scrollable:true,//是否允许List滚动
				expandStatus:false,
				showCommentAlert:false,//展示评论内容弹框
				statusBarHeight:deviceInfo.statusBarHeight+'px', 
				loadMoreHeight: deviceInfo.windowHeight * 2, // 触发 loadmore 事件所需要的垂直偏移距离 加载到剩余2	 继续加载
				videoStyle:{
					width:"750rpx",
					height:deviceInfo.windowHeight+'px',
				},					
				lie:[],			
				nowId:0,
				screenHeight:0,//屏幕高度
				scrollTop:0,//滚动距离顶部距离
				bofangjindu:0,
				appear:'',
				kebofang:0,
				switchTab:'1',
				plat:'android'
			}
		},	
		computed:{
			...mapState(["isLogin","userinfo","articleList"]),
			jbNum(){
				if(this.giftIndex != -1){
					return this.inpNum * this.giftList[this.giftIndex].price
				}
			}
		},
		onLoad(e) {
			this.nowId = e.id
			this.article_id = e.id
			//监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
			  if(res.height == 0){
				  this.keyboardHeight = 0
			  }else{
				  this.keyboardHeight = res.height*2 + 10
			  } 
			})
			//获取后台配置信息
			uni.request({
				url:apiUrl+'/common/getConfig',
				method:'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded', 
					'token': uni.getStorageSync('token')
				},
				data:{type:'8'},
				success: (res) => {
					this.switchTab = res.data.data.switch
					this.plat = plus.os.name.toLowerCase()
				}
			})
			//获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight
				}
			})
			
			this.getData()
			
			let lieArr = []
			let index = 0
			let scrollTop = 0
			this.articleList.forEach((item)=>{
				if(item.type == '2'){
					if(item.id == this.nowId){
						scrollTop = this.screenHeight*index
					}
					lieArr.push(item)
					index++
				}
			})
			this.scrollTop = scrollTop
			this.lie = lieArr
			setTimeout(()=>{
				uni.createVideoContext(`video_${this.nowId}`,this).play()
			},200)
			
		},
		onShow() {
			this.kebofang=1;
		},
		onHide(){
			this.kebofang=0;
			if(this.lie[this.index]){			
				uni.createVideoContext(`video_${this.index}`,this).pause()
			}			
		},
		methods: {
			getData(){
				uni.request({
					url:apiUrl+'/article/info',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					data:{article_id:this.article_id},
					success: (res) => {
						console.log('故事详情',res)
						this.articleInfo = res.data.data
					}
				})
				uni.request({
					url:apiUrl+'/gift/lis',
					method:'POST',
					success: (res) => {
						this.giftList = res.data.data
					}
				})
				uni.request({
					url:apiUrl+'/wallet/index',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.wallet = res.data.data
					}
				})
			},
			Disappear(e,i){
				if(this.appear==e.direction && deviceInfo.platform=='android'){
					let index=(e.direction=='up')?i+1:i-1;
					if(index >= 0){
						this.nowId = this.lie[index].id
						this.article_id = this.lie[index].id
						this.getData()
					}
					setTimeout(()=>{
						uni.createVideoContext(`video_${this.nowId}`,this).play()
					},300)					
				}		
			},
			onappear (e) {
				this.appear=e.direction;
			},	
			changeAskHandle(index){
				this.remarkList.forEach(item=>{
					item.showAskHandle = false
				})
				this.remarkList[index].showAskHandle = true
			},
			//播放
			play(){
				this.playStatus = true
				this.playIconStatus = false
			},
			//暂停
			pause(){
				this.playStatus = false
				this.playIconStatus = true
			},
			remarkInp(id,index){
				this.article_remark_id = id
				this.remarkType = 'reply'
				this.$refs.remarkInp.focus()
			},
			//去主页
			goMainPage(userId){
				if(userId == this.userinfo.id){
					uni.switchTab({
						url:'/pages/my/my'
					})
				}else{
					this.href('/pages/index/landHome?id='+userId)
				}
				
			},
			handleAsk(id,index,userId){
				this.remarkList[index].showAskHandle = false
				if(userId != this.userinfo.id){
					uni.navigateTo({
						url:'/pages/index/report?article_remark_id='+id
					})
				}else{
					uni.request({
						url:apiUrl+'/article_remark/delRemark',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded', 
							'token': uni.getStorageSync('token')
						},
						data:{
							article_remark_id:id
						},
						success: (res) => {
							if(res.data.code == 1){
								this.getRemarkList()
								uni.showToast({
									title:'删除成功'
								})
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						}
					})
				}
			},
			//关闭所有弹框
			closeAllAlert(i){
				let videoPlay = uni.createVideoContext('video_'+i)
				if(!this.showCommentAlert){
					if(this.playStatus){
						videoPlay.pause()
					}else{
						videoPlay.play()
					}
				}
				this.showMoreHandle = false
				this.remarkList.forEach(item=>{
					item.showAskHandle = false
				})
				this.$forceUpdate()
			},
			//操作回复
			handleReply(id,index,userId){
				this.remarkList[index].showReplyHandle = false
				uni.request({
					url:apiUrl+'/article_reply/delReply',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					data:{
						article_reply_id:id
					},
					success: (res) => {
						if(res.data.code == 1){
							this.getRemarkList()
							uni.showToast({
								title:'删除成功'
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					}
				})
			},
			openAskHandle(index){
				this.remarkList[index].showAskHandle = true
				this.article_remark_id = id
				this.remarkType = 'reply'
				this.$refs.remarkInp.focus()
			},
			//分享
			share(parm1,parm2=''){
				//"weixin", "qq", "sinaweibo"
				// WXSceneSession	分享到聊天界面
				// WXSenceTimeline	分享到朋友圈
				// WXSceneFavorite	分享到微信收藏
				uni.share({
					provider:parm1,
					title:"找地主",
					scene:parm2,
					type:0,
					summary:"找地主测试描述",
					href:"http://baidu.com",
					imageUrl:"https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"
				})
			},
			//删除帖子
			delAct(){
				uni.showModal({
					title:'提示',
					content:'确认删除吗？',
					success: (res) => {
						if(res.confirm){
							uni.request({
								url:apiUrl + '/article/del',
								method:'POST',
								header: {
									'content-type': 'application/x-www-form-urlencoded', 
									'token': uni.getStorageSync('token')
								},
								data:{article_id:this.article_id},
								success: (res) => {
									if(res.data.code == 1){
										uni.setStorageSync('refreshMy',true)
										uni.setStorageSync('refreshFindWonderful',true)
										uni.navigateBack({
											delta:1
										})
										setTimeout(()=>{
											uni.showToast({
												title:'删除成功'
											})
										},500)
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								}
							})
						}
					}
				})
				
			},
			//送出礼物
			sendGift(){
				if(this.giftIndex == -1){
					uni.showToast({
						title:'请选择礼物',
						icon:'none'
					})
					return
				}
				if(this.inpNum == '' || this.inpNum <= 0){
					uni.showToast({
						title:'请输入正确数量',
						icon:'none'
					})
					return
				}
				uni.request({
					url:apiUrl+'/gift/give',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					data:{
						gift_id:this.giftList[this.giftIndex].id,
						user_id:this.articleInfo.user.id,
						number:this.inpNum
					},
					success: (res) => {
						if(res.data.code == 1){
							this.showSendGift = false
							uni.showToast({
								title:'送出礼物成功'
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					}
				})
			},
			//选择礼物
			chooseGift(index){
				this.giftIndex = index
			},
			//举报
			report(){
				this.showMoreHandle = false
				if(this.articleInfo.user.id != this.userinfo.id){
					uni.navigateTo({
						url:'/pages/index/report?article_id='+this.article_id
					})
				}else{
					uni.navigateTo({
						url:'/pages/findWonderful/publishPost?article_id='+this.article_id
					})
				}
			},
			//回复
			reply(id,index){
				this.remarkList[index].showAskHandle = false
				this.article_remark_id = id
				this.remarkType = 'reply'
				this.$refs.remarkInp.focus()
			},
			//获取评论列表
			getRemarkList(){
				this.remarkQueryParam.article_id = this.article_id
				uni.request({
					url:apiUrl+'/article_remark/getArticleList',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					data:this.remarkQueryParam,
					success: (res) => {
						this.remarkList = res.data.data.data
						this.showCommentAlert = true
					}
				})
			},
			//关注
			follow(userId){
				uni.request({
					url:apiUrl+'/user_follow_log/follow',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					data:{to_user_id:userId},
					success: (res) => {
						if(res.data.code == 1){
							this.getData()
							uni.showToast({
								title:res.data.msg + '成功'
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					}
				})
			},
			//点赞
			like(){
				uni.request({
					url:apiUrl+'/article/like',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					data:{article_id:this.article_id},
					success: (res) => {
						this.getData()
					}
				})
			},
			//收藏
			collect(){
				uni.request({
					url:apiUrl+'/article/collect',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
						'token': uni.getStorageSync('token')
					},
					data:{article_id:this.article_id},
					success: (res) => {
						this.getData()
					}
				})
			},
			//评论
			remark(){
				if(this.remarkType == 'reply'){
					if(this.content == ''){
						uni.showToast({
							title:'请输入回复内容',
							icon:'none'
						})
						return
					}
					uni.hideKeyboard()
					uni.request({
						url:apiUrl+'/article_reply/submitReply',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded', 
							'token': uni.getStorageSync('token')
						},
						data:{
							article_remark_id:this.article_remark_id,
							content:this.content
						},
						success: (res) => {
							this.content = ''
							this.remarkType = 'send'
							this.article_remark_id = '' 
							this.getRemarkList()
						}
					})
				}else{
					if(this.content == ''){
						uni.showToast({
							title:'请输入评论内容',
							icon:'none'
						})
						return
					}
					uni.hideKeyboard()
					uni.request({
						url:apiUrl+'/article_remark/submit',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded', 
							'token': uni.getStorageSync('token')
						},
						data:{
							article_id:this.article_id,
							content:this.content
						},
						success: (res) => {
							this.content = ''
							this.getData()
							this.getRemarkList()
						}
					})
				}
			},
			//返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			changeExpand(){
				this.expandStatus = !this.expandStatus
			},
			dianzan(e){
				if(e==0){
					this.lie[this.index].yidianzan=1
					
					
					this.lie[this.index].yidianzanshu= Number(this.lie[this.index].yidianzanshu) + 1
				}else{
					this.lie[this.index].yidianzan=0
					this.lie[this.index].yidianzanshu= Number(this.lie[this.index].yidianzanshu)-1
				}
			},
			guanzhu(e){
				if(e==0){
					this.lie[this.index].guanzhu=1
					uni.showToast({
					    title: '关注成功',
					    duration: 1500
					});
				}else{
					this.lie[this.index].guanzhu=0
				}
			},
			
			panduanpofang(){
				if(this.kebofang==0){
					uni.createVideoContext(`video_${this.index}`,this).pause()
				}	
			},	
			Timeupdate(e){		
				this.bofangjindu = parseInt(e.detail.currentTime/e.detail.duration*100)	
			},
			Scroll(e){
				this.expandStatus = false
				if(deviceInfo.platform=='ios'){				
					var i=Math.abs(e.contentOffset.y/deviceInfo.windowHeight)					
					if(i!=this.index){							
						this.index=i
						setTimeout(()=>{
								uni.createVideoContext(`video_${this.index}`,this).play()
						},300)		
					}
				}				
			},
			href(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zhi_index04{width:750upx;flex: 1;background-color: #000000;}
	.zhi_index05{position: absolute;top: 0;left: 0;}
	/* 导航栏区域 */
	.navBarWrap{
		position: absolute;height: 88rpx;width: 750rpx;top: 0;padding: 0 32rpx;flex-direction: row;justify-content: space-between;align-items: center;
	}
	.moreHandleWrap{
		position: absolute;
		width: 168rpx;
		height: 72rpx;
		background: #fff;
		top: 105rpx;
		right: 46rpx;
		border-radius: 10rpx;
		.handleItem{
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 72rpx;
		}
	}
	/* 用户信息区域 */
	.userInfoWrap{position: absolute;width: 750rpx;height: 100rpx;bottom: 200rpx;padding: 0 32rpx;flex-direction: row;justify-content: space-between;}
	.userInfoWrap .userInfoLeft{flex-direction: row;align-items: center;}
	.userInfoLeft .userIcon{width: 93rpx;}
	.userInfoLeft .userNameAddress{padding-left: 9rpx;}
	.userNameAddress .userAddress{flex-direction: row;align-items: center;}
	.userInfoWrap .userInfoRight{flex-direction: row;align-items: center;justify-content: space-between;width: 260rpx;}
	.userInfoRight .btnTxt{font-size: 22rpx;color: #fff;text-align: center;line-height: 52rpx;}
	.userInfoRight .gzBtn{width: 122rpx;height: 52rpx;border: 1rpx solid #ffffff;border-radius: 103rpx;box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(63,63,64,0.37);}
	.userInfoRight .lwBtn{width: 122rpx;height: 52rpx;background: #35655f;border-radius: 102rpx;box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(63,63,64,0.37); }
	/* 展开内容区域 */
	.expandContentWrap{
		position: fixed;width: 750rpx;height: 200rpx;bottom: 200rpx;flex-direction: column;padding: 0 32rpx;
	}
	/* 介绍区域 */
	.contentWrap{position: absolute;bottom: 100rpx;padding: 0 32rpx;flex-direction: row;height: 100rpx;width: 750rpx;}
	.contentWrap .content{flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.contentWrap .expandBtn{width: 70rpx;}
	/* 视频播放进度 */
	.zhi_index24{position: fixed;bottom: 100rpx;left: 0px;width: 750upx;}
	/* 其他操作区域 */
	.otherHandleWrap{position: absolute;width: 750rpx;height:100rpx;bottom: 0;padding: 0 32rpx;flex-direction: row;justify-content: space-between;align-items: center;background-color: #000000;}
	.otherHandleWrap .sayWhat{width: 238rpx;height: 64rpx;background: rgba(255,255,255,0.20);border-radius: 64rpx;flex-direction: row;padding-left: 24rpx;align-items: center;}
	.otherHandleWrap .userHandle{flex-direction: row;align-items: center;}
	.userHandle .handleImg{width: 42rpx;height: 42rpx;margin: 0 12rpx 0 24rpx;}
	.userHandle .handleNum{color: rgba(255,255,255,0.60);font-size: 30rpx;}
	/* 评论内容弹框 */
	.commentAlert{position: fixed;width: 750rpx;height: 1000rpx;bottom: 0;background: #fff;border-radius: 30rpx 30rpx 0 0;}
	.commentAlert .commentNum{height: 100rpx;position: relative;}
	.commentNum .closeBtn{position: absolute;top:30rpx;right: 30rpx;}
	.commentAlert .commentList{height: 800rpx;padding: 0 30rpx;}
	.commentList .commentItem{flex-direction: row;padding: 10rpx 0;}
	.commentItem .commentLeft{width: 93rpx;}
	.commentItem .commentRight{width: 597rpx;padding-left: 13rpx;}
	.commentRight .userNickName{flex-direction: row;justify-content: space-between;}
	.commentList .commentSubItem{
		flex-direction: row;padding: 10rpx 0 10rpx 106rpx;
		.commentRight{
			flex: 1;padding-left: 13rpx;
			.userNickName{flex-direction: row;justify-content: space-between;}
		}
	}
	.askHandleWrap{
		width: 140rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-left: 130rpx;
		border: 2rpx solid #35655f;
		.handleItem{
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 50rpx;
		}
	}
	.replyHandleWrap{
		width: 140rpx;
		height: 50rpx;
		border-radius: 10rpx;
		margin-left: 236rpx;
		border: 2rpx solid #35655f;
		.handleItem{
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 50rpx;
		}
	}
	.commentAlert .bottomBtn{position: fixed;width: 750rpx;height: 100rpx;background: #ffffff;box-shadow: 0rpx -12rpx 14rpx 0rpx rgba(59,98,194,0.03);padding: 0 32rpx;flex-direction: row;align-items: center;justify-content: space-between;}
	.bottomBtn .sayWhatInp{width: 590rpx;height: 64rpx;background: #f7f8fa;border-radius: 64rpx;flex-direction: row;align-items: center;padding-left: 20rpx;}
	.sayWhatInp .inpTxt{width: 518rpx;height: 32rpx;font-size: 26rpx;}
	
	/* 送礼物弹框 */
	.sendGiftAlert{
		position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);
		.sendGift{
			width: 750rpx;
			position: absolute;
			height: 630rpx;
			bottom: 0;
			background: #fff;
			border-radius: 50rpx 50rpx 0 0;
			.giftPad{
				padding: 40rpx 32rpx 0 32rpx;
				.giftList{
					flex-direction: row;
					justify-content: center;
					.giftItem{
						.giftImg{
							flex-direction: row;
							justify-content: center;
							.giftImgActive{
								width: 150rpx;
								height: 150rpx;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								border-radius: 10rpx;
							}
							.giftImgActive.active{
								background: #e0e3ef;
							}
						}
					}
				}
				.giftForm{
					padding: 32rpx;
					.inpItem{
						height: 88rpx;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
					}
				}
				.bottomBtn{
					height:88rpx;
					background: #35655f;
					border-radius: 50rpx;
				}
			}
			.closeBtn{
				position: absolute;
				width: 44rpx;
				height: 44rpx;
				right: 32rpx;
				top: 32rpx;
			}
		}
	}
	/* 分享 */
	.shareBox{position: fixed;top:0;left:0;right:0;bottom:0;background: rgba(0,0,0,0.5);}
	.shareDialog{width: 750rpx;height: 320rpx;background: #fff;position: absolute;bottom:0;}
	.sharelist{flex-direction: row;margin:50rpx 0 44rpx;justify-content: center;}
	.sharelist .shareitem{width: 187.5rpx;}
	.shareitem .imgWrap{flex-direction: row;justify-content: center;}
	.shareitem .shareImg{width: 100rpx;height: 100rpx;}
	.cancelShare{border-top:1rpx solid #e5e5e5;
	}
</style>