<template>
	<view class="page">
		<u-navbar title="公告管理" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar"></u-navbar>

		<view class="container">
			<!-- 标题输入 -->
			<view class="input-section">
				<view class="section-title">公告标题</view>
				<u-input v-model="title" placeholder="请输入公告标题" placeholder-style="color: #C7CDD3"
					:custom-style="inputStyle"></u-input>
			</view>

			<!-- 内容编辑 -->
			<view class="input-section">
				<view class="section-title">公告内容</view>
				<textarea
					style="background-color: #F7F8FA;width: 100%;padding: 10rpx;box-sizing: border-box;border-radius: 10rpx;"
					v-model="content" placeholder="请输入公告内容" height="400" placeholder-style="color: #C7CDD3"
					:custom-style="textareaStyle"></textarea>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<u-button type="default" shape="circle" @click="cancel" custom-style="button-cancel">取消</u-button>
				<u-button type="primary" shape="circle" @click="publish" :disabled="!canPublish"
					custom-style="button-publish">发布公告</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				title: '',
				content: '',
				inputStyle: {
					backgroundColor: '#F7F8FA',
					borderRadius: '12rpx',
					padding: '24rpx',
					fontSize: '32rpx',
					color: '#262B37'
				},
				textareaStyle: {
					backgroundColor: '#F7F8FA',
					borderRadius: '12rpx',
					padding: '24rpx',
					fontSize: '32rpx',
					color: '#262B37'
				},
				ggobj: {},
				areaId:''
			}
		},
		computed: {
			canPublish() {
				return this.title.trim() && this.content.trim()
			}
		},
		onShow() {
			this.gethuoqu()
		},
		methods: {
			// 获取最新公告
			gethuoqu() {
				this.areaId = uni.getStorageSync('adminAreaid')
				this.$u.get(`/app/agreement/latest?areaId=${this.areaId}&agreementType=0`).then(res => {
					if (res.code == 200) {
						if (res.data) {
							this.title = res.data.title
							this.content = res.data.content
							this.ggobj = res.data
						} else {
							this.ggobj = null
						}
					}
				})
			},
            //取消编辑
			cancel() {
				uni.showModal({
					title: '提示',
					content: '确定要取消编辑吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			},
			// 点击发布公告
			publish() {
				uni.showLoading({
					title: '发布中...'
				})
				let data = {
					title: this.title,
					content: this.content,
					agreement: 0,
					areaId:this.areaId,
					id:this.ggobj.id == undefined ? '' : this.ggobj.id
				}
				if (this.ggobj == null) {
					this.$u.post(`/app/agreement/notice`, data).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '公告发布成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				} else {
					this.$u.put(`/app/agreement/notice`, data).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '公告发布成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.container {
		padding: 30rpx;
	}

	.input-section {
		margin-bottom: 40rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #262B37;
			margin-bottom: 20rpx;
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;

		.u-button {
			width: 48%;
			height: 90rpx;
			font-size: 32rpx;
		}

		.button-cancel {
			background: #F0F2F5 !important;
			color: #6B7785 !important;
			border: none !important;
		}

		.button-publish {
			background: linear-gradient(90deg, #4C97E7, #4297F3) !important;
			color: #fff !important;
			border: none !important;
			box-shadow: 0 4rpx 12rpx rgba(66, 151, 243, 0.3);

			&[disabled] {
				opacity: 0.6 !important;
			}
		}
	}
</style>