<template>
	<z-paging
		ref="paging"
		v-model="dataList"
		:default-page-size="pageSize"
		:hide-no-more-by-limit="pageSize"
		:empty-view-text="errorText"
		:auto="false"
		:use-virtual-list="true"
		auto-show-back-to-top
		@query="queryList"
	>
		<view slot="top">
			<u-navbar
				title="待办"
				leftIcon="calendar"
				leftIconSize="24px"
				placeholder
			>
			</u-navbar>
			<u-tabs
				:list="tabsList"
				:scrollable="false"
				@click="handleTabsClick"
			></u-tabs>
		</view>
		<view class="box">
			<view v-for="(item, index) in dataList" :key="index" class="timeline">
				<view class="board">
					<view class="date">{{ item.date }}</view>
					<view class="info">
						<text class="num">2</text>
						<text>件待办</text>
					</view>
				</view>
				<view class="line">
					<view class="auther">
						<text class="name">来自张三</text>
						<view class="time">
							<u-icon class="icon" name="clock" size="13" color="#999"></u-icon>
							<text>02-16 22:21</text>
						</view>
					</view>
					<view class="content">
						<view class="title">待办标题</view>
						<view class="note"
							>详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明</view
						>
					</view>
					<view class="actions">
						<view class="tags">
							<u-tag
								class="tag"
								text="标签"
								type="warning"
								size="mini"
								plain
							></u-tag>
							<u-tag
								class="tag"
								text="标签"
								type="warning"
								size="mini"
								plain
							></u-tag>
						</view>
						<view class="button">
							<u-button
								type="primary"
								size="normal"
								:plain="true"
								text="立即处理"
							></u-button>
						</view>
					</view>
				</view>
				<view class="line">
					<view class="auther">
						<text class="name">来自张三</text>
						<view class="time">
							<u-icon class="icon" name="clock" size="13" color="#999"></u-icon>
							<text>02-16 22:21</text>
						</view>
					</view>
					<view class="content">
						<view class="title">待办标题</view>
						<view class="note"
							>详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明</view
						>
					</view>
					<view class="actions">
						<view class="tags">
							<u-tag
								class="tag"
								text="标签"
								type="warning"
								size="mini"
								plain
							></u-tag>
							<u-tag
								class="tag"
								text="标签"
								type="warning"
								size="mini"
								plain
							></u-tag>
						</view>
						<view class="button">
							<u-button
								type="primary"
								size="normal"
								:plain="true"
								text="立即处理"
							></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
export default {
	data() {
		return {
			tabsList: [
				{
					key: 'all',
					name: '全部',
				},
				{
					key: 'process',
					name: '流程',
				},
				{
					key: 'mission',
					name: '任务',
				},
				{
					key: 'order',
					name: '工单',
				},
				{
					key: 'check',
					name: '核查',
				},
			],
			dataList: [],
			pageSize: 10,
			errorText: '',
		}
	},
	onLoad() {
		this.$store
			.dispatch('getLoginInfo')
			.then(() => {
				//
			})
			.catch(() => {})
	},
	onShow() {
		this.$store
			.dispatch('getLoginInfo')
			.then(() => {
				this.$refs.paging.refresh()
			})
			.catch(() => {})
	},
	computed: {
		// 在线状态
		isOnline() {
			return this.$store.getters.isOnline
		},
	},
	methods: {
		handleTabsClick(item) {
			console.log(item.key)
		},
		// 请求数据列表
		queryList(pageNo, pageSize) {
			this.errorText = '404'
			console.log(pageNo, pageSize)
			//this.$refs.paging.endRefresh()
			this.$refs.paging.complete([
				{
					date: '今天',
				},
				{
					date: '昨天',
				},
			])
		},
	},
}
</script>

<style lang="scss" scoped>
.u-tabs {
	background-color: #fff;
}

.box {
	margin: 10px;

	.timeline {
		.board {
			display: flex;
			font-size: 14px;
			padding: 8px 15px;
			margin-bottom: 10px;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 0 5px 10px #ddd;

			.date {
				flex: 1;
				color: #2979ff;
			}

			.info {
				.num {
					font-weight: 500;
					color: #2979ff;
					margin-right: 5px;
				}
			}
		}

		.line {
			position: relative;
			padding: 10px 15px;
			margin: 0 0 10px 10px;
			background-color: #fff;
			border-radius: 4px;

			.auther {
				display: flex;
				font-size: 13px;
				padding-bottom: 5px;
				border-bottom: 1px solid #eee;

				.name {
					flex: 1;
				}

				.time {
					display: flex;
					color: #999;

					.icon {
						position: relative;
						top: 1px;
					}

					text {
						margin-left: 5px;
					}
				}
			}

			.content {
				.title {
					font-size: 16px;
					color: #000;
					font-weight: 700;
					margin-top: 10px;
				}

				.note {
					font-size: 13px;
					color: #666;
					margin-top: 10px;
					line-height: 1.7;
				}
			}

			.actions {
				display: flex;
				align-items: center;
				margin-top: 15px;

				.tags {
					flex: 1;
					display: flex;

					.tag {
						+ .tag {
							margin-left: 10px;
						}
					}
				}

				.button {
					.u-button {
						height: 30px;
					}
				}
			}

			&:before {
				content: '';
				display: block;
				position: absolute;
				left: 5px;
				top: -10px;
				height: 10px;
				width: 3px;
				background-color: #cecece;
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				right: 15px;
				top: -10px;
				height: 10px;
				width: 3px;
				background-color: #cecece;
			}
		}
	}
}
</style>