<template>
	<view :class="`${phone}-style`">
		<!-- 导航样式 -->
		<view class="nav-bar-box" :class="{ 'border-nav-bar-box': isScroll }">
			<NavBar :isBack="false" :bgColor="isScroll ? navBarBgColor : '#fff'" :buttonGroup="buttonGroup"
				@button-click="util.clickTitlePopupButton" tipLayerType="message-list-tip" isTipLayer isClickNavBarOpenPopup
				tipLayerText="添加短信" @add="emit('add')">
				<!-- 左侧文字图标 -->
				<template v-slot:left>
					<view v-if="phone == 'iphone'" class="flex flex-align-center">
						<image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png" mode="">
						</image>
						<text class="left-text">过滤条件</text>
					</view>
					<view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
						<text class="left-text">信息</text>
					</view>
				</template>
				<!-- 中间标题 -->
				<template v-slot:center>
					<view v-if="phone == 'iphone' && isScroll" class="center-text">
						信息
					</view>
				</template>
				<!-- 右侧图标 -->
				<template v-slot:right>
					<!-- iphone -->
					<view v-if="phone == 'iphone'">
						<image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode="">
						</image>
						<image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode="">
						</image>
					</view>
					<!-- mi -->
					<view v-if="phone == 'mi'">
						<image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
					</view>
					<!-- oppo -->
					<view v-if="phone == 'oppo'">
						<image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode="">
						</image>
						<image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode="">
						</image>
					</view>
					<!-- huawei -->
					<view v-if="phone == 'huawei'">
						<image v-if="isScroll" class="right-icon" src="/static/image/phone-message/huawei/nav-search.png" mode="">
						</image>
						<image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
						<image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
					</view>
					<!-- vivo -->
					<view v-if="phone == 'vivo'">
						<image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
						</image>
						<image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
						<image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode="">
						</image>
					</view>
				</template>
			</NavBar>
		</view>

		<!-- 主体内容 -->
		<view class="main-container">
			<!-- 顶部搜索栏样式 -->
			<view class="top-box">
				<view v-if="showInfo.text" class="text">{{ showInfo.text }}</view>
				<view v-if="showInfo.secondText" class="second-text">{{ showInfo.secondText }}</view>
				<view v-if="showInfo.placeholder" class="search-box flex flex-align-center">
					<image class="icon" :src="`/static/image/phone-message/${props.phone}/search.png`">
					</image>
					<input class="input flex-1" :placeholder="showInfo.placeholder" type="text" disabled>
					<image v-if="phone != 'mi'" class="icon" :src="`/static/image/phone-message/${props.phone}/mic.png`">
					</image>
				</view>
			</view>
			<slot>
			</slot>
		</view>
		<view class="bottom-placeholder" :style="{'margin-top':$store.state.safeBottomAz+'px'}"></view>
		<!-- 底部样式 -->
		<template v-if="phone == 'mi' || phone == 'oppo'">
			<image class="add-message" @click="emit('add')"
				:src="`/static/image/phone-message/${props.phone}/add-message.png`"></image>
			<view class="bottom-box " :style="{height: (74+$store.state.safeBottomAz)+'px'}">
				<view class="flex" :style="{height: '148rpx'}">
					<view class="item flex-1 h100">
						<image class="icon" :src="`/static/image/phone-message/${props.phone}/bottom-left.png`"></image>
						<text>{{ showInfo.bottomLtext }}</text>
					</view>
					<view class="item flex-1 h100">
						<image class="icon" :src="`/static/image/phone-message/${props.phone}/bottom-right.png`"></image>
						<text class="grey">{{ showInfo.bottomRtext }}</text>
					</view>
				</view>

			</view>
		</template>

	</view>
</template>

