<template>
    <view id="drapdown">
		<view class="tab-box">
			<view
			@click="onChangeDrapShow(index)"
			:style="currentTab === index? activeStyle : inactiveStyle"
			class="tab-item"
			v-for="(item, index) in tabList" :key="index"
			>
				<text>{{ item.label }}</text>
				<u-icon :color="getDownIcon(index).color" :size="getDownIcon(index).size" :name="getDownIcon(index).name"></u-icon>
			</view>
		</view>
		
		<view class="drop-down-popup">
			<u-transition :show="drapShow" @click="onClose" :custom-style="overlayStyle" mode="fade">
				<view class="child-list" :style="{'height': contentHeight + 'rpx'}">
					<view @click="onClickLabel(item, index)" v-for="(item, index) in currentChildList" :key="index" class="label-item">
						<text>{{ item.label }}</text>
					</view>
				</view>
			</u-transition>
		</view>
    </view>
</template>

<script>
export default {
	props: {
		tabList: { // 数据列表
			type: Array,
			default: []
		},
		iconSize: { // 上下图标大小
			type: String,
			default: '14'
		},
		activeStyle: { // 菜单选中的样式
			type: Object,
			default: {'color': '#3c9cff'}
		},
		inactiveStyle: { // 菜单非选中的样式
			type: Object,
			default: {'color': '#000'}
		}
	},
    data() {
        return {
			currentTab: '',// 当前选中的tab
			
			drapShow: false, // 蒙版显示隐藏
			overlayStyle: {}, // 蒙版样式
			contentHeight: 0 // 内容高度（用于动画）
        };
    },
	computed: {
		currentChildList(){ // 蒙版内展示的数据内容
			if(this.currentTab !== '') {
				return this.tabList[this.currentTab].children
			} else {
				return []
			}
		},
		getDownIcon() { // 动态设置图标
			return (index) => {
				const style = {
					size: this.iconSize,
					color: this.inactiveStyle['color'],
					name: 'arrow-up-fill'
				}
				if (this.drapShow && this.currentTab === index) { // 下拉菜单打开选项变蓝色
					style.color =  this.activeStyle['color']
					style.name = 'arrow-down-fill'
				}
				return style;
			}
		}
	},
	mounted(){
		this.init()
	},
    methods: {
		// 初始化样式，决定蒙版位置，放在tab下
		init(){
			const query = uni.createSelectorQuery().in(this);
			query.select('#drapdown').boundingClientRect(data => {
				// console.log(data)
				console.log(this.$u.sys())
				let top = 0
				// #ifdef H5
				top += this.$u.sys().windowTop;
				// #endif
				this.overlayStyle = {
					position: 'fixed',
					top: `${data.top + top + 50}px`, // 50是tablist高度
					left: 0,
					right: 0,
					zIndex: 998,
					bottom: 0,
					'background-color': `rgba(0, 0, 0, ${0.5})`
				}
			}).exec();
		},
		// 打开关闭蒙版
		onChangeDrapShow(index){
			if(this.drapShow && this.currentTab === index) {
				this.currentTab = ''
				this.contentHeight = 0
				this.drapShow = false
			} else {
				this.currentTab = index
				this.contentHeight = this.currentChildList.length * 90
				
				this.drapShow = true
			}
		},
		// 关闭蒙版
		onClose(){
			this.currentTab = ''
			this.contentHeight = 0
			this.drapShow = false
		},
		// 点击蒙版内数据
		onClickLabel(item, index){
			this.onClose()
			this.$emit('click', item, index)
		}
    }
};
</script>

<style scoped>
	.tab-box {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		background-color: #FFF;
	}
	.tab-item {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.tab-item > text{ 
		margin-right: 10rpx;
	}
	
	.child-list {
		background-color: #FFF;
		overflow: hidden;
		transition: all .15s;
	}
	
	.label-item {
		padding: 24rpx 24rpx;
	}
	
	.mask-popup{
		transition: opacity 300ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms, transform 300ms ease-out 0ms;
		transform-origin: 50% 50%;
	}
</style>
