<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 class="works-section">
        <div class="works-tabs">
          <span class="tab active">农场美景</span>
        </div>
        <div class="works-grid">
          <div
            v-for="v in 8"
            :key="v"
            class="grid-item"
          >
            <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" class="cover" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

type PanelItem = {
  farmName?: string
  desc?: string
  city?: string
  address?: string
  adopt_friends_count?: number
  author?: {
    nickname?: string
    signature?: string
  }
}

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

const emit = defineEmits<{
  back: []
}>()

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 =
  'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

function onGuard() {
  _notice('守护功能开发中')
  router.push('/my-guard')
}
</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 0;

    .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;
      }
    }

    .works-section {
      margin-left: -18rem;
      margin-right: -18rem;

      .works-tabs {
        padding: 24rem 18rem 0;
        background: #fff;
        margin-bottom: 14rem;

        .tab {
          display: inline-block;
          font-weight: 500;
          color: #b0b0b0;
          padding-bottom: 10rem;
          position: relative;

          &.active {
            color: #000;

            &::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 3rem;
              background: #1d2129;
              border-radius: 2rem;
            }
          }
        }
      }

      .works-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        padding: 2rem 0;

        .grid-item {
          aspect-ratio: 3 / 4;
          overflow: hidden;
          background: #2a2a2a;
          cursor: pointer;

          .cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
        }
      }
    }
  }
}
</style>
