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,
			loginMVisible: 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(evtStr) {
			this.dropdownMVisible = false;
			this.loginMVisible = false;
			if (evtStr == 'nav') {
				this.dropdownMVisible = true;
			} else if (evtStr == 'login') {
				this.loginMVisible = true;
			} else { }
		},
		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;
				if (this.$i18n.locale == "en" && this.userInfo.nameEn) {
					menuData.name = this.userInfo.nameEn;
				}
				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);
			// console.log(this.userInfo);
		}
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.checkIsSmallScreen(), false)
	},
	mounted() {
		// const self = this;
		// self.checkIsSmallScreen();
		// document.body.onresize = () => {
		// 	self.checkIsSmallScreen();
		// }
		window.addEventListener('resize', () => this.checkIsSmallScreen(), false);
		this.$root.eventBus.$on("langChange", () => {
			this.initData();
		});
	},
	watch: {
		userInfo(val) {
			this._buildLoginMenu();
		}
	},
	created() {
		this.initData();
	},
}