<template>
	<view class="header" :class="['header_'+type]">
			<view class="title">
				{{title}}
			</view>
			<view class="search">
				<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="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({
		statusBarHeight: 0,
		showTipLayer: true,
		title:'最近通话',
		searchTitle:"搜索",
		list:[
			"个人收藏",
			"最近通话",
			"通讯录",
			"拨号键盘",
			"语音留言"
		]
	})

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

	onMounted(() => {
		if(props.type=='xiaomi'){
			searchTitle.value="搜索联系人"
			title.value="通话"
			console.log('aaaaaaaaaaa')
		}
	})
</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;
		}
	}
}
.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: #AAAAAA  !important;
		}
		image{
			width: 16px;
			height: 16px;
			margin: 0 8px;
		}
	}
}
</style>