<template>
  <view class="group" :class="[!isPC ? 'group-h5' : '']">
    <div class="group-box">
      <ul v-if="!groupInfo.isEdit" class="group-list">
        <li style="border-bottom: none" class="group-list-item">
          <label class="group-list-item-label">
            {{ TUITranslateService.t('TUIGroup.群头像') }}
          </label>
          <Avatar :url="groupAvatar" @click="selectAvatar" />
        </li>
        <ul>
          <li
            v-for="(item, index) in createInfo"
            :key="index"
            class="group-list-item item-input_box"
          >
            <label class="group-list-item-label">{{ item.name }}</label>
            <input
              v-model="groupInfo.profile[item.key]"
              type="text"
              :placeholder="item.placeholder"
              class="btn-input"
            />
            <!-- <span
              v-else
              class="group-h5-list-item-content"
              @click="edit(item.key)"
            >
              <p class="content">{{ groupInfo.profile[item.key] }}</p>
              <Icon :file="rightIcon" />
            </span> -->
          </li>
          <!-- <li class="group-list-item" @click="cbPopupShow.open('bottom')">
            <label class="group-list-item-label">申请加群方式</label>
            <span class="group-h5-list-item-content">
              <p class="content">{{ applyJoinOptionName }}</p>
              <Icon :file="rightIcon" />
            </span>
          </li> -->
          <li class="group-list-introduction">
            <div class="group-list-item">
              <label class="group-list-item-label">
                {{ TUITranslateService.t('TUIGroup.群类型') }}
              </label>
              <GroupIntroduction
                v-if="isPC"
                :groupType="groupInfo.profile.type"
                @selectType="selected"
              />
              <span v-else class="group-h5-list-item-content">
                <!--     @click="edit('type')" -->
                <p class="content">{{ groupTypeDetail.label }}</p>
                <!-- <Icon :file="rightIcon" /> -->
              </span>
            </div>
            <!--   <article v-if="!isPC" class="group-h5-list-item-introduction">
              <label class="introduction-name">
                {{ groupTypeDetail.label }}：
              </label>
              <span class="introduction-detail">
                {{ groupTypeDetail.detail }}
              </span>
             <a :href="documentLink.product.url" target="view_window">
                {{
                  TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`)
                }}
              </a>
            </article> -->
          </li>
        </ul>
      </ul>
      <!-- Edit Group Name -->
      <div v-else class="group-list group-list-edit">
        <input
          v-if="groupInfo.groupConfig.type === 'input'"
          v-model="groupInfo.groupConfig.value"
          class="group-name-input"
          type="text"
          :placeholder="
            TUITranslateService.t(
              `TUIGroup.${groupInfo.groupConfig.placeholder}`
            )
          "
        />
        <GroupIntroduction
          v-else
          class="group-introduction-list"
          :groupType="groupInfo.groupConfig.value"
          @selectType="selected"
        />
      </div>
      <!-- 原版确认按钮 -->
      <!-- <footer class="group-profile-footer">
        <button
          v-if="isPC && !groupInfo.isEdit"
          class="btn-default"
          @click="closeCreated"
        >
          {{ TUITranslateService.t('TUIGroup.取消') }}
        </button>
        <button
          class="btn-submit"
          :disabled="submitDisabledStatus"
          @click="submit"
        >
          {{ TUITranslateService.t('TUIGroup.确认') }}
        </button>
      </footer> -->
      <bottom-view>
        <cb-button :disabled="submitDisabledStatus" @click="submit">
          确认添加
        </cb-button>
      </bottom-view>
    </div>

    <uni-popup ref="cbPopupShow" backgroundColor="#fff">
      <view class="popup-content">
        <text
          v-for="(item, index) in groupJoinTypeConfig"
          :key="index"
          :class="{ 'on-text': item.value === applyJoinOption }"
          @click="
            () => {
              cbPopupShow.close()
              applyJoinOption = item.value
            }
          "
        >
          {{ item.label }}
        </text>
        <text @click="cbPopupShow.close()">取消</text>
      </view>
    </uni-popup>
  </view>
</template>
<script lang="ts" setup>
  import TUIChatEngine, {
    TUITranslateService,
    TUIGroupService,
    TUIStore,
    StoreName
  } from '@tencentcloud/chat-uikit-engine-lite'
  import {
    computed,
    ref,
    reactive,
    watchEffect
  } from '../../../adapter-vue'
  import documentLink from '../../../utils/documentLink'
  import { isPC } from '../../../utils/env'
  import Icon from '../../common/Icon.vue'
  import rightIcon from '../../../assets/icon/right-icon.svg'
  import GroupIntroduction from './group-introduction/index.vue'
  import {
    groupIntroConfig,
    findGroupIntroConfig,
    groupJoinTypeConfig
  } from './group-introduction/config'
  import { Toast, TOAST_TYPE } from '../../common/Toast/index'
  import Avatar from '../../common/Avatar/index.vue'
  import Server from '../server'
  import { IUserProfile } from '../../../interface'
  import { createImGroup } from '../../../../api/tui-kit'
  import { chooseImage } from '../../../../utils/media'
  import { uploadSingleFile } from '../../../../utils/uploadFile'
  import { validateGroupNumber } from '../../../../utils/validate'
  import { useUI } from '../../../../utils/use-ui'

  const { showToast } = useUI()
  const TUIGroupServer = Server.getInstance()
  const TUIConstants = TUIGroupServer.constants

  const groupInfo = reactive<any>({
    profile: {
      groupID: '',
      name: '',
      type: groupIntroConfig[0].type,
      avatar: groupIntroConfig[0].icon,
      introduction: '',
      notification: '',
      // joinOption: '',
      memberList: [],
      isSupportTopic: false
    },
    groupConfig: {
      title: '',
      value: '',
      key: '',
      type: '',
      placeholder: ''
    },
    isEdit: false
  })

  /** 自定义数据 */
  const cbPopupShow = ref(null)
  const applyJoinOption = ref('NeedPermission')
  // 群头像
  const groupAvatar = ref(groupInfo.profile.avatar)
  const applyJoinOptionName = computed(() => {
    const data = groupJoinTypeConfig.find(
      v => v.value === applyJoinOption.value
    )
    return data?.label || ''
  })
  // =======

  watchEffect(() => {
    const params = TUIGroupServer.getOnCallParams(
      TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
    )
    groupInfo.profile.memberList = params.memberList
    groupInfo.groupConfig.title = params.title
  })

  const groupTypeDetail = computed(() => {
    return findGroupIntroConfig(groupInfo.profile.type)
  })

  const headerTitle = computed(() => {
    let name = '添加群聊'
    if (groupInfo.isEdit) {
      name = groupInfo.groupConfig.title
    }
    return TUITranslateService.t(`TUIGroup.${name}`)
  })

  const createInfo = computed(() => {
    const groupNameInput = {
      name: TUITranslateService.t('TUIGroup.群名称'),
      key: 'name',
      placeholder: TUITranslateService.t('TUIGroup.请输入群名称')
    }
    const groupIDInput = {
      name: `群号码`,
      key: 'groupID',
      placeholder: '搜索加入群使用'
    }
    return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
      ? [groupNameInput]
      : [groupNameInput, groupIDInput]
  })

  const submitDisabledStatus = computed(() => {
    return (
      groupInfo.profile.name === '' ||
      (groupInfo.profile.groupID === '' && !groupInfo.isEdit)
    )
  })

  const selected = (type: any) => {
    if (groupInfo.profile.type !== type) {
      groupInfo.profile.type = type
      groupInfo.profile.avatar = findGroupIntroConfig(type).icon
      if (groupInfo.isEdit) {
        groupInfo.groupConfig.value = type
      }
    }
  }

  /** 选择群头像 */
  const selectAvatar = async () => {
    const paths = await chooseImage({ count: 1 })
    groupAvatar.value = await uploadSingleFile(paths[0], {
      url: '/api/common/admin/upload/up/single'
    })
  }

  const createGroup = async (options: any) => {
    try {
      // const data = {
      //   applyJoinOption: applyJoinOption.value,
      //   faceUrl: groupAvatar.value,
      //   groupName: options.name,
      //   groupType: options.type,
      //   memberList: options.memberList.map((item: IUserProfile) => {
      //     return { memberAccount: item.userID }
      //   })
      // }

      // const res = await createImGroup(data)
      // const e = res.data

      // const newRes = await TUIGroupService.getGroupProfile({
      //   groupID: e.groupId
      // })

      // handleCompleteCreate(newRes.data.group)
      // Toast({
      //   message: TUITranslateService.t('TUIGroup.群组创建成功'),
      //   type: TOAST_TYPE.SUCCESS
      // })

      // ========= 原本逻辑
      options.memberList = options.memberList.map(
        (item: IUserProfile) => {
          return { userID: item.userID }
        }
      )
      if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
        delete options.groupID
      }
      const isGroupID = validateGroupNumber(options.groupID)

      if (!isGroupID.valid) {
        return showToast(isGroupID.message)
      }
      const res = await TUIGroupService.createGroup({
        ...options,
        avatar: groupAvatar.value
      })
      const { type } = res.data.group
      if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
        await TUIGroupService.joinGroup({
          groupID: res.data.group.groupID,
          applyMessage: ''
        })
      }
      handleCompleteCreate(res.data.group)
      Toast({
        message: TUITranslateService.t('TUIGroup.群组创建成功'),
        type: TOAST_TYPE.SUCCESS
      })
    } catch (err: any) {
      if (err.code === 10025) {
        showToast('该群组号已存在', 'error')
      } else {
        Toast({
          message: err.message,
          type: TOAST_TYPE.ERROR
        })
      }
    }
  }

  const submit = () => {
    const { profile } = groupInfo

    if (groupInfo.isEdit) {
      groupInfo.profile[groupInfo.groupConfig.key] =
        groupInfo.groupConfig.value
      return (groupInfo.isEdit = !groupInfo.isEdit)
    } else {
      createGroup(profile)
    }
  }

  const closeCreated = () => {
    if (groupInfo.isEdit) {
      return (groupInfo.isEdit = !groupInfo.isEdit)
    }
    handleCompleteCreate(null)
  }

  const edit = (label: string) => {
    groupInfo.isEdit = !groupInfo.isEdit
    groupInfo.groupConfig.key = label
    groupInfo.groupConfig.value = (groupInfo.profile as any)[label]
    switch (label) {
      case 'name':
        groupInfo.groupConfig.title = '设置群名称'
        groupInfo.groupConfig.placeholder = '请输入群名称'
        groupInfo.groupConfig.type = 'input'
        break
      case 'groupID':
        groupInfo.groupConfig.title = '设置群ID'
        groupInfo.groupConfig.placeholder = '搜索加入群使用'
        groupInfo.groupConfig.type = 'input'
        break
      case 'type':
        groupInfo.groupConfig.title = '选择群类型'
        groupInfo.groupConfig.type = 'select'
        break
    }
  }

  const handleCompleteCreate = (group: any) => {
    TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false)
    const callback = TUIGroupServer.getOnCallCallback(
      TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
    )
    callback && callback(group)
  }

  defineExpose({
    closeCreated
  })
</script>
<style lang="scss" scoped src="./style/index.scss"></style>
<style lang="scss" scoped>
  .group {
    background: #f4f4f4;
  }

  .group-h5 {
    padding: 32rpx 24rpx;
  }

  .group-box {
    border-radius: 16rpx;
  }

  .group-h5-list-item-content {
    .content {
      padding: 0 !important;
      font-size: 32rpx;
      color: #333333;
    }
  }

  .group-list {
    margin: 0 !important;
    .group-list-item {
      padding: 24rpx 32rpx !important;
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #e5e5e5;
      box-sizing: border-box;
    }
    .item-input_box {
      .btn-input {
        padding: 0;
        height: 44rpx;
        font-size: 32rpx;
        color: #333333;
        border: none !important;
        // background: rgb(238, 128, 128);
        text-align: right;
      }
    }
  }
  .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34rpx 0;
    text + text {
      margin-top: 20rpx;
    }
    text {
      border: 2rpx solid #a7a7a7;
      width: 80%;
      padding: 18rpx 0;
      border-radius: 50rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333333;
    }
    .on-text {
      border: 2rpx solid #348aec;
      background: rgb(65, 178, 212);
      color: #ffffff;
    }
  }
</style>
