<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

defineProps<{
  repoId: string;
  repoInfo: any;
  validLinks: any[];
  topicList: any[];
  loadingStatus: {
    profileLoading: boolean;
    readmeLoading: boolean;
    eventsLoading: boolean;
    contributorLoading: boolean;
    releasesLoading: boolean;
  };
  editable: boolean;
}>();

function triggerLink(link: any) {
  if (link.linkName) router.push({ name: link.linkName, params: link.params });
}

const handleClickTopic = (name: string) => {
  if (name) {
    router.push(`/topic/${name}`);
  } else {
    router.push('/404');
  }
};
</script>

<template>
  <div class="repo-info">
    <d-skeleton :loading="loadingStatus.profileLoading" :rows="10">
      <div class="repo-profile">
        <div class="profile-title flex items-center justify-between">
          <div class="flex items-center">
            <Icon name="gt-file2-c" class="mr-2"></Icon><span class="text-G900 font-medium">简介</span>
          </div>
          <div v-if="editable" @click="triggerLink({linkName:'repoSetting'})" class="cursor-pointer" title="编辑简介">
            <Icon name="gt-edit"></Icon>
          </div>
        </div>

        <div class="text-G900 break-words mt-3">
          <g-text :config="{ line: 4, ellipse: true,tooltip:false, showAll: true }">
            {{ repoInfo.description || '暂无简介' }}
          </g-text>
        </div>
        <!-- <div class="my-4 flex flex-wrap w-[100%]" v-if="topicList?.length">
          <div v-for="topic of topicList" :key="topic.name" class="border-box max-w-[100%] truncate py-[2px] px-2 border-solid border-[1px] border-CG300 rounded-[3px] text-CG600 text-[12px] mr-1 mb-1 cursor-pointer font-bold hover:text-CG900" @click.stop="handleClickTopic(topic.name)">
            <d-popover :content="topic.name" trigger="hover">
              {{ topic.name }}
            </d-popover>
          </div>
        </div> -->
        <div class="mt-6">
          <div
            v-for="(link, idx) in validLinks"
            :key="idx"
            class="text-G900 mb-3 flex items-center"
            style="line-height: 1"
            @click="triggerLink(link)"
            :class="{ ['cursor-pointer']: link.linkName }"
            :title="link.name"
          >
            <Icon v-if="/^(icon|gt)\-/.test(link.icon)" :name="link.icon" size="16px" class="inline-block min-w-[16px]"></Icon>
            <img v-else :src="link.icon" class="h-3.5" />
            <span
            class="ml-2 overflow-wrap-break"
            style="word-break: break-all; cursor: pointer"
            >{{ link.text }}</span>
            <span class="ml-0.5" v-if="link.suffix">{{ link.suffix }}</span>
          </div>
        </div>
        <div class="g-row-line my-24"></div>
      </div>
    </d-skeleton>
  </div>
</template>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>
