<template>
		<view>
	    <view  class="shipmentItem box_shadow_card"  
		v-for="(item,index) in notices" :key="index" @click="navToNoticeDetail(item)">
		<view class="shipment-header flex_sb">
			<view class="shipment_code flex_center">
				<text style=" text-align: left; " selectable> 标题：{{item.title}}</text>
			</view>
		</view>
		<u-line color="#E5E5E5" margin="20rpx 0" />
		<bs-customCell label="内容 :" :value="item.content" labelCol="3" wrapCol="6" /> 
		<bs-customCell label="发运日期 :" :value="item.publish_date" labelCol="3" wrapCol="6" /> 
	</view>
	</view>
</template>

<script>
	import { getBulletin } from '../../api/apiList'
	import { formatTime } from '../../utils/util'

	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
				notices: [] ,//运单id
			};
		},
		methods: {
			//跳转公告明细
			navToNoticeDetail(item) {
				const data = JSON.stringify(item)
				console.log(data)
				uni.navigateTo({
					url: `/subpkg/noticeDetail/noticeDetail?notice=${data}`,
				})
			},
			//设置全局变量
			onSetGlobalData() {
			},
			onClick(e) {
			},			
			//公告
			getBulletin() {
				const reqData = {
					"args": {
						"pageNum": 1,
						"pageSize": 10
					}
				}
				getBulletin(reqData).then(res => {
					// uni.stopPullDownRefresh()
					let datas = res.data.data
					this.notices = datas;
				})
			},
		},
		onLoad: function(options) {
			this.getBulletin();
		},
	}
</script>

<style lang="scss">
	.shipmentItem {
		position: relative;
		margin: 0 24rpx 24rpx;

		&/deep/.custom-cell-row {
			margin-top: 20rpx;
		}

		.shipment_code {
			line-height: 40rpx;
			text-shadow: 1rpx 3rpx 12rpx rgba(0, 0, 0, 0.04);
			display: flex;
			flex-direction: column; /* 设置flex布局方向为垂直 */
			text-align: left; /* 文本左对齐 */
		}

		.shipment-state {
			height: 44rpx;
			font-size: 24rpx;
			color: #F7A64A;
			line-height: 44rpx;
			padding: 0 24rpx;
			border-radius: 8rpx;
			background: rgba(247, 166, 74, .1);
			text-shadow: 1rpx 3rpx 12rpx rgba(0, 0, 0, 0.04);
		}

		.shipmenting {
			color: #66CCCC;
			background: rgba(61, 204, 185, .1);
		}

		.stations {
			margin-top: 24rpx;
			margin-bottom: 32rpx;
		}

		.start-station,
		.end-station {
			margin: 20rpx 0;
			font-size: 30rpx;
			font-weight: bolder;

			.t-icon{
				margin-right: 6rpx;
			}
		}

		.start-btn {
			color: #FFFFFF;
			padding: 20rpx;
			margin-top: 30rpx;
			border-radius: 44rpx;
			box-shadow: 1rpx 3rpx 12rpx 0px rgba(0, 0, 0, 0.04);
			background: linear-gradient(90deg, #2E75E6 0%, #5E58EE 100%);
			width: 315rpx;
		}

		.stop-check-btn {
			border: 3rpx solid transparent;
			color: #2E75E6;
			background-image: linear-gradient(#FFFFFF , #FFFFFF ), linear-gradient(90deg, #2E75E6 0%, #5E58EE 100%);
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
		}
	}
</style>
