<template>
  <view class="talent-detail">
    <!-- 个人信息卡片 -->
    <view class="profile-card">
      <view class="profile-header">
        <view class="left-section">
          <image
            class="avatar"
            :src="talentInfo.avatar"
            mode="aspectFill"
          ></image>
          <view class="basic-info">
            <view class="name-row">
              <text class="name">{{ talentInfo.name }}</text>
              <view class="tags">
                <view
                  class="tag"
                  v-for="(tag, index) in talentInfo.tags"
                  :key="index"
                  >{{ tag }}</view
                >
              </view>
            </view>
            <text class="education">毕业院校：{{ talentInfo.education }}</text>
          </view>
        </view>
        <div class="follow-btn" @click="followTalent">
          {{ isFollowed ? "已关注" : "+ 关注" }}
        </div>
      </view>

      <!-- 数据统计 -->
      <view class="stats">
        <view class="stat-item works">
          <text class="stat-number">{{ talentInfo.worksCount }}</text>
          <text class="stat-label">作品量</text>
        </view>
        <!-- 加跟竖线 隔离下 -->
        <view class="stat-item-line"></view>
        <view class="stat-item fans">
          <text class="stat-number">{{ talentInfo.fansCount }}</text>
          <text class="stat-label">粉丝量</text>
        </view>
      </view>
      <!-- 个人简介 -->
      <view class="section-header">
        <image class="crown-icon" src="/static/images/crown.png"></image>
        <text class="section-title">个人简介</text>
      </view>
      <text class="intro-text">{{ talentInfo.introduction }}</text>
    </view>

    <!-- 选项卡导航 -->
    <view class="tab-nav">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab }}</text>
      </view>
    </view>

    <!-- 技术证书内容 -->
    <view class="tab-content" v-if="currentTab === 0">
      <!-- 技术证书列表 图片展示 -->
      <TechnicalCertificates />
    </view>

    <!-- 个人履历内容 -->
    <view class="tab-content" v-if="currentTab === 1">
      <!-- 个人履历内容 -->
      <Certificates :talentInfo="talentInfo" />
    </view>

    <!-- 作品展示内容 -->
    <view class="tab-content" v-if="currentTab === 2">
      <!-- 作品展示内容 -->
      <Works :talentInfo="talentInfo" />
    </view>
  </view>
</template>

<script setup lang="ts">
definePageMeta({ layout: 'm' })
import TechnicalCertificates from "~/components/m/detail-components/technicalCertificates.vue";
import Certificates from "~/components/m/detail-components/certificates.vue";
import Works from "~/components/m/detail-components/Works.vue";
import { reactive, ref } from 'vue'

const isFollowed = ref(false)
const currentTab = ref(0)
const tabs = ['技术证书', '个人履历', '作品展示']
const talentInfo = reactive({
  id: 1,
  name: '王刚',
  avatar: '/static/images/avater2.png',
  tags: ['五金工具', '电子产品'],
  education: '重庆工商大学',
  worksCount: 876,
  fansCount: 98,
  introduction:
    '你好！我是专注于工业设计和机械设计领域的专业设计师，擅长进行外观设计、结构设计、板金设计等各类工程设计工作。我拥有丰富的经验，能够为客户提供高质量的设计解决方案，包括PCB外壳设计、框架设计、运动仿真、逆向工程等。此外，我熟练使用Creo、CAD等设计软件，能够进行精准的3D建模、渲染、2D工程图绘制、CAD代画以及三维转二维等工作。',
  certificates: [
    { year: '2020年', description: '韩国内基211学府设计的一款月度采样机' },
    { year: '2021年', description: '韩国内基211学府设计的一款月度采样机' },
    { year: '2022年', description: '韩国内基211学府设计的一款月度采样机' },
    { year: '2023年', description: '韩国内基211学府设计的一款月度采样机' },
    { year: '2024年', description: '韩国内基211学府设计的一款月度采样机' },
    { year: '2025年', description: '韩国内基211学府设计的一款月度采样机' },
  ],
})

function followTalent() {
  isFollowed.value = !isFollowed.value
}
function switchTab(index: number) {
  currentTab.value = index
}
</script>

<style lang="scss" scoped>
.talent-detail {
  min-height: 100vh;
  background-color: #fff;
  padding: 30rpx 30rpx 0;
  background-image: url("@/static/images/talent-detail-bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;

  // 个人信息卡片样式
  .profile-card {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    border: 1px solid #eee;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    margin-top: 164rpx;

    .profile-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .left-section {
        display: flex;
        align-items: flex-start;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .basic-info {
          display: flex;
          flex-direction: column;

          .name-row {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .name {
              font-size: 36rpx;
              font-weight: bold;
              margin-right: 20rpx;
            }

            .tags {
              display: flex;

              .tag {
                font-size: 24rpx;
                color: #1a65ff;
                background-color: #e6f0ff;
                padding: 4rpx 16rpx;
                border-radius: 20rpx;
                margin-right: 12rpx;
              }
            }
          }

          .education {
            font-size: 28rpx;
            color: #666;
          }
        }
      }

      .follow-btn {
        width: 89rpx;
        height: 44rpx;
        border-radius: 7rpx;
        border: 1px solid #d7d7d7;
        text-align: center;
        line-height: 44rpx;
        font-size: 21rpx;
        color: #0a6fff;
      }
    }

    // 数据统计区域
    .stats {
      display: flex;
      margin-top: 30rpx;
      margin-left: 140rpx;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .stat-number {
          font-size: 40rpx;
          font-weight: bold;
          color: #333;
          line-height: 1.2;
        }

        .stat-label {
          font-size: 28rpx;
          color: #999;
          margin-top: 4rpx;
        }
      }

      .stat-item-line {
        width: 1px;
        height: 90rpx;
        background-color: #eee;
        margin: 0 50rpx;
      }
    }

    .section-header {
      display: flex;
      align-items: center;
      margin-top: 40rpx;
      margin-bottom: 20rpx;
      width: 100%;
      justify-content: center;
      height: 56rpx;
      background: rgba(26, 101, 255, 0.1);
      border-radius: 28rpx;

      .crown-icon {
        width: 40.97rpx;
        height: 35.42rpx;
        margin-right: 10rpx;
      }

      .section-title {
        font-size: 29rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .intro-text {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
    }
  }

  // 选项卡导航
  .tab-nav {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx 12rpx 0 0;

    .tab-item {
      padding: 24rpx 0;
      margin-right: 60rpx;
      position: relative;
      font-size: 25rpx;
      color: #666;
      transition: all 0.3s ease;

      &.active {
        color: #1a65ff;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 14rpx;
          width: 100%;
          height: 4rpx;
          background-color: #1a65ff;
        }
      }
    }
  }

  // 选项卡内容
  .tab-content {
    background-color: #fff;
    border-radius: 0 0 12rpx 12rpx;
    padding: 20rpx 0rpx;
  }
}
</style>
