<template>
	<div class="main">
		<!-- pc -->
		<div v-if="device == 'chrome' || device == 'no-chrome'" class="content">
			<v-logo></v-logo>
			<div class="tool-cover">
				<img :src="img_url" alt="">
			</div>
			<!-- 非chrome -->
			<div v-if="device == 'no-chrome'">
				<div class="txt">Use chrome browser to access {{ detail.postBizData.linkTitle || '' }}</div>
				<install-chrome></install-chrome>
			</div>
			<!-- chrome -->
			<div v-if="device == 'chrome'">
				<div class="txt">Use chrome browser to access {{ detail.postBizData.linkTitle || '' }}</div>
				<install-extension :extensionsInstallUrl="config.extensionsInstallUrl"></install-extension>
			</div>
		</div>

		<!-- 移动端 -->
		<!-- <div v-if="device == 'ios' || device == '安卓'" class="mobile">
            <div class="mobile-content">
                <img :src="detail.postBizData.linkImagePath" alt="">
                <div class="title">Open link on PC to use Subway Surfers</div>
            </div>
            <div class="area-button">
                <div class="btn1" @click="clickExtension">
                    Install Chrome Extension
                </div>
                <div class="btn2" @click="clickCopy" :data-clipboard-text="copy_link">
                    Copy Link
                </div>
            </div>
        </div> -->
	</div>
</template>
<script>
import VLogo from '@/components/logo.vue'
import InstallChrome from '@/components/InstallChrome.vue'
import InstallExtension from '@/components/InstallExtension.vue'
import { getBrowserType, baseURL, appVersionCode, jumpUrl } from '@/utils/help.js'
import axios from 'axios'
import Cookies from 'js-cookie'
import { Toast } from 'vant';


var ClipboardJS = require('clipboard')

export default {
	name: 'tool_box',
	data() {
		return {
			config: {},
			copy_link: '',
			title: 'Install DeNet Plugin to Participate',
			metaTitle: 'Install DeNet Plugin to Participate',
			device: '',
			detail: {},
			img_url: ''
		}
	},
	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: appVersionCode,
			meta: [
				// facebook 
				{
					name: 'og:url',
					content: jumpUrl + 'toolbox/' + this.$route.params.id
				},
				{
					name: 'og:title',
					content: this.metaTitle
				},
				{
					name: 'og:image',
					content: this.detail.postBizData.linkImagePath || ''
				},
				// twitter
				{
					name: 'twitter:card',
					content: 'summary_large_image'
				},
				{
					name: 'twitter:url',
					content: jumpUrl + 'toolbox/' + this.$route.params.id
				},
				{
					name: 'twitter:title',
					content: this.detail.postBizData.linkTitle || this.metaTitle
				},
				{
					name: 'twitter:image',
					content: this.detail.postBizData.linkImagePath || ''
				}
			]
		}
	},
	components: {
		VLogo,
		InstallChrome,
		InstallExtension
	},
	async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
			baseInfo: {
				appVersionCode: appVersionCode,
				mid: '00000000-0000-0000-0000-000000000000',
			},
			params: {
				postId: route.params.id || ''
			}
		})
		if (data.code == 0) {
			if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
				data.data.postBizData = JSON.parse(data.data.postBizData)
			}
			if (data.data.postBizData === null) {
				data.data.postBizData = {
					postUserInfo: {}
				}
			}
			console.log('detail', data.data)

			return {
				detail: data.data,
			}
		}
	},
	mounted() {
		if (this.detail.postBizData.linkImagePath.indexOf('default') > 0) {
			this.img_url = '/img/img-default.png'
		} else {
			this.img_url = this.detail.postBizData.linkImagePath
		}


		this.copy_link = window.location.href
		this.device = getBrowserType()
		console.log('device', this.device)
		if (this.device == 'ios' || this.device == '安卓') {
			return window.location = this.detail.postBizData.convertUrl
		}
		this.getConfig()
		if (this.device == 'chrome') {
			this.setCookie()
		}
	},

	methods: {
		setCookie() {
			let pickupInfo = {
				srcContentId: this.detail.srcContentId || '',
				postNickName: this.detail.srcUserId || '',
				createTime: Date.now(),
				jump_type: 'tool_box',
				postId: this.detail.postBizData.postId || ''
			};
			Cookies.set('jump_info', JSON.stringify(pickupInfo), { expires: 1000 });
		},
		async getConfig() {
			let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid
				},
				params: {
				}
			})
			if (data.code == 0) {
				this.config = data.data;
			}
		},
		clickCopy() {
			// 复制链接
			var clipboard = new ClipboardJS('.btn2');
			clipboard.on('success', function (e) {
				Toast('copy success');
				e.clearSelection();
			});

			clipboard.on('error', function (e) {
				Toast('copy error');
			});
		},
		clickExtension() {
			window.open(this.config.extensionsInstallUrl)
		}
	}
}

</script>
<style lang="scss" >
html,
body,
#__nuxt,
#__layout {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #F5FAFF;


}

.main {
	width: 100%;
	height: 100%;

	.tool-cover {
		min-width: 400px;
		margin-right: 90px;

		img {
			max-height: 270px;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 70px;

		.txt {
			width: 400px;
			font-weight: 700;
			font-size: 36px;
			line-height: 44px;
			/* or 122% */

			letter-spacing: 0.3px;

			color: #323232;
			margin-bottom: 40px;
		}
	}

	.mobile {
		.mobile-content {
			padding: 36px 16px 0 16px;

			img {
				width: 100%;
				margin-bottom: 25px;
				border-radius: 5px;
			}

			.title {
				font-weight: 700;
				font-size: 22px;
				line-height: 26px;
				text-align: center;
				letter-spacing: 0.3px;
				color: #000000;
				width: 240px;
				margin: 0 auto;
			}
		}



		.area-button {
			position: fixed;
			width: 100%;
			padding: 27px 16px 25px 16px;
			bottom: 0;
			height: 170px;

			.btn1 {
				height: 50px;
				line-height: 50px;
				background: #1D9BF0;
				border-radius: 100px;
				width: 100%;
				font-weight: 600;
				font-size: 18px;
				text-align: center;
				letter-spacing: 0.3px;

				color: #FFFFFF;
				margin-bottom: 16px;
			}

			.btn2 {
				height: 50px;
				line-height: 50px;
				background: rgba(29, 155, 240, 0.01);
				border: 1px solid #1D9BF0;
				border-radius: 100px;
				width: 100%;
				font-weight: 600;
				font-size: 18px;
				text-align: center;
				letter-spacing: 0.3px;
				color: #1D9BF0;

			}
		}
	}
}
</style>