import {
	mapState
} from 'vuex'

export default {
	name: "DropDownList",
	data() {
		return {
			activeIndex: 0,
			sTitle: this.title,
		};
	},
	props: {
		type: {
			type: String,
			default () {
				return "nav";
			}
		},
		title: {
			type: String,
			default () {
				return "";
			}
		},
		dataList: {
			type: Array,
			default () {
				return [];
			}
		},
		labelProperty: {
			type: String,
			default () {
				return "name";
			}
		}
	},
	directives: {
		dpl: {
			bind(el) {
				el.style.display = "none";
			}
		}
	},
	methods: {
		onOverHandler(event) {
			let ul = event.currentTarget.childNodes[1].childNodes[1];
			ul.style.display = "block";
		},
		onOutHandler(event) {
			let ul = event.currentTarget.childNodes[1].childNodes[1];
			ul.style.display = "none";
		},
		onClickHandler(index) {
			// 隐藏其他
			let path = event.path || (event.composedPath && event.composedPath()); //兼容火狐和safari
			path[1].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;
			} else {
				// 不是的话，跳转页面
				this.$router.push({
					path: curData.path
				})
			}
			// console.log("name:", this.dataList[index].name);
			// this.$emit("change", {
			// 	index: index,
			// 	value: this.dataList[index]
			// });
		}
	},
	computed: {
		dplLable() {
			return this.dataList[this.activeIndex][this.labelProperty];
		}
	},
	created() {
		// this.
	},
};