<template>
	<view class="header">
		<view class="flex-row align-center">
			<image class="header-logo" src="/static/images/logotitle.png" mode="aspectFill"></image>
			<navigator url="/pages/search/search" class="search-box">
				<uni-icons type="search" size="20" color="#fff"></uni-icons>
				<text class="search-box-text">输入关键词搜索片源</text>
			</navigator>
			<navigator url="/pages/user/history" hover-class="none" class="header-btn">
				<uni-icons custom-prefix="xicon" type="x-icon-history" color="#fff" size="20"></uni-icons>
			</navigator>
			<!-- #ifdef APP-PLUS -->
			<navigator url="/pages/user/download" hover-class="none" class="header-btn">
				<uni-icons custom-prefix="xicon" type="x-icon-download" color="#fff" size="20"></uni-icons>
			</navigator>
			<!-- #endif -->
		</view>
		<view class="header-screen">
			<view class="header-navs">
				<u-tabs
					:line-width="25"
					:line-height="2"
					line-color="#000"
					:inactiveStyle="{ color: '#fff', fontSize: '16px' }"
					:item-style="{ height: '36px', padding: '0 10px' }"
					:active-style="{ fontSize: '18px', fontWeight: '500', color: '#DA2538' }"
					:list="navs"
					:current="value"
					@click="tabsClick"
				></u-tabs>
			</view>
			<uni-icons type="list" size="25" style="padding-left: 5px; color: #da2538" @click="show = !show"></uni-icons>
		</view>
		<transition name="dropdown-fade" v-if="show">
			<view class="Dropdown">
				<view v-for="(item, index) in navs" :key="index" class="Dropdown-navs" :class="value === index ? 'selected' : ''" @click="tabs(index)">
					{{ item.name }}
				</view>
			</view>
		</transition>
	</view>
</template>

<script>
export default {
	props: {
		navs: {
			type: Array,
			default() {
				return [];
			}
		},
		value: {
			type: [String, Number],
			default: 0
		}
	},
	data() {
		return {
			show: false
		};
	},
	methods: {
		tabsClick(data) {
			if (this.value != data.index) {
				this.$emit('input', data.index);
			}
		},
		tabs(index) {
			if (this.value != index) {
				this.$emit('input', index);
				this.show = false;
			}
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
.header-screen {
	padding: 0 20px 0 0;
	display: flex;
	align-items: center;
	.header-navs {
		width: 95%;
	}
}

.header {
	// height:90px;
	position: relative;
	z-index: 1;
	.header-logo {
		margin-top: 13px;
		margin-left: 10px;
		width: 100px;
		height: 30px;
	}
	.search-box {
		margin: 15px 5px 5px;
		padding: 5px 15px 5px 10px;
		background: #aaaaaa;
		border-radius: 19px;
		opacity: 0.3;
		flex: 1 1 0%;
		// background-color: rgba(255, 255, 255, 0.5);
		border-radius: 18px;
		display: flex;
		align-items: center;
		.search-box-text {
			flex: 1 1 0%;
			margin-left: 4px;
			font-size: 14px;
			color: #fff;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.header-btn {
		width: 30px;
		margin: 10px 13px 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Dropdown {
		color: #fff;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		padding: 0 10px;
		.Dropdown-navs {
			text-align: center;
			width: 20%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 10px;
			padding: 5px 5px;
		}
		.selected {
			padding: 5px 5px;
			font-weight: 500;
			color: #da2538;
			border-radius: 50px;
			border: #da2538 solid 1px;
		}
	}
}
.dropdown-fade-enter-active,
.dropdown-fade-leave-active {
	transition: height 10s;
}
.dropdown-fade-enter,
.dropdown-fade-leave-to {
	height: 0;
	overflow: hidden;
}
</style>
