<template>
	<view class="rumor">
		<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
		<view class="button-area">
			<view class="button" @click="goAnotherMiniProgranm">我来查证</view>
			<button class="button1 button" open-type="contact" session-from="sessionFrom">线索提交</button>
			<view class="button2 button" @click="goRumorWebView">权威发布</view>
		</view>
		
		<!-- 卡片 -->
		<div class="article-answer-stack">  
			<flipcard ref="stack" :pages="stackList" :stackInit="stackInit"></flipcard>  
		</div> 
		 <!-- 下一个 上一个 -->
		 <view class="button-area1">
		 	<!-- <button class="button button-left" @click="rumor('true')">真</button> -->
			<image src="http://111.198.10.15:11404/imgs/xj/真选中.png" class="true" @click="rumor('true')" />
			<image src="http://111.198.10.15:11404/imgs/xj/假选中.png" class="false" @click="rumor('false')" />
			<!-- <button class="button1 button" open-type="contact" session-from="sessionFrom"></button> -->
			<!-- <button class="button button-right" @click="rumor('false')">假</button> -->
		 </view>
	</view>
</template>

<script>
	import fetch from '@/common/fetch.js';
	import flipcard from '../../components/card.vue'
	import { getRumorList } from '@/api/rumor.js'
	export default {
		components:{  
			flipcard  
		},  
	data() {  
		return {  
			stackList:[  
						{
							contentId: 2,
							endtime: "12月31日 23:59",
							noNum: 47,
							source: "新疆网络举报",
							title: "草莓个头大是因为打了激素",
							yesNum: 73,
						}
						],  
			stackInit: {  
				currentPage:0,  
				visible: 3  
			}  
		}  
	},  
	mounted(){
		// 开启分享好友、朋友圈
		uni.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		});
	},
	//分享好友
	onShareAppMessage() {
		return {
			title: '新疆网络举报',
			imageUrl: '../../static/share.png',
		};
	},
	//分享朋友圈
	onShareTimeline() {
		return {
			title: '新疆网络举报',
		}
	},
	methods: {  
		rumor(type) {
			if (type === 'true'){
				this.$refs["stack"].vote('1')
				this.handleStackNext()
			}
			else {
				this.$refs["stack"].vote('0')
				this.handleStackNext()
			}
		},
		handleStackPrev() {  
			this.$refs["stack"].prev()  
		},  
		handleStackNext() {  
			this.$refs["stack"].next()  
		},
		// 点击辟谣信息
		goRumorWebView() {
			wx.navigateTo({
				url: '/packageToolList/rumorInfo/rumorInfo'
			})
		},
		// 点击我来查证跳转其他小程序
		goAnotherMiniProgranm() {
			wx.navigateToMiniProgram({
			  appId: 'wx52552ed6726aaa0b',
			})
		},
		// 获取谣言列表
		fetchData() {
			getRumorList().then(res => {
				console.log(res, '谣言列表')
				this.stackList = res
			}).catch(error => {
				console.log(error, 'error')
			})
		}
	},
	mounted() {
		this.fetchData()
	}
}
</script>

<style lang="scss" scoped>
	.rumor {
		// padding: 40rpx;
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		padding-top: 300rpx;
		padding-bottom: 40rpx;
		overflow: hidden;
		.button-area {
			height: 120rpx;
			display: flex;
			justify-content: space-around;
			box-sizing: border-box;
			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-weight: 600;
				box-sizing: border-box;
				width: 180rpx;
				height: 80rpx;
				background: #fff;
				color: #0043ac;
				border: 2rpx solid #0043ac;
				border-radius: 20rpx;
				// animation: btn4Ani 2s linear infinite;
				margin: 0;
				white-space: nowrap;
			}
				
			.button2 {
				background: #fff;
				color: #0043ac;
				border: 2rpx solid #0043ac;
				// animation: 6s btn4Ani 2s linear infinite;
			}
			.button1 {
				background: #0043ac;
				color: #fff;
				border: 2rpx solid #0043ac;
				animation: btn4Ani 2s linear infinite;
			}
		}
		.button-area1 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			bottom: 80rpx;
			width: 100%;
			padding: 0 70rpx;
			box-sizing: border-box;
			.true{
				width: 120rpx;
				height: 120rpx;
			}
			.false{
				width: 120rpx;
				height: 120rpx;
			}
			.button-left {
				width: 45% !important;
				padding: 20rpx 40rpx;
				margin-top: 0;
				color: #fff !important;
				// background-color: #fff;
				// border: 2rpx solid #0043ac;
				background-color: #408bf6 !important;
				border: 2rpx solid #408bf6 !important;
			}
			.button-right {
				width: 45% !important;
				padding: 20rpx 40rpx;
				margin-top: 0;
				color: #0043ac;
				background-color: #fff;
				border: 2rpx solid #0043ac;
			}
			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-weight: 600;
				box-sizing: border-box;
				width: 180rpx;
				height: 80rpx;
				background: #fff;
				color: #0043ac;
				border: 2rpx solid #0043ac;
				border-radius: 20rpx;
				// animation: btn4Ani 2s linear infinite;
				margin: 0;
				white-space: nowrap;
			}
				
			.button2 {
				background: #fff;
				color: #0043ac;
				border: 2rpx solid #0043ac;
				// animation: 6s btn4Ani 2s linear infinite;
			}
			.button1 {
				background: #0043ac;
				color: #fff;
				border: 2rpx solid #0043ac;
				animation: btn4Ani 2s linear infinite;
			}
		}
		@keyframes btn4Ani {
		  0% {
		    width: 200rpx;
		    height: 80rpx;
		  }
		  30% {
		    width: 280rpx;
		    height: 112rpx;
		    transform: rotate(0deg);
		  }
		  40% {
		    width: 280rpx;
		    height: 112rpx;
		    transform: rotate(-5deg);
		  }
		  50% {
		    width: 280rpx;
		    height: 112rpx;
		    transform: rotate(5deg);
		  }
		  60% {
		    width: 280rpx;
		    height: 112rpx;
		    transform: rotate(-5deg);
		  }
		  70% {
		    width: 280rpx;
		    height: 112rpx;
		    transform: rotate(0deg);
		  }
		  100% {
		    transform: rotate(0deg);
		    width: 200rpx;
		    height: 80rpx;
		  }
		}
		
	}
	.article-answer {  
		&-stack{  
			width: 100%;
			height: 100%;
			position: relative;
			list-style: none;
			pointer-events: none;
			padding: 30rpx;
			box-sizing: border-box;  
		}  
	}  
</style>