<template>
	<view class="header" :class="['header_'+type]">
			<view class="title" v-if="type!='vivo'">
				{{title}}
			</view>
			<view class="search" v-if="type!='oppo'&&type!='huawei'&&type!='vivo'">
				<view class="left" >
					<image src="/static/image/call/iosSearchLeft.png" mode=""></image>
					{{searchTitle}}
				</view>
					<image v-if="type=='ios'" src="/static/image/call/iosSearchRight.png" mode=""></image>
			</view>
			<view class="selectType" v-if="type=='huawei'">
				<view class="btn " :class="{'active':active}"  @click.stop="setActive(true)">
					全部来电
				</view>
				<view class="btn" :class="{'active':!active}"  @click.stop="setActive(false)">
					未接来电
				</view>
			</view>
			<view class="selectTypeVivo" v-if="type=='vivo'">
				<view class="btn " :class="{'active':active}"  @click.stop="setActive(true)">
					全部
				</view>
				<view class="btn" :class="{'active':!active}"  @click.stop="setActive(false)">
					未接
				</view>
			</view>
			<view class="select" v-if="type=='xiaomi'">
				全部通话
				<image src="/static/image/call/xiaomiHeaderSelectImg.png" mode=""></image>
			</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		toRefs
	} from 'vue'

	const topPopup = ref()

	// 定义组件属性
	const props = defineProps({

		type: {
			type: String,
			default: 'ios'
		},
	})

	const data = reactive({
		active:true,
		statusBarHeight: 0,
		showTipLayer: true,
		title:'最近通话',
		searchTitle:"搜索",
		list:[
			"个人收藏",
			"最近通话",
			"通讯录",
			"拨号键盘",
			"语音留言"
		]
	})

	let {
		active,
		searchTitle,
		title,
		list,
		showTipLayer
	} = toRefs(data)

	onMounted(() => {
		if(props.type=='xiaomi'){
			searchTitle.value="搜索联系人"
			title.value="通话"
			// console.log('aaaaaaaaaaa')
		}else if(props.type=='oppo'){
			title.value="通话"
		}else if(props.type=='huawei'){
			title.value="电话"
		}
		
	})
	
	function setActive(status){
		active.value=status
		uni.$emit('setActive',status)
	}
</script>

<style scoped lang="scss">
.header{
	padding: 0 15px;
	background-color: #fff;
	.title{
		font-weight: bold;
		font-size: 32px;
		color: #1A1A1A;
	}
	.search{
		margin-top: 10px;
		width: 100%;
		height: 34px;
		background: #EEEEF0;
		border-radius: 12px 12px 12px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			font-size: 16px;
			color: #838383;
		}
		image{
			width: 16px;
			height: 16px;
			margin: 0 8px;
		}
	}
	.select{
		padding-left: 15px;
		margin-top: 20px;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 13px;
		color: #8B8DA5;
		image{
			width: 13px;
			height: 13px;
			margin-left: 6px;
		}
	}
}
.selectTypeVivo{
	padding-top: 18px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	.btn{
		width: 62px;
		background-color: #F6F6F6;
		text-align: center;
		font-size: 13px;
		color: #555555;
		height: 30px;
		line-height: 30px;
		border-radius: 8px 0 0 8px;
		margin: 0 1px;
	}
	.btn:nth-child(2){
		border-radius:0 8px 8px 0;
	}
	.active{
		font-size: 13px;
		color: #1A1A1A;
		background: #DCF6E6;
	}
}
.header_huawei{
	padding-bottom: 14px;
	.title{
		padding-left: 3px;
		font-weight: bold;
		font-size: 30px !important;
		color: #1A1A1A !important;
	}
	.selectType{
		margin-top: 18px;
		height: 38px;
		background: #F4F4F4;
		border-radius: 19px 19px 19px 19px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2px;
		.btn{
			width: 50%;
			text-align: center;
			font-size: 13px;
			color: #555555;
			height: 34px;
			line-height: 34px;
		}
		.active{
			font-size: 13px;
			color: #1A1A1A;
			background: #fff;
			border-radius: 19px 19px 19px 19px;
		}

	}
}
.header_xiaomi{
	.title{
		padding-left: 15px;
		font-weight: 400 !important;
		font-size: 30px !important;
		color: #1A1A1A !important;
	}
	.search{
		margin-top: 10px;
		height: 41px  !important;
		background: #F0F0F0  !important;
		border-radius: 21px 21px 21px 21px  !important;
		.left{
			font-size: 16px  !important;
			color: #A9A9A9  !important;
		}
		image{
			width: 16px;
			height: 16px;
			margin: 0 8px;
		}
	}
}
.header_xiaomi{
				.search{
					.left{
						margin-left: 20rpx;
					}
				}
			}
</style>