<template>
  <div id="UserPanel" class="user-panel">
    <div class="float">
      <Icon icon="eva:arrow-ios-back-fill" class="icon" @click="emit('back')" />
      <span class="title">{{ farmName }}</span>
    </div>
    <div class="main">
      <div class="farm-card">
        <div class="farm-header">
          <img :src="avatarUrl" class="avatar" alt="" />
          <div class="farm-info">
            <div class="farm-name">{{ farmName }}</div>
            <div class="farm-location">{{ location }}</div>
          </div>
        </div>
        <div class="farm-intro">{{ intro }}</div>
        <div class="adopt-friends">{{ adoptFriendsText }}</div>
        <div class="guard-btn" @click="onGuard">我要守护</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { _checkImgUrl, _notice } from '@/utils/index'

type PanelItem = {
  farmName?: string
  desc?: string
  city?: string
  address?: string
  adopt_friends_count?: number
  author?: {
    nickname?: string
    signature?: string
    avatar_168x168?: { url_list?: string[] }
  }
  video?: { cover?: { url_list?: string[] } }
}

const props = defineProps({
  currentItem: { type: Object, default: () => ({}) },
  active: { type: Boolean, default: false },
})

const emit = defineEmits<{
  back: []
  toggleCanMove: [boolean]
  showFollowSetting: []
  showFollowSetting2: []
  'update:currentItem': [unknown]
}>()

const router = useRouter()

const item = computed(() => props.currentItem as PanelItem)
const author = computed(() => item.value.author || {})

const farmName = computed(
  () => item.value.farmName || author.value.nickname || '从化荔博园',
)

const location = computed(() => {
  const parts = [item.value.city, item.value.address].filter(Boolean)
  return parts.length ? parts.join(' ') : '农场位置农场位置'
})

const intro = computed(() => {
  const sig = author.value.signature?.trim()
  if (sig) return sig
  const desc = item.value.desc?.replace(/\n/g, ' ').trim()
  if (desc) return desc
  return '果园介绍果园介绍果园介绍'
})

const adoptFriendsText = computed(() => {
  const n = item.value.adopt_friends_count ?? 3
  return `${n}个朋友认养`
})

const avatarUrl = computed(() => {
  const cover = item.value.video?.cover?.url_list?.[0]
  const avatar = author.value.avatar_168x168?.url_list?.[0]
  return (
    // _checkImgUrl(cover || avatar) ||
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  )
})

function onGuard() {
  _notice('守护功能开发中')
  router.push('/my-guard')
}

defineExpose({
  cancelFollow: () => { },
})
</script>

<style scoped lang="less">
.user-panel {
  height: 100vh;
  background: #fff;
  overflow: auto;

  .float {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    padding: 12rem 48rem;
    background: #fff;
    z-index: 1;

    .icon {
      position: absolute;
      left: 12rem;
      font-size: 25rem;
      cursor: pointer;
    }

    .title {
      font-size: 17rem;
      font-weight: 500;
      text-align: center;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .main {
    padding: 6rem 18rem;

    .farm-card {
      .farm-header {
        display: flex;
        align-items: center;
        gap: 10rem;
        margin-bottom: 16rem;

        .avatar {
          width: 66rem;
          height: 66rem;
          border-radius: 50%;
          object-fit: cover;
        }

        .farm-name {
          margin-bottom: 8rem;
          font-size: 20rem;
          font-weight: 500;
          color: #1D2129;
        }

        .farm-location {
          font-size: 12rem;
          color: #B0B0B0;
        }
      }

      .farm-intro {
        font-size: 12rem;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 8rem;
      }

      .adopt-friends {
        margin-bottom: 16rem;
        font-size: 12rem;
        color: rgba(0, 0, 0, 0.5);
      }

      .guard-btn {
        padding: 10rem;
        border-radius: 4rem;
        background: #FFA617;
        color: #fff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