<script setup>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	import {
		reactive,
		computed
	} from 'vue'
	import {
		util
	} from '@/utils/common.js';

	const emit = defineEmits(['add', 'setSim', 'setNoticeCount'])



	const props = defineProps({
		// 手机品牌
		phone: {
			type: String,
			default: 'iphone'
		},
		// 是否向下滚动
		isScroll: {
			type: Boolean,
			default: false
		},
		noticeCount: {
			type: Number,
			default: 0
		}
	})

	const buttonGroup = computed(() => {
		const groups = [{
			name: "添加短信",
			click: () => {
				emit('add')
			}
		}, {
			name: "设置卡1卡2运营商",
			click: () => {
				emit('setSim')
			}
		}]

		if (props.phone == 'huawei') {
			groups.push({
				name: "设置通知信息未读数",
				click: () => {
					emit('setNoticeCount')
				}
			})
		}

		return groups
	})


	const navBarBgColor = computed(() => {
		return props.phone === 'iphone' ? '#F8F8F8' : '#FFFFFF';
	})

	const data = reactive({
		navBar: {
			title: '信息',
		},

	})

	// 展示文字信息
	const showInfo = computed(() => {
		let text, placeholder, secondText, bottomLtext, bottomRtext
		switch (props.phone) {
			case "iphone":
				text = "信息"
				placeholder = '搜索'
				break;
			case "mi":
				text = "主要"
				placeholder = '搜索短信'
				bottomLtext = "主要"
				bottomRtext = "推广"
				break;
			case "oppo":
				text = "消息"
				placeholder = ''
				bottomLtext = "消息"
				bottomRtext = "通知"
				break;
			case "huawei":
				text = "信息"
				placeholder = '搜索信息'
				secondText = props.noticeCount > 0 ? `${props.noticeCount} 条未读` : ''
				break;
			case "vivo":
				placeholder = '搜索信息'
				break;
			default:
				break;
		}
		return {
			text,
			placeholder,
			secondText,
			bottomLtext,
			bottomRtext
		}
	})
</script>

