<template>
  <div class="w-full h-[100vh] border">
    <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="showBottom ? 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.announcement"
          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.announcement = groupBulletinTemplate
            showBottom = true
          }
        "
        :label="groupBulletinTemplate"
      >
        <template #title>
          <span class="font-semibold text-black-6">群公告模版</span>
        </template>
      </van-cell>
    </template>
    <template v-else>
      <div class="w-full px-16">
        <div class="w-full mb-10" v-html="queryDataName?.announcement"></div>

        <p class="text-sm text-black-9 text-center">仅群主及群管理员可编辑</p>
      </div>
    </template>
  </div>
</template>

<script setup>
const router = useRouter()
const route = useRoute()
console.log(route?.query?.groupId)

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 ?? ''),
  announcement: ''
})

//
const showBottom = ref(false)

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

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

// 修改的接口
const getUpdAnnouncement = async () => {
  let { data } = await request('/website/tourism/visa/list/page', {
    ...queryDataName
  })
  if (data) {
    queryDataName.announcement = data
    showBottom.value = false
  } else {
    showBottom.value = false
  }
}

// 获取公告
const getAnnouncement = async () => {
  let { data } = await request('/website/tourism/visa/list/page', {
    ...queryDataName
  })
  if (data) {
    queryDataName.announcement = data
  } else {
  }
}

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

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