<template>
  <div class="infoLeft flex" v-if="infoText">
    <GAvatar v-if="!isMobile" :class="!imgUrl ? 'avatar' : 'avatar1'" :src="imgUrl" :name="infoText" :width="20" :height="20"
      :is_round="isRound">
    </GAvatar>
    <span class="info-span info-noline max-w-[200px]">{{ infoText }}</span>
    <span v-if="infoSubText" class="info-subtext info-noline max-w-[200px]"
      :style="userDashBoard ? 'margin-right:8px;' : ''">{{ infoSubText
      }}</span>
    <d-button class="follow ml-[16px]" size="sm" @click="handleClick">{{ isFollow ? '已关注' : '关注' }}</d-button>
  </div>
</template>

<script setup lang="ts">
import { usePageResize } from '@/utils/hooks/usePageResize';

const { isMobile } = usePageResize();

interface IProps {
  // 声明props内容
  imgUrl?: string,
  infoText?: string,
  infoSubText?: string,
  isRound: boolean,
  userDashBoard?: boolean;
  isFollow?: boolean
}
const props = defineProps<IProps>();
const emit = defineEmits(['followClick']);
const handleClick = () => {
  emit('followClick', props.isFollow);
};
</script>

<style lang="scss" scoped>
.infoLeft {
  height: 100%;
  display: flex;
  align-items: center;

  .avatar {
    :deep(.devui-avatar--style) {
      border: 0.5px solid #d3d3d3;
    }
  }

  .avatar1 {
    border: 0.5px solid #d3d3d3;
    border-radius: 4px;
    overflow: hidden;
  }

  .info-span {
    flex: 1;
    margin-left: 16px;
    font-size: var(--text-sm);
    font-weight: bold;
    color: var(--color-G900);
    line-height: 20px;
    max-width: 200px;
  }

  .info-subtext {
    margin-left: 8px;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-G700);
    line-height: 20px;
  }
}

.info-noline {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@media screen and (max-width: 1000px) {
  .infoLeft {
    width: 100%;
    padding: 3px 20px;
    justify-content: space-between;

    .info-span {
      font-size: var(--text-base);
      margin-left: 0;
      line-height: 24px;
    }
  }
}
</style>