<style>
	@import '@/common/main.css';

	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="less" scoped>
	::v-deep .uni-navbar__header-btns {
		width: 100px !important;
		flex: 1;
	}

	::v-deep .uni-navbar__header {
		align-items: center !important;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		border-top: 1rpx solid #E7E7E7;
		background-color: #ffffff;
		z-index: 9;

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

			.icon {
				width: 44rpx;
				height: 44rpx;
			}

			text {
				font-size: 20rpx;
				color: #333;
			}

			.grey {
				color: #999999;
			}
		}
	}

	// 苹果机型样式
	.iphone-style {
		.mg-r-30 {
			margin-right: 60rpx;
		}

		.mg-r-5 {
			margin-right: 10rpx;
		}

		.left-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.right-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.left-text {
			font-size: 32rpx;
			color: #0278E2;
			margin-left: 10rpx;
		}

		.center-text {
			font-size: 32rpx;
			color: #1a1a1a;
		}

		.border-nav-bar-box {
			::v-deep .nav-bar-container {
				box-shadow: 0 -0.3px 0 0 #B5B5B5 inset;
			}
		}

		.main-container {
			.top-box {
				padding: 20rpx 32rpx 0;

				.text {
					color: #1A1A1A;
					font-size: 64rpx;
					font-weight: 700;
					line-height: 72rpx;
				}

				.search-box {
					margin-top: 20rpx;
					background-color: #EEEEF0;
					height: 68rpx;
					border-radius: 24rpx;
					padding: 0 16rpx;

					.icon {
						width: 32rpx;
						height: 32rpx;
					}

					.input {
						margin: 0 14rpx;

						::v-deep .input-placeholder {
							color: #838383;
							font-size: 32rpx;
						}
					}
				}
			}
		}

	}

	// 小米机型样式
	.mi-style {
		.right-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}

		.main-container {

			.top-box {
				padding: 0 22rpx 0;

				.text {
					color: #1A1A1A;
					font-size: 60rpx;
					font-weight: 500;
				}

				.search-box {
					margin-top: 32rpx;
					background-color: #F0F0F0;
					height: 84rpx;
					border-radius: 42rpx;
					padding: 0 34rpx;

					.icon {
						width: 32rpx;
						height: 32rpx;
					}

					.input {
						margin: 0 18rpx;

						::v-deep .input-placeholder {
							color: #A9A9A9;
							font-size: 32rpx;
						}
					}
				}
			}
		}

		.add-message {
			position: fixed;
			bottom: 168rpx;
			right: 44rpx;
			width: 120rpx;
			height: 120rpx;
		}

		.bottom-placeholder {
			height: 120rpx;
			width: 100%;
		}

	}

	// oppo机型
	.oppo-style {
		.mg-r-52 {
			margin-right: 52rpx;
		}

		.mg-r-14 {
			margin-right: 14rpx;
		}

		.right-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.main-container {


			.top-box {
				padding: 16rpx 34rpx 0;
				margin-bottom: 50rpx;

				.text {
					color: #1A1A1A;
					font-size: 64rpx;
					font-weight: 900;
				}
			}
		}

		.add-message {
			width: 116rpx;
			height: 116rpx;
			position: fixed;
			bottom: 200rpx;
			right: 46rpx;
		}

		.bottom-placeholder {
			height: 148rpx;
			width: 100%;
		}


		.bottom-box {

			background-color: #FAFAFA;
			border-top: 1rpx solid #DCDCDC;

			.item {
				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 12rpx;
				}

				text {
					color: #191919;
				}

				.grey {
					color: #717171;
				}
			}
		}

	}

	// 华为机型
	.huawei-style {

		::v-deep .uni-navbar__header-container {
			flex: 0;
		}

		.left-text {
			color: #1a1a1a;
			font-size: 50rpx;
			font-weight: 700;
			margin-left: 10rpx;
		}

		.right-icon {
			width: 76rpx;
			height: 76rpx;
			margin: 0 8rpx;
		}

		.border-nav-bar-box {
			::v-deep .nav-bar {
				border-bottom: 1rpx solid #D1D1D1;
			}
		}

		.main-container {


			.top-box {
				padding: 40rpx 34rpx 0;

				.text {
					color: #1A1A1A;
					font-size: 60rpx;
					font-weight: 700;
					line-height: 60rpx;
				}

				.second-text {
					color: #646464;
					font-size: 28rpx;
					margin-top: 10rpx;
				}

				.search-box {
					margin-top: 40rpx;
					background-color: #F4F4F4;
					height: 76rpx;
					border-radius: 38rpx;
					padding: 0 24rpx;

					.icon {
						width: 32rpx;
						height: 32rpx;
					}

					.input {
						margin: 0 14rpx;

						::v-deep .input-placeholder {
							color: #646464;
							font-size: 32rpx;
						}
					}
				}
			}
		}
	}

	// vivo机型
	.vivo-style {
		::v-deep .uni-navbar__header-container {
			flex: 0;
		}

		.m-r-34 {
			margin-right: 34rpx !important;
		}

		.right-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 52rpx;
		}

		.left-text {
			font-size: 54rpx;
			color: #1A1A1A;
			font-weight: 700;
			margin-left: 30rpx;
		}

		.main-container {
			.top-box {
				padding: 0 46rpx;

				.search-box {
					position: relative;
					margin-top: 70rpx;
					background-color: #ffffff;
					height: 76rpx;
					border-radius: 38rpx;
					padding: 0 10rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
						flex-shrink: 0;
					}

					.input {
						flex: 1;
						margin: 0 20rpx;

						::v-deep .input-placeholder {
							color: #9A9A9A;
							font-size: 32rpx;
						}
					}
				}

				.search-box::after {
					position: absolute;
					content: '';
					width: 100%;
					height: 12rpx;
					background-color: #F0F0F0;
					bottom: 0;
					left: 0;
				}
			}
		}
	}
</style>