import {
	mapState
} from 'vuex'

import api from '@/api/api'
import {
	httpPost
} from '@/api/fetch-api.js'

export default {
	name: "DropDownList",
	data() {
		return {
			activeIndex: 0,
			sTitle: this.dataObj && this.dataObj.name || '',
		};
	},
	props: {
		type: {
			type: String,
			default () {
				return "nav";
			}
		},
		dataObj: {
			type: Object,
			default () {
				return {};
			}
		},
		dataList: {
			type: Array,
			default () {
				return [];
			}
		},
		labelProperty: {
			type: String,
			default () {
				return "name";
			}
		}
	},
	directives: {
		dpl: {
			bind(el) {
				el.style.display = "none";
			}
		}
	},
	methods: {
		onNavHandler() {
			let path = this.dataObj && this.dataObj.path || "";
			if (path) {
				this.$router.push({
					path: path
				})
			}
		},
		onOverHandler(event) {
			let ul = event.currentTarget.childNodes[1].childNodes[1];
			ul.style.display = "block";
		},
		onOutHandler(event) {
			// console.log(event);
			let ul = event.currentTarget.childNodes[1].childNodes[1];
			ul.style.display = "none";
		},
		onClickHandler(event, index) {
			// 隐藏其他
			// let path = event.path || (event.composedPath && event.composedPath()); //兼容火狐和safari
			// path[1].style.display = "none";
			if (this.$refs.ul) {
				this.$refs.ul.style.display = "none";
			}

			// 选择item
			this.activeIndex = index;
			let curData = this.dataList[index];
			if (this.type == "lang") {
				// 如果是语言设置，则设置语言
				let lang = curData.value;
				this.$i18n.locale = lang;
				localStorage.setItem("lang", lang);
				this.sTitle = curData.name;
				window.location.reload();
			} else {
				// console.log("curData.value == =", curData.value)
				if (curData.value == "logout") {
					// this.$store.commit("SET_USER_INFO", null);
					this.loginHandler();
				} else {
					// 不是的话，跳转页面
					this.$router.push({
						path: curData.path
					})
				}
			}
		},
		loginHandler() {
			httpPost({
				url: api.logout
			}).then(() => {
				this.$store.commit("SET_USER_INFO", null);
				this.showLogoutTip();
			});
		},
		showLogoutTip() {
			// 登出后的提示
			alert("登出成功");
		}
	},
	computed: {
		dplLable() {
			return this.dataList[this.activeIndex][this.labelProperty];
		}
	},
	created() {},
};