<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { computed, inject } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus'
import { _formatChineseDate } from '@/utils/index'

defineProps({
  isMy: { type: Boolean, default: false },
  isLive: { type: Boolean, default: false },
})

const item = inject<{
  desc?: string
  city?: string
  address?: string
  create_time?: number
  farmName?: string
  author?: { nickname?: string }
}>('item')

const displayName = computed(
  () => item?.farmName || item?.author?.nickname || '',
)

const publishDate = computed(() => _formatChineseDate(item?.create_time))

function goUser() {
  bus.emit(EVENT_KEY.GO_USERINFO)
}
</script>

<template>
  <div v-if="item && !isMy" class="item-desc" @click.stop>
    <div v-if="item.city || item.address" class="location-wrapper">
      <div class="location">
        <Icon icon="mdi:map-marker" class="loc-icon" />
        <span>{{ item.city }}</span>
        <template v-if="item.address">
          <div class="gang" />
          <span>{{ item.address }}</span>
        </template>
      </div>
    </div>
    <div v-if="isLive" class="live">直播中</div>
    <div class="name-row" @click.stop="goUser">
      <span class="name">@ {{ displayName }}</span>
      <span v-if="publishDate" class="date">{{ publishDate }}</span>
    </div>
    <div class="description">{{ item.desc }}</div>
  </div>
</template>

<style scoped lang="less">
.item-desc {
  position: absolute;
  bottom: var(--footer-safe-bottom, 100rem);
  left: 0;
  width: 70%;
  padding: 0 0 8rem 15rem;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 4;
  text-align: left;
  color: #fff;

  .location-wrapper {
    margin-bottom: 10rem;

    .location {
      display: inline-flex;
      align-items: center;
      font-size: 12rem;
      padding: 4rem 8rem;
      border-radius: 3rem;
      background: rgba(58, 58, 70, 0.4);

      .loc-icon {
        font-size: 14rem;
        margin-right: 6rem;
      }

      .gang {
        height: 8rem;
        width: 1.5px;
        margin: 0 5rem;
        background: gray;
      }
    }
  }

  .live {
    display: inline-block;
    margin-bottom: 10rem;
    padding: 3rem 6rem;
    font-size: 11rem;
    border-radius: 3rem;
    background: #fe2c55;
  }

  .name-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12rem;
    margin-bottom: 8rem;
    cursor: pointer;

    .name {
      font-size: 18rem;
      font-weight: bold;
      color: #fff;
      flex-shrink: 0;
    }

    .date {
      font-size: 14rem;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.55);
      flex-shrink: 0;
      white-space: nowrap;
    }
  }

  .description {
    font-size: 14rem;
    line-height: 1.4;
    opacity: 0.95;
  }
}
</style>
