<template>
	<view class="container">
		<!-- 顶部轮播图 -->
		<swiper class="swiper" autoplay="true" interval="3000" duration="500" circular="true">
			<swiper-item style="border-radius: 10px;" v-for="(item, index) in banners" :key="index">
				<image class="swiper-image" :src="item.image" mode="aspectFill" />
			</swiper-item>
		</swiper>
		<div @click="onNotice" v-model="notices" style="display: flex; justify-content: space-between; padding: 10px;">
			<span>公告</span>
			<span>公告</span>
		</div>
		<view class="notice-item"  v-for="(item,index) in notices" :key="index">
			<text style="padding-right: 10px;">{{item.publish_date}} </text>
			<text>{{item.title}}</text>
		</view>
		</div>
		<span style="padding: 10px;">订单</span>
		<div class="order-status">
			<div class="image-text-container">
				<img :src="imgsrc" alt="未完成订单图标" class="icon"  @click="switchTab('/pages/shipment/shipment?tabActive=unfinished')">
				<!-- <span class="badge" v-if="unfinishedOrders > 0">{{ unfinishedOrders }}</span> -->
				<span class="label">未完成订单</span>
			</div>
			<div class="image-text-container" >
				<img :src="imgsrc2" alt="已完成订单图标" class="icon"  @click="switchTab('/pages/shipment/shipment?tabActive=finished')">
				<span class="label">已完成订单</span>
			</div>
			<div class="image-text-container" >
				<img :src="imgsrc3" alt="送货单明细图标" class="icon"  @click="switchTab('/pages/shipment/shipment?tabActive=all')">
				<span class="label">送货单明细</span>
			</div>
		</div>

	</view>

</template>

<script>
	import {
		getBulletin,
		userMobileOperation
	} from '../../api/apiList'

	export default {
		data() {
			return {
				imgsrc: require('../../static/img/tabbar/reserve.png'),
				imgsrc2: require('../../static/img/tabbar/reserve-active.png'),
				imgsrc3: require('../../static/img/tabbar/shipment-active.png'),
				// 模拟轮播图数据
				banners: [{
						image: require('../../static/img/head/head.png')
					},
					{
						image: require('../../static/img/head/head.png')
					},
					{
						image: require('../../static/img/head/head.png')
					},
					{
						image: require('../../static/img/head/head.png')
					}
				],
				notices: []
			}
		},
		methods: {
			switchTab(url) {
				// 这里可以编写跳转到详细页面的逻辑，或者弹出一个模态框显示内容
				// uni.showToast({
				// 	title: notice.content,
				// 	icon: 'none'
				// });
				console.log(url)
				uni.navigateTo({
					url: url,
				})
			},
			//获取用户信息
			getUserInfo() {
				userMobileOperation('getUserInfo').then(res => {
					let data = res.data.data
					data.mobile = data.userExt.mobile || '暂无'
					getApp().globalData.cacheUserInfo=data 
				})
			},
			//公告
			getBulletin() {
				const reqData = {
					"args": {
						"pageNum": 1,
						"pageSize": 10
					}
				}
				getBulletin(reqData).then(res => {
					// uni.stopPullDownRefresh()
					let datas = res.data.data
					this.notices = datas;
				})
			},
			//跳转公告
			onNotice(){
				uni.navigateTo({
					url: `/subpkg/notice/notice`,
				})
			}
		},
		onLoad: function() {
			this.getBulletin();
			this.getUserInfo();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			this.getBulletin();
		},
	}
</script>

<style scoped>
	/* 父容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		// align-items: center;
		align-items: left;
		padding: 5px;
	}

	/* swiper 组件的样式 */
	.swiper {
		width: 100%;
		height: 200px;
	}

	/* 每张图片样式 */
	.swiper-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 公告*/
	.notice-board {
		padding: 20px;
	}

	.notice-item {
		background-color: #f8f8f8;
		border-left: 4px solid #007aff;
		margin-bottom: 15px;
		padding: 15px;
		border-radius: 4px;
	}

	.notice-title {
		font-size: 18px;
		color: #333;
	}

	.notice-date {
		font-size: 14px;
		color: #666;
		margin-top: 5px;
	}

	/* bar*/
	.image-text-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-status {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #f9f9f9;
		padding: 20px;
		border-radius: 5px;
	}

	.order-item {
		text-align: center;
	}

	.icon {
		width: 40px;
		height: 40px;
	}

	.badge {
		position: absolute;
		top: -10px;
		right: -10px;
		background-color: red;
		color: white;
		border-radius: 50%;
		padding: 5px;
		font-size: 12px;
	}
</style>