<template>
  <div class="w-full h-[100vh]">
    <van-nav-bar title="群公告" fixed @click-left="getBack">
      <template #left>
        <div>
          <van-icon name="arrow-left" color="black" size="18" />
        </div>
      </template>
      <template v-if="isRankAndFiler(queryDataName?.groupRole)" #right>
        <div
          :class="`font-semibold text-xl ${showBottom ? 'text-[#FF9300]' : 'text-black-9'} `"
          @click="getUpdAnnouncement"
        >
          <!--   -->
          确认
        </div>
      </template>
    </van-nav-bar>
    <div class="h-60"></div>
    <template v-if="isRankAndFiler(queryDataName?.groupRole)">
      <van-cell-group inset>
        <van-field
          style="background-color: #f7f8fa"
          v-model="queryDataName.groupNotice"
          required
          size="large"
          rows="5"
          autosize
          @focus="showBottom = true"
          @update:model-value="
            (val) => {
              if (val.lenght >= 1000) {
                showToast('输入的内容只能是1000个字')
              }
            }
          "
          autocorrect
          type="textarea"
          maxlength="1000"
          label-align="top"
          show-word-limit
        />
      </van-cell-group>

      <van-cell
        @click="
          () => {
            queryDataName.groupNotice = groupBulletinTemplate
            showBottom = true
          }
        "
        :label="groupBulletinTemplate"
      >
        <template #title>
          <span class="font-semibold text-black-6">群公告模版</span>
        </template>
      </van-cell>
    </template>
    <template v-else>
      <div style="height: calc(100vh - 60px)" class="w-full relative">
        <div class="w-full px-16 mb-10" v-html="queryDataName?.groupNotice"></div>

        <p class="w-full text-sm text-black-9 text-center absolute bottom-52 left-0">
          仅群主及群管理员可编辑
        </p>
      </div>
    </template>
  </div>
</template>

<script setup>
const router = useRouter()
const route = useRoute()

// 是否是普通成员
const isRankAndFiler = (role) => {
  return role == 1 || role == 2 ? true : false
}

onMounted(() => {
  getAnnouncement()
})

const groupBulletinTemplate =
  '1.本群提倡友好理性交流，鼓励群友多发言，多互动 2.禁止无意义刷屏、发送广告信息以及谩骂等不良消息 3.为了保证群活跃不经常发言的群友，可能会被定时清理出群'

const queryDataName = reactive({
  groupId: computed(() => route?.query?.groupId ?? ''),
  userId: computed(() => route?.query?.userId ?? ''),
  groupRole: computed(() => route?.query?.groupRole ?? ''),
  groupNotice: ''
})

//
const showBottom = ref(false)

const getBack = () => {
  router.back()
  showBottom.value = false
}
definePageMeta({
  layout: false
})

// 修改的接口
const getUpdAnnouncement = async () => {
  if (!showBottom.value) return

  try {
    let { data } = await request('/website/tourMessage/updateAnnouncement', {
      method: 'post',
      body: {
        groupId: queryDataName.groupId,
        messageContent: queryDataName.groupNotice
      }
    })
    if (data) {
      showBottom.value = false
      showSuccessToast('群公告发布成功')
      router.back()
    } else {
      showBottom.value = false
    }
  } catch (error) {}
}

// 获取公告
const getAnnouncement = async () => {
  const { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', {
    query: {
      groupId: route.query.groupId
    }
  })
  if (data) {
    queryDataName.groupNotice = data.groupNotice.messageContent
  } else {
  }
}

useSeoMeta({
  title: '群聊'
})
</script>

<style lang="scss" scoped></style>
