<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ServeGetContacts } from '@/api/contact'
import { ServeGetGroups } from '@/api/group'
import XNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
const emit = defineEmits(['close', 'on-submit'])
import { CloseCircle } from '@vicons/ionicons5'
interface Item {
  id: number
  type: number
  name: string
  avatar: string
  remark: string
  checked: boolean
  keyword: string
}

const isShowBox = ref(true)
const loading = ref(true)
const items = ref<Item[]>([])
const keywords = ref('')
const loadGroupStatus = ref(false)
 defineProps<{
  forwardMode: number
}>()
// 搜索过滤器：不再按类型过滤，将好友和群组融合在一起
const searchFilter = computed(() => {
  return items.value.filter((item: Item) => {
    return item.keyword.toLowerCase().includes(keywords.value.toLowerCase())
  })
})

const checkedFilter = computed(() => {
  return items.value.filter((item: Item) => item.checked)
})

const isCanSubmit = computed(() => {
  return !checkedFilter.value.length
})

const onLoad = () => {
  onLoadContact()
  onLoadGroup()
}

const onLoadContact = () => {
  loading.value = true
  ServeGetContacts()
    .then((res) => {
      if (res.code == 200) {
        let list = res.data.items || []

        items.value = list.map((item: any) => {
          return {
            id: item.id,
            avatar: item.avatar,
            type: 1,
            name: item.remark || item.nickname,
            keyword: (item.remark || '') + item.nickname,
            remark: item.remark,
            checked: false
          }
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const onLoadGroup = async () => {
  if (loadGroupStatus.value) {
    return
  }

  loading.value = true
  let { code, data } = await ServeGetGroups()
  if (code != 200) {
    loading.value = false
    return
  }

  let list = data.items.map((item: any) => {
    return {
      id: item.id,
      avatar: item.avatar,
      type: 2,
      name: item.group_name,
      keyword: item.group_name,
      remark: '',
      checked: false
    }
  })

  items.value.push(...list)

  loading.value = false
  loadGroupStatus.value = true
}

const onMaskClick = () => {
  emit('close')
}

const onTriggerContact = (item: any) => {
  // 如果是单选模式，先取消所有选中
  if (selectType.value === 1) {
    items.value.forEach(contact => {
      contact.checked = false
    })
  }
  
  let data = items.value.find((val: any) => val.id === item.id)

  if (data) {
    data.checked = !data.checked
  }
}

const onRemoveContact = (item: any) => {
  let data = items.value.find((val: any) => val.id === item.id)
  
  if (data) {
    data.checked = false
  }
}

const onCancel = () => {
  isShowBox.value = false
}

const onSubmit = () => {
  let data = checkedFilter.value.map((item: any) => {
    return {
      id: item.id,
      type: item.type
    }
  })

  emit('on-submit', data)
}

// 1 单选 2 多选
const selectType = ref(1)
const changeSelectType = () => {
  selectType.value = selectType.value == 1 ? 2 : 1
  
  // 切换选择模式时清空已选择的联系人
  items.value.forEach(item => {
    item.checked = false
  })
}

onLoad()
</script>

<template>
  <x-n-modal v-model:show="isShowBox" :title="forwardMode === 2 ? '合并转发' : '逐条转发'" style="width: 997px; height: 740px;background-color: #F9F9FD"
    :on-after-leave="onMaskClick" content-style="display: flex; justify-content: center; align-items: center;">
    <div class="w-927px h-627px bg-#fff rounded-3px px-35px py-20px">
      <div class="flex items-center justify-between mb-28px">
        <div class="text-#333639">搜索</div>
        <div class="w-779px h-34px">
          <n-input v-model:value="keywords" type="text" clearable placeholder="请输入">
         
          </n-input>
        </div>
      </div>
      <div class="flex justify-between">
        <div class="w-260px h-517px rounded-4px border-1px border-solid border-#E5E5E5 px-12px">
          <div class="border-b-2px border-b-solid border-b-#FBFBFB h-35px flex items-center justify-end">
            <n-button text color="#46299D" class="text-14px" @click="changeSelectType">
              {{ selectType === 1 ? '多选' : '单选' }}
            </n-button>
          </div>
          <div>
            <n-virtual-list v-if="!loading" style="max-height: 470px" :item-size="65" :items="searchFilter">
              <template #default="{ item }">
                <div class="flex items-center border-b-2px border-b-solid h-65px border-b-#FBFBFB"
                  @click="onTriggerContact(item)">
                  <div class="mr-22px">
                    <n-radio v-if="selectType === 1" :checked="item.checked" />
                    <n-checkbox v-else :checked="item.checked" />
                  </div>
                  <div class="mr-10px">
                    <n-image class="w-42px h-42px rounded-full" :src="item.avatar" />
                  </div>
                  <div class="flex items-center">
                    <span class="text-ellipsis">{{ item.name }}</span>
                    <span v-if="item.type == 2" class="badge group ml-2">群</span>
                  </div>
                </div>
              </template>
            </n-virtual-list>
            <div v-else class="flex-center h-470px">
              <span>加载中...</span>
            </div>
          </div>
        </div>
        <div class="w-578px h-517px rounded-4px border-1px border-solid border-#E5E5E5 px-12px">
          <div class="border-b-2px border-b-solid border-b-#FBFBFB h-35px flex items-center text-14px text-#000">
            发送给
          </div>
          <div class="h-350px border-b-2px border-b-solid border-b-#FBFBFB">
            <div v-if="checkedFilter.length > 0">
              <n-virtual-list style="max-height: 350px" :item-size="65" :items="checkedFilter">
                <template #default="{ item }">
                  <div class="flex items-center border-b-2px border-b-solid h-65px border-b-#FBFBFB pr-20px">
                    <div class="mr-10px">
                      <n-image class="w-42px h-42px rounded-full" :src="item.avatar" />
                    </div>
                    <div class="flex items-center">
                      <span class="text-ellipsis">{{ item.name }}</span>
                      <span v-if="item.type == 2" class="badge group ml-2">群</span>
                    </div>
                    <n-button class="ml-auto" text color="#C7C7C9" @click="onRemoveContact(item)">
                      <n-icon :component="CloseCircle" size="18" />
                    </n-button>
                  </div>
                </template>
              </n-virtual-list>
            </div>
            <div v-else class="flex-center h-350px">
              <n-empty size="medium" description="暂无选择联系人">
                <template #icon>
                  <img src="@/assets/image/no-data.svg" alt="" />
                </template>
              </n-empty>
            </div>
          </div>
          <div class="flex flex-col items-center justify-center h-120px">
            <div class="text-14px text-#999999 mb-23px">
              <span>[{{ forwardMode === 2 ? '合并转发' : '逐条转发' }}]</span> 
              <span v-if="checkedFilter.length > 0">
                {{ checkedFilter.map(item => item.name).join('、') }}的会话记录
              </span>
              <span v-else>请选择联系人</span>
            </div>
            <div class="flex justify-center items-center">
              <n-button color="#C7C7C9" class="w-250px h-34px text-14px text-#fff mr-10px" @click="onCancel">取消</n-button>
              <n-button color="#46299D" class="w-250px h-34px text-14px text-#fff" 
                @click="onSubmit" :disabled="isCanSubmit">发送</n-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </x-n-modal>
</template>
