<template>
  <div :id="props.target" class="border-t-gray-800 border-opacity-90 bg-light-600 dark:bg-gray-600 w-full p-4 mt-4 md:mt-2 rounded-l">
    <div class="flex flex justify-between text-2xl bg-light-800 dark:bg-gray-400 p-3 rounded-xl" @click="on_group_item(props.target,$event)">
      <div class="dark:text-white"> {{ props.title }} </div>
      <svg v-show="props.hide" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
				<path
						class="heroicon-ui"
						d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm1-9h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2V9a1 1 0 012 0v2z"
				/>
			</svg>
			<svg v-show="!props.hide" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
				<path
					class="heroicon-ui"
					d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm4-8a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z"
				/>
      </svg>
    </div>
    <div v-for="[grp_key, grp_value] in props.groups" :key="grp_key" class="mt-3" :class="{ 'hidden' : props.hide }">
      <div
        v-for="[subgrp_key,subgrp_value] in grp_value"
        :key="subgrp_key"
      >
        <div
          v-for="(srvr,srvrindex) in subgrp_value"
          :key="srvrindex"
          class="flex flex-wrap -mx-2 pb-8"
        >
          <CloudServices
            :source="props.target === 'tsksrvcs' ? srvr.tsksrvcs : srvr.appsrvcs"
            :target="props.target"
            :filter="props.search"
            :hostname="srvr.hostname"
						@on-cloud-server-item="onCloudServiceItem"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CloudGroupServcType,SrvcInfoType } from '~/typs/clouds'
const props = defineProps<{
  groups: Map<string, Map<string, CloudGroupServcType>>
  search: string
  target: string
  title: string
  hide: boolean
}>()
const emit = defineEmits(['onCloudGroup'])
const on_group_item = (target: string, event: Event) => {
  event.preventDefault()
  event.stopImmediatePropagation()
  event.stopPropagation()
  emit('onCloudGroup', target)
}
const onCloudServiceItem = (item: SrvcInfoType) => {
	if (item) {
		// console.log(item)
	}
}
</script>