<template>
	<view>
		<view class="nav_area"></view>
		<view class="setPage">
			<view v-for="(item,index) in setList" :key="index" class="set_item">
				<view style="" class="item_top">
					<view class="box2">标题：{{item.title}}</view>
					<text class="text" style="font-size: 12px;">发布时间：{{item.create_time}}</text>
					<view class=""><text class="box3" v-html="item.content"></text></view>
				</view>
				<view style="" class="flex-row">
					<view class="red" @click="edit(item,index)">编辑</view>
					<text class="text" @click="remove(item,index)">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				setList: [
					{
						"id": 1, //公告id
						"title": "测试", //公告标题
						"sort": 1, //排序
						"content": "尊敬的平台用户，关于调整中奖概率问题，平台为了中奖概率问题"
					},
					{
						"id": 2, //公告id
						"title": "测试2", //公告标题
						"sort": 2, //排序
						"content": "手动阀电风扇2"
					}
					
				],
				page: 1
				
			}
		},
		methods: {
			edit(val, i){
				uni.navigateTo({
					url: './addNotice?id='+val.id+'&content='+val.content+'&title='+val.title+'&sort='+val.sort
				})
			},
			remove(val, i){
				let _this = this;
				uni.showModal({
					title:'温馨提示',
					content:"确定是否删除该信息",
					success() {
						API.request('/notice/delete', {id: val.id}, res=>{
							uni.showToast({
								title: res.msg
							})
							_this.setList.splice(i, 1);
						})
					}
				})
			},
			getList(){
				API.request('/notice/list', {page:this.page, limit: 10}, res=>{
					this.setList = res.data.list;
				})
				
			}
		},
		onShow() {
			this.getList();
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: './addNotice'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		height: 88rpx;
		padding: 0px 25rpx;
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	}
	.setPage{
		padding: 40rpx;
		font-size: 14px;
		color: #444;
	}
	.set_item{
		width: 670rpx;
		min-height: 280rpx;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11);
		margin-bottom: 40rpx;
		border-radius: 10px;
		
		.item_top{
			padding: 30rpx 30rpx;
			line-height: 24px;
		}
		.box2{
			display: -webkit-box;//将盒子转换为弹性盒子
			-webkit-box-orient: vertical;//文本显示方式，默认水平
			-webkit-line-clamp: 1;//设置显示多少行
			overflow: hidden;
		}
		.text{
			color: #999;
		}
		.box3{
			font-size: 12px;
			// display: -webkit-box;//将盒子转换为弹性盒子
			// -webkit-box-orient: vertical;//文本显示方式，默认水平
			// -webkit-line-clamp: 1;//设置显示多少行
			// overflow: hidden;
		}
		.flex-row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0px 110rpx 30rpx;
		}
		.red{
			color: #E33837;
		}
	}

	
</style>
