<template>
  <div class="outer-layer manage-group-info-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.editAvatar') }}
              </span>
            </div>
          </tm-navbar>
        </template>
        <div class="edit-group-info">
          <div class="group-avatar">
            <img :src="state.groupAvatar" />
          </div>
        </div>
        <customBtn :btnText="$t('button.text.edit')"></customBtn>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import customBtn from '@/components/custom-btn/custom-btn.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'

const state = reactive({
  pageTitle: '', //页面标题
  groupAvatar: '', //群头像
  groupName: '', //群名称
})

onLoad((options) => {
  console.log(options)
  if (options.groupAvatar) {
    state.groupAvatar = options.groupAvatar
  }
})

//点击清空群名称输入
const clearGroupNameInput = () => {
  state.groupName = ''
}

//点击确认修改
const confirmEdit = () => {
  console.log(state.groupName)
}
</script>
<style scoped lang="scss">
.outer-layer {
  flex: 1;
  background-image: url('@/static/image/mine/background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center bottom;
}

.edit-group-info {
  margin: 158rpx 94rpx 100rpx;
  background-color: #fff;
  box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.16);
  padding: 50rpx;
  border-radius: 16rpx;
  .group-avatar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    img {
      width: 460rpx;
      height: 460rpx;
    }
  }
}
</style>
