<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>
</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:[  
						{
							id:'1',
							rumor:'今天会下雨吗？',
							approveRate:'80%',
							againstRate:'20%'
						},
						{
							id:'2',
							rumor:'兔子吃胡萝卜吗？',
							approveRate:'80%',
							againstRate:'20%'
						},
						
				],  
			stackInit: {  
				currentPage:0,  
				visible: 3  
			}  
		}  
	},  
	mounted(){
		// 开启分享好友、朋友圈
		uni.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		});
	},
	//分享好友
	onShareAppMessage() {
		return {
			title: '新疆网络举报',
			imageUrl: '../../static/share.png',
		};
	},
	//分享朋友圈
	onShareTimeline() {
		return {
			title: '新疆网络举报',
		}
	},
	methods: {  
		handleStackPrev() {  
			this.$refs["stack"].prev()  
		},  
		handleStackNext() {  
			this.$refs["stack"].next()  
		},
		// 点击辟谣信息
		goRumorWebView() {
			wx.navigateTo({
				url: '/packageToolList/rumorInfo/rumorInfo'
			})
		},
		// 点击我来查证跳转其他小程序
		goAnotherMiniProgranm() {
			wx.navigateToMiniProgram({
			  appId: 'wx52552ed6726aaa0b',
			})
		},
		// 获取谣言列表
		fetchData() {
			getRumorList({rumor:''}).then(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;
			}
		}
		@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>