<template>
  <div class="g-issue-top flex gap-4">
    <!-- status -->
    <div class="stat-card min-w-[56px] min-h-[70px] flex flex-col gap-2 justify-center items-center"
      :style="{ backgroundColor: issueStateOption[state].bgColor}">
      <span>
        <Icon v-if="issueStateOption[state]" :name="issueStateOption[state].icon" :color="issueStateOption[state].color"></Icon>
      </span>
      <GLink :href="issueUrl" v-if="indexLabel"> #{{ indexLabel }} </GLink>
    </div>
    <!-- info -->
    <div class="issue-info" :class="{ 'mr-[25px]': !hideClose }">
      <GLink :href="orgId &&  $route.params.repoName?
        $router.resolve({ name: 'repoIssueDetail', params: { serialNumber: data.iid } }).href :
        data.web_url" class="issue-title" style="font-weight: 500;" :title="title">{{ title }}</GLink>
      <div class="bottom-info">
        <GLink :to="{ name: 'homepage', params: { namespace: userName } }" class="flex items-center min-w-[16px]">
          <g-avatar :name="userName" :src="author?.avatar_url" :width="16" :height="16"></g-avatar>
        </GLink>
        <GLink class="user-name" :to="{ name: 'homepage', params: { namespace: userName } }">{{ pickNickName(author) }}</GLink>
        <span class="text-CG600 text-xs">创建于 <Time :time="createdTime" /></span>
      </div>
    </div>
    <!-- off btn -->
    <span class="text-xs g-issue-top-header-close g-icon-pointer" v-if="!hideClose"
      @click.stop="emits('handleClose', props)">关闭</span>
  </div>
</template>

<script lang="ts" setup>
import Time from '@/components/Time/index.vue';
import UserAvtar from '@/components/UserAvatar/index.vue';
import { pickNickName } from '@/utils';
import { issueStateOption } from '@/constant/issue';
import type { ISSUE_STATE } from '@/constant/issue';
import { useOrgId } from '@/utils/hooks/useOrgId';
const { orgId } = useOrgId('/');
const props = withDefaults(
  defineProps<{
    title: string;
    userName: string;
    createdTime: string;
    hideClose?: boolean;
    indexLabel?: string;
    author?: object;
    issueUrl: string;
    data: object;
    state: ISSUE_STATE
  }>(),
  {
    title: '',
    userName: '',
    createdTime: '',
    hideClose: true,
    indexLabel: ''
  }
);

const emits = defineEmits(['handleClose']);
</script>

<style scoped lang="scss">
$g-issue-top-border-color: #d3d3d3;
$g-issue-top-border-radius: 4px;
$g-issue-top-text-color: #707a87;

.g-issue-top {
  background-color: #fff;
  padding: 16px 20px;

  &-header {
    &-close {
      position: absolute;
      right: 20px;
      top: 18px;
      font-weight: 400;
      color: #707a87;
      line-height: 17px;
      height: 21px;
    }

  }

  .stat-card {
    border-radius: 3px;
  }
}
.issue-info {
  @apply flex flex-col gap-2 justify-between whitespace-nowrap overflow-hidden text-ellipsis;
  .issue-title {
    @apply text-G900 text-base line-clamp-2 break-all overflow-hidden text-ellipsis whitespace-normal;
  }
  .bottom-info {
    @apply flex gap-2 items-center;
    .user-name {
      @apply overflow-hidden text-ellipsis break-all;
    }
  }
}
</style>
