<template>
	<view class="footer" :class="['footer_'+type]">
		<view class="item" v-for="(item,index) in list" :key="index">
			<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
			<text>{{item}}</text>
		</view>
	</view>
	<view class="footer footerZhangwei" :class="['footer_'+type]">
		<view class="item" v-for="(item,index) in list" :key="index">
			<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
			<text>{{item}}</text>
		</view>
	</view>
</template>

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

	const topPopup = ref()

	// 定义组件属性
	const props = defineProps({
		bgColor: {
			type: String,
			default: '#fff'
		},
		textColor: {
			type: String,
			default: '#000'
		},
		title: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'ios'
		},
	})

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

	let {
		list,
		showTipLayer
	} = toRefs(data)

	onMounted(() => {
		if (props.type == 'xiaomi') {
			list.value = ["通话",
				"联系人",
				"营业厅"
			]
		}else if (props.type == 'oppo') {
			list.value = ["通话",
				"联系人",
				"营业厅"
			]
		}
	})
</script>

<style scoped lang="scss">
	.footerZhangwei{
		position: relative !important; 
		opacity: 0 !important;
	}
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		background: #f7f7f7;

		.item {
			display: flex;
			flex-direction: column;
			text-align: center;
			align-items: center;

			image {
				width: 32px;
				height: 32px;
			}

			text {
				font-size: 10px;
				color: #959597;
			}
		}
	}

	.footer_ios {
		padding-top: 2px;
		padding-bottom: constant(safe-area-inset-bottom) !important; // 兼容 IOS<11.2 
		padding-bottom: env(safe-area-inset-bottom) !important; // 兼容 IOS>11.2 
		.item:nth-child(2) {
			text {
				color: #007AFC;
			}
		}
	}


	.footer_xiaomi ,.footer_oppo{
		padding-top: 7px;
		padding-bottom: 17px;
		background-color: #fff !important;
		.item {
			image {
				width: 24px;
				height: 24px;
			}
		
			text {
				font-size: 10px;
				color: #999999;
			}
		}
		.item:nth-child(1) {
			text {
				color: #333;
			}
		}
	}
	
</style>