<template>
	<view>
		<view class="page-content">
			<image :mode="mode" :src="src"></image>
		</view>
		<view class="page-tabbar">
			<view class="page-tabbar-tip" @click="getContent">获取文案</view>
			<view class="page-tabbar-tip red" @click="save">保存海报去分享</view>
		</view>
		<uni-popup ref="popup" type="bottom" class="popup">
			<view class="popup-content">
				<view>{{content}}</view>
				<view class="popup-copy" @click="copyContent">复制文案</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '快乐8 横屏走势图',
				mode: 'widthFix',
				text: '快乐8 横屏走势图',
				content: '暂无文案',
				src: 'https://img2.ydniu.com/app/cd/202204122204/%E5%BF%AB%E4%B9%908%E5%9F%BA%E6%9C%AC%E8%B5%B0%E5%8A%BF%E5%9B%BE.png'
			}
		},
		async onLoad(e) {
			if (e) {
				this.title = e.text
				this.text = e.text
				this.src = e.src
				if (e.content) this.content = e.content

				uni.setNavigationBarTitle({
					title: this.title
				})
			}

			//#ifdef H5
			if (window.Android) {
				const $h5 = require('@/static/js/h5-utils.js')
				$h5.head_tv(this.src)
			}
			//#endif
		},
		methods: {
			getContent() {
				this.$refs.popup.open('center')
			},
			copyContent() {
				uni.setClipboardData({
					data: this.content
				});

				uni.showToast({
					title: '复制成功'
				})

				this.$refs.popup.close()
			},
			save() {
				//#ifdef H5
				require('@/static/js/h5-utils.js').downloadIamge(this.src)
				//#endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {}

	.page-content image {
		width: 90%;
		margin: 10px 5%;
	}

	.page-tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		max-width: $sys-max-width;

		height: 44px;
		background-color: #F8F8F8;
		justify-content: space-around;
		font-size: 16px;
		color: #333333;
	}

	.page-tabbar-tip {
		width: 33%;
		height: 44px;
		line-height: 44px;
		text-align: center;
	}

	.red {
		color: #E34439;
	}

	.popup {
		z-index: 9999;
	}

	.popup-content {
		width: 80vw;
		max-width: 520px;
		padding: 20px 20px 38px 20px;
		background-color: #FFFFFF;
		color: #101010;
		font-size: 14px;
		min-height: 80px;
		border-radius: 5px;
	}

	.popup-copy {
		position: absolute;
		bottom: 0;
		left: calc((100% - 50px) / 2);
		color: #DAB16B;
		font-size: 16px;
		padding-bottom: 10px;
	}
</style>