<template>
	<view class="box">
		<image class="logo" src='../../imgs/logo.png' mode="widthFix"></image>
		<view class="box-cent">
			<view class="box-cent1">
				<view class="view-box" v-for="(item, index) in listData" :key="index">
					<span class="view-title"> {{item.dateTitle}}</span>
					<view class="view-ul">
						<view class="view-li" v-for="(row, rind) in item.meetingList" :key="rind"
							@click="handleItemClaick(item,row)">
							{{rind + 1}}. {{row.title}}
						</view>
					</view>
				</view>
				<view v-if="!listData.length" class="view-none"> 暂无会议 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryMeeting,
		meetingDetails
	} from "@/common/api";
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				listData: []
			};
		},
		created() {
			this.getQueryMeeting() //获取会议列表
		},
		methods: {
			// 查看详情
			handleItemClaick(_item, _row) {
				// enable false 不可查看详情
				if (!_item.enable) return
				uni.navigateTo({
					url: `/pages/index/details?id=${_row.id}`,
				});
			},
			// 获取验证码
			async getQueryMeeting() {
				const res = await queryMeeting({
					param: {}
				});
				const {
					code,
					data,
					msg
				} = res;
				if (code === 200) {
					this.listData = data
				}
			},
		},
		// 页面显示调用接口
		onLoad() {},
	};
</script>

<style lang="scss" scoped>
	.view-none{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40px !important;
	}
	.view-ul {
		text-align: left;
		margin-bottom: 16px;

		.view-li {
			font-size: 18px;
			line-height: 26px;
		}
	}

	.view-title {
		display: inline-block;
		border: 1px solid #000;
		padding: 0 14px;
		margin-bottom: 16px;
		line-height: 50px;
		border-radius: 6px;
		font-size: 20px;
		font-weight: bold;
	}

	.box {
		height: 100vh;
		box-sizing: border-box;
		padding: 20px;
		display: flex;
		flex-direction: column;

		.box-cent {
			flex: 1;
			margin-top: 70px;
			position: relative;
		}

		.box-cent1 {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			overflow: auto;
		}
	}
</style>
<style></style>