<template>
	<view>
		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
			<!-- <view v-for="index in 100">{{ index }}</view> -->
			<!-- <List :phone="data.phone"></List> -->
			<MessageList></MessageList>

		</MessageNavBar>
	</view>
</template>

<script setup>
import MessageNavBar from '@/components/message/message-nav-bar.vue'
import MessageList from '@/components/message/list.vue'
import {
	ref,
	reactive
} from 'vue'
import {
	onLoad,
	onPageScroll
} from "@dcloudio/uni-app";
import {
	util
} from '@/utils/common.js';
import List from '@/components/call-log/list/list.vue';

const data = reactive({
	navBar: {
		title: '信息',
		bgColor: '#FFFFFF',
	},
	phone: 'iphone',
	isScroll: false
})

const options = [{
	text: '取消',
	style: {
		backgroundColor: '#007aff'
	}
}, {
	text: '确认',
	style: {
		backgroundColor: '#dd524d'
	}
}]

onLoad((options) => {
	if (options.phone) {
		data.phone = options.phone
	}
})

onPageScroll((e) => {
	console.log(e.scrollTop)
	if (e.scrollTop > 60) {
		data.isScroll = true
	} else {
		data.isScroll = false
	}
})

</script>

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

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

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

.mi-style {
	.right-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
}
</style>
