<template>
	<view class="page">
		<view class="box" v-for="(item,index) in dataList" :key="index">
			<view class="main-between cross-center header">

				<view class="cross-center head1">
					<view class="headimg">
						<image src="https://t17.9026.com/web/statics/image/index/msg.png" mode=""></image>
						<view class="isread" v-if="item.is_read!=1"></view>
					</view>
					客户楼盘绑定通知
				</view>
				<view class="main-between cross-center" @click="del_msg(item.id,index)">
					<!-- <view class="date">2021-11-17</view> -->
					<image class="del" src="https://t17.9026.com/web/statics/image/user-center/del.png" mode=""></image>
				</view>
			</view>
			<view class="center">

				<view class="center-text">{{item.message}}</view>

			</view>
			<!-- <view class="main-between footer cross-center border_top">
				<view class="left">查看详情</view>
				<image style="width: 12rpx;height: 22rpx;" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png"
					mode="" ></image>
			</view> -->
		</view>
		<view class="no-more" v-if="noMore && dataList.length>0">没有更多了...</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				dataList: [],
				noMore: false
			};
		},
		onLoad() {
			this.getMessageList()
		},
		onReachBottom() {
			if (!this.noMore) {
				this.page++
				this.getMessageList()
			}
		},
		methods: {
			getMessageList() {
				this.$request({
					url: this.$api.sale.message_list,
					data: {
						page: this.page
					},
					method: 'post'
				}).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.dataList = res.data.list
						} else {
							this.dataList = this.dataList(res.data.list)
						}
						if (res.data.list.length < 20) {
							this.noMore = true
						}
					}

				})
			},
			del_msg(id, index) {
				uni.showModal({
					title: '提示',
					content: '确定删除该条消息吗',
					success: (qq) => {
						if (qq.confirm) {
							this.$request({
								url: this.$api.sale.message_delete,
								data: {
									message_id: id
								},
				 			method: 'post'
							}).then(res => {
								if (res.code === 0) {
									this.dataList.splice(index, 1)
								}
							})
						} else if (qq.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 22rpx;
		background: #f6f6f6;
	}

	.box {
		width: 678rpx;
		height: auto;
		background: #ffffff;
		border-radius: 6rpx;
		padding: 26rpx 31rpx;
		margin: 0 auto 20rpx;

		.border_bottom {
			border-bottom: 1px solid #eaeaea;
		}

		.border_top {
			border-top: 1px solid #eaeaea;
		}

		.header {
			padding-bottom: 21rpx;

			.head {
				max-width: 500rpx;
				height: 48rpx;
				background: #f6f6f6;
				border-radius: 24rpx;
				padding: 0 17rpx;
				overflow: hidden;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}

				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.head1 {
				max-width: 500rpx;
				height: 48rpx;
				overflow: hidden;

				.headimg {
					width: 45rpx;
					height: 45rpx;
					position: relative;
					margin-right: 14rpx;

					image {
						width: 45rpx;
						height: 45rpx;

						border-radius: 50%;
					}

					.isread {
						position: absolute;
						top: 0;
						right: 0;
						width: 16rpx;
						height: 16rpx;
						background: #FB122B;
						border: 2rpx solid #FFFFFF;
						border-radius: 50%;
					}
				}


				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.date {
				font-size: 22rpx;
				font-weight: 500;
				color: #222222;
				margin-right: 30rpx;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.center {
			padding: 0 0 10rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.isopen {
				font-size: 24rpx;
				font-weight: bold;
				color: #a18353;

				image {
					width: 19rpx;
					height: 12rpx;
					margin-left: 8rpx;
				}
			}

			.center-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 34rpx;
			}

			.center-img {
				margin-top: 28rpx;

				image {
					width: 146rpx;
					height: 96rpx;
					border-radius: 12rpx;
					margin-right: 15rpx;
				}
			}

			.goods {
				padding-top: 42rpx;
				border-top: 1rpx solid #EAEAEA;

				.desc {
					width: 511rpx;
					height: 141rpx;
					background: #F8F8F8;
					border-radius: 6rpx;
					padding: 18rpx 24rpx;

					.goods-img {
						width: 101rpx;
						height: 99rpx;
						border-radius: 8rpx;
						margin-right: 21rpx;
					}

					.title {
						font-size: 26rpx;
						font-weight: 500;
						color: #222222;
						line-height: 46rpx;
					}

					.price {
						font-size: 24rpx;
						font-weight: 500;
						color: #FC3737;
						line-height: 36rpx;

						.company {}
					}
				}

			}
		}

		.footer {
			padding: 28rpx 0 0;

			.left {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.no-more {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 37rpx;
		text-align: center;
	}
</style>
