<template>
    <van-popup
      :show="show"
      position="bottom"
      round
      @update:show="emit('update:show', $event)"
      @click-overlay="close"
      style="height: 280px"
    >
      <div class="notice-container">
        <div class="notice-header">
          <div class="title">群公告</div>
          <!-- <svg-icon class="close-icon" name="close" @click="close"/> -->
        </div>
        <div class="notice-content">{{ notice || '暂无公告' }}</div>
      </div>
    </van-popup>
  </template>
  
  <script setup>
  const props = defineProps({
    show: Boolean,
    notice: String
  })
  
  const emit = defineEmits(['update:show', 'close'])
  
  const close = () => {
    emit('close')
    emit('update:show', false)
  }
  </script>  
  
  <style scoped lang="less">
  .notice-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px 0;
    box-sizing: border-box;
  }
  .notice-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 17px;
    color: #000000;
    margin-bottom: 16px;
    border-bottom: 1px solid #F2F2F2;
  }
  .notice-content {
    margin: 0 16px;
    flex: 1;
    overflow-y: auto;
    line-height: 1.6;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    white-space: pre-wrap;
  }
  .close-icon {
    font-size: 20px;
    color: #999;
  }
  </style>