<template>
  <view class="container">
    <!-- 协议内容区域 -->
    <view class="agreement-content">
      <view class="article" v-html="article"> </view>
    </view>

    <!-- 底部按钮栏 -->
    <view class="btn-bar">
      <button class="btn-back" @click="handleGoBack">返回</button>
      <button class="btn-confirm" @click="handleConfirm">确定预约</button>
    </view>
  </view>
</template>

<script>
import { noticeData } from '@/api/reserve.js'

export default {
  name: 'ConfirmPage',
  data() {
    return {
      article: '',
      itemData: {}
    }
  },

  onLoad(options) {
    this.itemData = JSON.parse(decodeURIComponent(options.data))
    this.getNotice()
  },
  methods: {
    // 返回上一页
    handleGoBack() {
      uni.navigateBack()
    },
    // 确定预约
    handleConfirm() {
      const data = JSON.stringify(this.itemData)
      uni.navigateTo({
        url: `/pages/reserve/timeSelect?data=${encodeURIComponent(data)}`
      })
    },
    getNotice() {
      let params = {
        descs: 'update_time',
        size: 10,
        current: 1,
        deptId: this.itemData.id
      }
      noticeData(params).then(res => {
        if (res.code === 200) {
          this.article = res.data.records[0].content
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
/* 🔥 uni-app 必须加这个，页面高度才会生效 */
// page {
//   height: 100%;
// }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 最外层 flex 容器 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* 兼容更好 */
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* 内容区域：自动占满剩余高度 + 滚动 */
.agreement-content {
  flex: 1;
  overflow: auto;
  padding: 40rpx 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  line-height: 1.6;
}

.article {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 15rpx;
}

.list-item {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-left: 20rpx;
  margin-bottom: 10rpx;
}

/* 底部按钮：固定在最下方，不使用 absolute */
.btn-bar {
  display: flex;
  padding: 20rpx 30rpx 40rpx;
  background-color: #ffffff;
  gap: 30rpx;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.05);
}

.btn-back {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  background-color: rgba(242, 247, 255, 1);
  color: rgba(49, 134, 255, 1);
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: 2rpx solid rgba(208, 227, 255, 1);
}

.btn-confirm {
  flex: 2;
  height: 88rpx;
  line-height: 88rpx;
  background-color: rgba(49, 134, 255, 1);
  color: #ffffff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: 2rpx solid rgba(208, 227, 255, 1);
}
</style>
