/**
 * 组件描述:官网顶栏导航
 * 通过@midea 媒体查询决定显示PC/移动端样式
 */

import {
	mapState
} from 'vuex'

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


import VDropdown from '@components/home/dropdown/dropdown.vue'
import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'

// 语言下拉菜单
import DropdownLang from '@components/home/dropdown-lang/dropdown-lang.vue'
import DropdownLogin from '@components/home/dropdown-login/dropdown-login.vue'

export default {
	name: 'VHeader',
	components: {
		VDropdown,
		MDropdown,
		DropdownLang,
		DropdownLogin,
	},
	computed: {
		locale() {
			return this.$i18n.locale || "tc";
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		}
	},
	data() {
		return {
			dropdownMVisible: false,
			loginMVisible: false,
			maxClientWidth: 1200,
			// 用于传入到导航组件dropdown 常规导航菜单数据
			navList: [],
			// 用于传入到导航组件dropdown 登菜单数据
			loginData: {},
			// 用于传入到导航组件dropdown 语言菜单数据
			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.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);
		},
		// 点击立即报价
		toQuote(){
			gotoVHIS(this.locale);
		}
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.checkIsSmallScreen(), false)
	},
	mounted() {
		window.addEventListener('resize', () => this.checkIsSmallScreen(), false);
		this.$root.eventBus.$on("langChange", () => {
			this.initData();
		});
	},
	watch: {
		userInfo(val) {
			this.buildLoginMenu();
		}
	},
	created() {
		this.initData();
	},
}