<template>
	<view class="footer" :class="['footer_'+type]" :style="data.style" >
		<view class="item" v-for="(item,index) in list" :key="index"  :style="{'margin-bottom':$store.state.safeBottomAz+'px'}">
			<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
			<text>{{item}}</text>
		</view>
	</view>
	<view class="footer footerZhangwei" :class="['footer_'+type]"  :style="{'margin-top':$store.state.safeBottomAz+'px'}">
		
	</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'
		},
		type2: {
			type: String,
			default: ''
		},
	})

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

	let {
		list,
		showTipLayer
	} = toRefs(data)

	onMounted(() => {
		if (props.type == 'xiaomi') {
			list.value = ["通话",
				"联系人",
				"营业厅"
			]
		}else if (props.type == 'oppo') {
			list.value = ["通话",
				"联系人",
				"营业厅"
			]
		}else if (props.type == 'huawei') {
			list.value = ["电话",
				"联系人",
				"收藏"
			]
		}else if (props.type == 'vivo') {
			list.value = ["拨号",
				"联系人",
				"收藏"
			]
		}
		if(props.type2=='ios'){
			data.style={'background-color':props.bgColor}
		}
		
	})
</script>

<style scoped lang="scss">

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		background: #f7f7f7;
		padding-top: 2px;
		.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-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;
			}
		}
	}
	.footerZhangwei{
		position: relative !important; 
		opacity: 0 !important;
		padding-top: 0 !important;
		height: 47px;
		background-color: rgba(0, 0, 0, 0) !important; 
	}
	.footer_huawei {
		background: #FAFAFA !important;
		padding-top: 3px;
		.item {
			image {
				width: 24px;
				height: 24px;
			}
		}
		.item:nth-child(1) {
			text {
				color: #0060EA;
			}
		}
	}
	.footer_vivo {
		background: #FAFAFA !important;
		padding-top: 13px;
		padding-bottom: 13px;
		.item {
			image {
				width: 24px;
				height: 24px;
			}
		}
		.item:nth-child(1) {
			text {
				color: #1BA552;
			}
		}
	}

	.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>