import api from '@/api/api';
import {
	httpGet,
	httpPost
} from '@/api/fetch-api.js';
import {
	mapGetters,
	mapActions,
	mapState
} from "vuex";
var UA = require("ua-device");

import { gotoVHIS } from '@/utils/biz.js';

export default {
	data() {
		return {
			key: 'value',
			// swiper
			swiperOption: {
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				autoplay: {
					delay: 5000,
					stopOnLastSlide: false,
					disableOnInteraction: false
				},
				speed: 1000,
			},
			bannerList: [],
			bannerCandidateList: [],
			// 视频
			playerOptions: {},

		}
	},
	components: {},
	computed: {
		...mapState({
			isSmallScreen: state => state.isSmallScreen,
			isMobile: state => state.isMobile
		}),
		locale() {
			return this.$i18n.locale || 'tc';
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		},
		player() {
			return this.$refs.videoPlayer.player
		},

	},
	methods: {
		toVhis() {
			gotoVHIS(this.locale);
		},
		/**
		 * 推荐产品
		 */
		onRecommendHandler(val) {
			if (val == 1) {
				this.toVhis();
			}
			if (val == 2) {
				this.$router.push({
					path: "/custom/service?q=m6"
				})
			}
			if (val == 3) {
				this.$router.push({
					path: "/custom/product"
				})
			}
			if (val == 4) {
				this.$router.push({
					path: "/news/list"
				})
			}

		},

		/**
		 * 推荐产品
		 */
		onMoreNewsHandler() {
			this.$router.push({
				path: "/news/list"
			})
		},

		/**
		 * 去新闻详情页面
		 * 需要带id
		 */
		toNewsDetail() {
			this.$router.push({
				path: '/news/detail'
			})
		},
		toProfile() {
			this.$router.push({
				path: '/profile'
			})
		},
		refreshVideoPlayer() {
			let videoUrl = sessionStorage.getItem("_video_url");
			let posterUrl = sessionStorage.getItem("_poster_url");
			let playerOptions = {
				width: 800,
				height: 450,
				// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				autoplay: false, //如果true,浏览器准备好时开始回放。
				muted: true, // 默认情况下将会消除任何音频。
				language: 'en',
				// playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
				sources: [{
					type: "video/mp4",
					// mp4
					src: videoUrl,
					// webm
					// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
				}],
				poster: posterUrl,
				controlBar: {
					timeDivider: true,
					durationDisplay: true,
					remainingTimeDisplay: false,
					fullscreenToggle: true //全屏按钮
				}
			}
			let output = new UA(navigator.userAgent);
			let deviceType = output.device.type;
			let isMobile = deviceType == "mobile";
			// if (this.isSmallScreen) {
			if (isMobile) {
				playerOptions.aspectRatio = "16:9";
			}
			this.playerOptions = playerOptions;
		},
		initData() {
			this.fetchBanner().then(res => {
				this.bannerCandidateList = res;
				this.refreshBanner();
			});
			this.fetchIndexVideo().then(res => {
				this.refreshVideoPlayer();
			});
			if(!isMobile){
				window.addEventListener('resize', () => this.refreshVideoPlayer(), false);
			}
		},
		fetchBanner() {
			return new Promise((resolve, reject) => {
				httpPost({ url: api.banner }).then(res => {
					resolve(res);
				});
			});
		},
		fetchIndexVideo() {
			return new Promise((resolve, reject) => {
				httpPost({ url: api.indexVideo }).then(res => {
					sessionStorage.setItem("_video_url", res.videoUrl);
					sessionStorage.setItem("_poster_url", res.posterUrl);
					resolve(res);
				});
			});
		},
		refreshBanner() {
			let key = this.locale;
			if (key == "zh") {
				key = "cn";
			}
			let bannerList = [];
			this.bannerCandidateList.forEach(element => {
				bannerList.push(element[key]);
			});
			this.$set(this, 'bannerList', bannerList);
		},
		btnNavigateTo(type, link) {
			location.href = link;
		}
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.refreshVideoPlayer(), false);
	},
	mounted() {
		this.initData();
	},

	created() {

	}

}