<template>
	<view class="page">
		<uni-segmented-control :current="current" styleType="text" activeColor="dodgerblue" :values="value"
			@clickItem="toggole()"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<view v-for="unit in array">
					<view class="header">
						<text>{{unit[0]}}</text>
						<text>未读</text>
					</view>
					<view class="content_text" v-html="unit[1]"></view>
					<view class="bottom_content">
						<view>
							<image src="../../static/组 155.png"></image>
							<text>{{unit[2]}}</text>
						</view>
						<view @click="goto(unit)">查看详情</view>
					</view>
				</view>
			</view>
			<view v-show="current === 1">
				选项卡2的内容
			</view>
			<view v-show="current === 2">
				选项卡3的内容
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				value: ["全部", "未读", "已读"],
				array: null,
			}
		},
		methods: {
			async request(gest, path) {
				let text
				if (gest == "get") {
					text = await fetch(`http://124.93.196.45:10091/Neusoft/community${path}`, {
						method: "GET",
						headers: {
							"Content-Type": "application/json",
							"Authorization": (await this.request("post", "/api/login")).token
						},
					})
				} else if (gest == "post") {
					text = await fetch(`http://124.93.196.45:10091/Neusoft/community${path}`, {
						method: "POST",
						headers: {
							"Content-Type": "application/json",
						},
						body: JSON.stringify({
							"password": "0CYdq6Hn",
							"username": "6dOMIgIU",
						})
					})
				}
				const data = await text.json()
				console.log(data)
				return data
			},
			goto(value){
				const itemStr = encodeURIComponent(JSON.stringify(value))
				uni.navigateTo({
					url:`/pages/index/addr_more?id=${value[3]}&data=${itemStr}`
				})
				
			}
		},
		async mounted() {
			this.array = (await this.request("get", "/api/notice/list")).rows.map(x => [
			x.noticeTitle,
			 x.noticeContent, 
			 x.createTime,
			 x.noticeId
			])
			console.log(this.array)
		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.page {
		background-color: #ECF4FD;
		height: 95.3vh;
	}

	.content {
		margin: 10px;
	}

	.content view view {
		background-color: white;
		padding: 5px;
	}

	.content>view>view {
		margin: 10px;
		border-radius: 10px;
		box-shadow: 10px 10px 20px #f7f7f7;
	}

	.header {
		display: flex;
		justify-content: space-between;
	}
	.header text:nth-child(2){
		color:#55ff7f;
	}
	.content_text {
		height: 13vh;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 8px 0px !important;
		border-bottom: 1px solid black;
		border-top: 1px solid black;
	}

	.bottom_content {
		display: flex;
		justify-content: space-between;

	}

	.bottom_content image {
		height: 20px;
		width: 20px;
	}

	.bottom_content>view:first-child {
		color: #d0d0d0;
	}

	.bottom_content>view {
		display: flex;
		align-items: center;
	}
	.bottom_content>view:nth-child(2){
	color: blue;
	}
	.bottom {
		display: flex;
		position: fixed;
		border: 1px solid black;
		bottom: 0;
		width: 100%;
		height: 5vh;
	}

	.list-li {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.list-li image {
		height: 20px;
		width: 20px;
	}

	.list-li:nth-child(1) {
		color: dodgerblue;
	}

	.list-li:nth-child(3) image {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 2px solid black;
	}
</style>
