<template>
	<view class="content ">
		<view v-if="list.length" class="tipsList">
			<view class="list" v-for="(ite,ind) in list" :key="ind" @click="handleDetail">
				<icon class="iconfont icon-tixing-copy"></icon>
				<view class="info">
					<view class="time">
						<text class="name">{{ite.title}}</text>
						<text class="date">{{ite.time}}</text>
					</view>
					<text class="des">{{ite.content}}</text>
				</view>
			</view>
			<view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
		</view>

		<view class="nolist" v-if="!lastPage">
			<image src="../../static/none.png"></image>
			<text>暂无数据！</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: "驱虫",
					type: 1,
					time: "2023/05/15",
					des: "哈哈哈哈或或或或",
					static: 1
				}],
				page: 1,
				lastPage: 0,
			}
		},
		onLoad() {
			let that = this
			that.page = 1
		},
		onReachBottom() {
			let that = this
			if (!this.lastPage || this.page >= this.lastPage) {
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
		},
		methods: {
			getList(page) {
				let that = this
				that.$model.getHistoryList({
					pageNo: this.page,
					pageSize: 10,
				}).then((res) => {
					if (res.code != 0) return
					this.list = this.list.concat(res.data.rows)
					this.lastPage = res.data.totalpage
				})
			},
			handleDetail() {}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 15px;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.list {
		margin-top: 15px;
		background-color: #fff !important;

		icon {
			background-color: #f7f7f7;
			border: 8px solid #f7f7f7;
			position: relative;
		}

		icon::after {
			content: "";
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			top: 0px;
			right: 0px;
		}

		.time {
			display: inline-block;
			font-weight: bold;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				color: #333;
				width: 60%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 0;
			}

			.date {
				font-weight: 500;
				font-size: 12px;
				width: auto;
				margin-top: 0;
				float: right;
			}
		}
	}
</style>