import {
	mapState
} from 'vuex'
import VDropdown from '@components/home/dropdown/dropdown.vue'

export default {
	name: 'VHeader',
	components: {
		VDropdown
	},
	data() {
		return {
			maxClientWidth: 950,
			navList: [{
					name: "產品介紹",
					path: "",
					list: []
				},
				{
					name: "客戶服務",
					path: "",
					list: [{
							name: "保單查詢",
							path: ""
						},
						{
							name: "理賠報案",
							path: ""
						},
						{
							name: "客戶投訴",
							path: ""
						},
						{
							name: "保全變更",
							path: ""
						},
						{
							name: "聯繫方式",
							path: ""
						},
						{
							name: "續期繳費",
							path: ""
						},
						{
							name: "預約服務",
							path: "/reservation"
						}
					]
				},
				{
					name: "新聞資訊",
					path: "/news/list",
					list: []
				},
				{
					name: "關於平安人壽",
					path: "",
					list: [{
							name: "公司簡介",
							path: "/profile"
						},
						{
							name: "領導人概況",
							path: ""
						},
					]
				},
			],
			loginData: {
				name: "登入",
				path: "",
				list: [{
						name: "登入",
						path: "/login",
						value: ""
					},
					{
						name: "修改密码",
						path: "",
						value: ""
					},
					{
						name: "登出",
						path: "",
						value: ""
					},
				]
			},
			langData: {
				name: "繁",
				path: "",
				list: [{
						name: "繁",
						path: "",
						value: "tc"
					},
					{
						name: "简",
						path: "",
						value: "zh"
					},
					{
						name: "EN",
						path: "",
						value: "en"
					},
				]
			}
		}
	},
	computed: {
		...mapState({
			isSmallScreen: state => state.isSmallScreen
		})
	},
	methods: {
		toIndex() {
			this.$router.push({
				path: "/"
			})
		},
		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)
			}
		}
	},
	mounted() {
		const self = this;
		self.checkIsSmallScreen();
		document.body.onresize = () => {
			self.checkIsSmallScreen();
		}
	}
}