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;
				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);

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