<template>
  <view class="notice-detail-container">
    <!-- 详情内容 -->
    <view class="notice-detail-content">
      <view class="detail-content-header">
        <view class="title">{{ detailInfo.title }}</view>
        <view class="sub-wrap">
          <view class="sub-text time">{{ detailInfo.publishAt }}</view>
        </view>
      </view>
      <view class="content-text-wrap">{{ detailInfo.content }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getParkServiceNoticeDetail } from '@/api/home'

// 详情数据
const detailInfo = ref<any>({})
const id = ref('')
onLoad((options) => {
  id.value = options?.id || ''
  getDetail()
})

// 获取详情
const getDetail = async () => {
  const res = await getParkServiceNoticeDetail(id.value)
  if (res.code === 200) {
    detailInfo.value = res.data
  }
}
</script>

<style lang="scss" scoped>
.notice-detail-container {
  box-sizing: border-box;
  padding: 24rpx 30rpx 0 30rpx;
  .notice-detail-content {
    width: 688rpx;
    border-radius: 23rpx;
    background-color: #fff;
    padding: 30rpx;
    .content-text-wrap {
      padding-top: 24rpx;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      line-height: 43rpx;
    }
    .detail-content-header {
      padding-bottom: 24rpx;
      border-bottom: 2rpx solid #f2f3f5;
      .title {
        width: 628rpx;
        font-size: 30rpx;
        color: #1d2129;
        line-height: 49rpx;
      }
      .sub-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 14rpx;
        .sub-text {
          font-size: 28rpx;
          color: #9ca2a9;
        }
      }
    }
  }
  .notice-submit-wrapper {
    width: 100%;
    height: 123rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    .save-btn {
      width: 688rpx;
      height: 77rpx;
      background-color: #ed2424;
      color: #fff;
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
