<template>
	<div class="page_container !bg-white dmian">
		<NavBar>
			<!-- <span :disabled="!name" @click="finishChange">{{ t('buttons.save') }}</span> -->
		</NavBar>

		<!-- <div class="mx-3 mt-2">
      <div class="rounded-lg border border-gap-text">
        <van-field
          class="!py-1"
          :maxlength="16"
          v-model="name"
          label=""
          :placeholder="$t('placeholder.pleaseInput')"
        ></van-field>
      </div>
    </div> -->
		<div class="title">
			{{title}}
		</div>
		<div class="tips">
			{{tip}}
		</div>
		<div class="info">
			<Avatar :size="40" :src="originData.faceURL" :desc="originData.nickname" />
			<van-field class="!py-1" :maxlength="16" v-model="name" label=""
				:placeholder="$t('placeholder.pleaseInput')"></van-field>
		</div>
		<van-button :disabled="!name" @click="finishChange" type="primary" class="save" :text="$t('buttons.save')" />
	</div>
</template>

<script setup lang="ts">
	import NavBar from '@/components/NavBar/index.vue'
	import type { GroupItem, GroupMemberItem } from 'open-im-sdk-wasm/lib/types/entity'
	import { IMSDK } from '@/utils/imCommon'
	import { feedbackToast } from '@/utils/common'

	const { t } = useI18n()
	const router = useRouter()
	const props = defineProps<{ originData : GroupItem & GroupMemberItem }>()
	// console.log(props.originData, '单一数据')
	const name = ref(props.originData.nickname || props.originData.groupName)
	const originData = ref(props.originData)

	const title = props.originData.groupName
		? t('changeGroupName')
		: t('changeGroupNickname')
	const tip = props.originData.groupName
		? t('changeGroupNametip')
		: t('changeGroupNicknametip')
	const finishChange = () => {
		let func
		if (props.originData.groupName) {
			func = IMSDK.setGroupInfo({
				groupID: props.originData.groupID,
				groupName: name.value,
			})
		} else {
			func = IMSDK.setGroupMemberNickname({
				groupID: props.originData.groupID,
				userID: props.originData.userID,
				groupMemberNickname: name.value,
			})
		}
		func
			.then(() =>
				feedbackToast({ message: t('messageTip.changeSuccess'), onClose: router.back }),
			)
			.catch((error) => feedbackToast({ message: t('messageTip.changeFailed'), error }))
	}
</script>

<style lang="scss" scoped>
	.dmian {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.title {
		font-weight: bold;
		font-size: 1.36rem;
		color: #282828;
		margin-top: 4.29rem;
	}

	.tips {
		font-size: 1.04rem;
		color: #282828;
		text-align: center;
		width: 18rem;
		margin-top: 0.91rem;
	}

	.info {
		margin-top: 1.95rem;
		width: 20.47rem;
		border-top: 1px solid #E7E7E7;
		border-bottom: 1px solid #E7E7E7;
		display: flex;
		align-items: center;
		padding: 0.52rem 0;
	}

	.save {
		margin-top: 7.64rem;
		width: 11.18rem;
		height: 3.12rem;
		font-size: 1.04rem;
	}
</style>