import {
	mapState
} from 'vuex'

import {
	getObjByListKeyValue
} from '@utils/utils.js'
import VDropdown from '@components/home/dropdown/dropdown.vue'
import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'

export default {
	name: 'VHeader',
	components: {
		VDropdown,
		MDropdown
	},
	computed: {
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		}
	},
	data() {
		return {
			dropdownMVisible: false,
			maxClientWidth: 1200,
			navList: [],
			loginData: {},
			langData: {
				name: "繁",
				path: "",
				list: [{
						name: "繁",
						path: "",
						value: "tc"
					},
					{
						name: "简",
						path: "",
						value: "zh"
					},
					{
						name: "EN",
						path: "",
						value: "en"
					},
				]
			}
		}
	},
	computed: {
		...mapState({
			isSmallScreen: state => state.isSmallScreen,
			userInfo: state => state.userInfo
		})
	},
	methods: {
		toIndex() {
			this.$router.push({
				path: "/"
			})
		},
		onShowDropdown(boo = true) {
			this.dropdownMVisible = boo;
			// if (this.dropdownMVisible) {
			// 	this.stop();
			// } else {
			// 	this.move();
			// }
		},
		// stop() {
		// 	var mo = function (e) {
		// 		e.preventDefault();
		// 	};
		// 	document.body.style.overflow = 'hidden';
		// 	document.addEventListener("touchmove", mo, false); //禁止页面滑动
		// },
		// /***取消滑动限制***/
		// move() {
		// 	var mo = function (e) {
		// 		e.preventDefault();
		// 	};
		// 	document.body.style.overflow = ''; //出现滚动条
		// 	document.removeEventListener("touchmove", mo, false);
		// },
		checkIsSmallScreen() {
			const self = this;
			if (document.body.clientWidth > self.maxClientWidth) {
				self.$store.commit('IS_SMALL_SCREEN', false)
			} else {
				self.$store.commit('IS_SMALL_SCREEN', true)
			}
		},
		initData() {
			let i18n = this.$i18n.messages[this.$i18n.locale] || {};
			// this.loginData = i18n.nav.loginData;
			this._buildLoginMenu();
			this.navList = i18n.nav.navList;
			let curLang = getObjByListKeyValue(this.$i18n.locale, "value", this.langData.list)
			this.langData.name = curLang.name;
		},
		_buildLoginMenu() {
			// 构建登录页
			let i18n = this.$i18n.messages[this.$i18n.locale] || {};
			let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
			let list = [];
			if (this.userInfo && this.userInfo.name) {
				menuData.name = this.userInfo.name;
				menuData.list.forEach(element => {
					if (element.type == "auth") {
						list.push(element);
					}
				});
			} else {
				menuData.list.forEach(element => {
					if (element.type == "noAuth") {
						list.push(element);
					}
				});
			}
			menuData.list = list;
			this.$set(this, 'loginData', menuData);
		}
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.checkIsSmallScreen(), false)
	},
	mounted() {
		// const self = this;
		// self.checkIsSmallScreen();
		// document.body.onresize = () => {
		// 	self.checkIsSmallScreen();
		// }
		window.addEventListener('resize', () => this.checkIsSmallScreen(), false);

	},
	watch: {
		userInfo(val) {
			this._buildLoginMenu();
		}
	},
	created() {
		this.initData();
	},
}