<template>
  <div class="outer-layer manage-group-silence-page">
    <div class="root">
      <ZPaging ref="zPaging" :show-scrollbar="false">
        <template #top>
          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
            <div class="navBar-title flex flex-col items-center justify-center">
              <span class="text-[34rpx] font-medium">
                {{ $t('chat.settings.groupAdmin') }}
              </span>
            </div>
          </tm-navbar>
        </template>
        <div class="manage-group-silence">
          <span class="manage-group-silence-title text-[28rpx] font-regular">
            {{ $t('chat.settings.groupAdmin') }}
          </span>
          <div
            class="add-silence-member-btn chat-settings-card"
            @click="toSelectMembersPage"
          >
            <img src="/src/static/image/chatSettings/add-btn.png" />
            <span class="text-[28rpx] font-medium">
              {{ $t('chat.manage.addAdmin') }}
            </span>
          </div>
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, reactive } from 'vue'

import { useGroupTypeStore } from '@/store/groupType'
import { useGroupStore, useDialogueStore } from '@/store'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const groupTypeStore = useGroupTypeStore()
const groupTypeParams = reactive({
  postTreeList: computed(() => groupTypeStore.postTreeList),
})
const groupStore = useGroupStore()
const dialogueStore = useDialogueStore()

const dialogueParams = reactive({
  adminList: computed(() => dialogueStore.getAdminList),
})

const state = reactive({
  silenceAllBtn: null, //全员禁言按钮
})

onLoad((options) => {
  console.log(options)
})

onMounted(async () => {
  console.log(dialogueParams.adminList)
  await groupTypeStore.getPositionsTree()
  console.log(groupTypeParams)
})

//点击跳转到添加禁言成员页面
const toSelectMembersPage = () => {
  uni.navigateTo({
    url: '/pages/chatSettings/groupManage/selectMembers?manageType=admin',
  })
}
</script>
<style scoped lang="scss">
.outer-layer {
  flex: 1;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.manage-group-silence {
  padding: 20rpx 32rpx;
  .manage-group-silence-title {
    line-height: 40rpx;
    color: #959598;
  }
  .add-silence-member-btn {
    padding: 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    img {
      width: 40rpx;
      height: 40rpx;
      margin: 0 22rpx 0 0;
    }
    span {
      line-height: 40rpx;
      color: $theme-text;
    }
  }
  .chat-settings-card {
    width: 100%;
    background-color: #fff;
    margin: 20rpx 0 0;
    border-radius: 8rpx;
    box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
  }
}
</style>
