<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input class="search-input" placeholder="搜索药材、医生或症状..." type="text" />
        <text class="search-filter">⚙</text>
      </view>
    </view>

    <!-- 科室分类 -->
    <view class="department-section">
      <view class="section-header">
        <text class="section-title">科室分类</text>
        <text class="more-link" @click="navigateToDepartments">查看全部</text>
      </view>
      <view class="department-grid">
        <view class="dept-col-left">
          <view 
            class="department-card large"
            @click="navigateToDepartment(departments[0])"
          >
            <view class="dept-card-inner dept-green">
              <view class="dept-icon"><text class="icon-text">✦</text></view>
              <text class="dept-name text-white">针灸</text>
              <text class="dept-desc text-white-sub">调理气血</text>
            </view>
          </view>
        </view>
        <view class="dept-col-right">
          <view 
            class="department-card small"
            @click="navigateToDepartment(departments[1])"
          >
            <view class="dept-card-inner dept-beige">
              <view class="dept-icon-wrap">
                <view class="dept-icon"><text class="icon-text">●</text></view>
              </view>
              <view>
                <text class="dept-name">中药</text>
                <text class="dept-desc">古法方剂</text>
              </view>
            </view>
          </view>
          <view 
            class="department-card small"
            @click="navigateToDepartment(departments[2])"
          >
            <view class="dept-card-inner dept-grey">
              <view class="dept-icon-wrap">
                <view class="dept-icon"><text class="icon-text">☯</text></view>
              </view>
              <view>
                <text class="dept-name">推拿</text>
                <text class="dept-desc">中医按摩</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 名医推荐 -->
    <view class="doctors-section">
      <view class="section-header">
        <text class="section-title">名医推荐</text>
        <text class="more-link" @click="navigateToAllDoctors">查看全部</text>
      </view>

      <view class="doctors-list">
        <view 
          v-for="doctor in doctors" 
          :key="doctor.id"
          class="doctor-card"
          @click="selectDoctor(doctor)"
        >
          <image :src="doctor.avatar || defaultAvatar" class="doctor-photo" mode="aspectFill"></image>
          <view class="doctor-info">
            <view class="doctor-top">
              <text class="doctor-name">{{ doctor.name }}</text>
              <text class="doctor-rating">★ {{ doctor.rating || '4.9' }}</text>
            </view>
            <text class="doctor-specialty">{{ doctor.specialty || doctor.title || '中医' }}</text>
            <view class="doctor-price-row">
              <text class="doctor-price">{{ doctor.price || '' }}</text>
              <text class="doctor-unit">/次</text>
            </view>
            <view class="doctor-actions">
              <view class="appointment-btn" @click.stop="selectDoctor(doctor)">预约</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 健康百科 -->
    <view class="encyclopedia-section">
      <view class="section-header">
        <text class="section-title">健康百科</text>
        <text class="more-link" @click="navigateToEncyclopedia">查看全部</text>
      </view>
      <scroll-view class="encyclopedia-scroll no-scrollbar" scroll-x :show-scrollbar="false">
        <view 
          v-for="article in articles" 
          :key="article.id"
          class="article-card"
          :class="{ 'article-card-secondary': article.id === 2 }"
          @click="navigateToArticle(article)"
        >
          <view class="article-image-wrap">
            <image :src="article.cover" class="article-image" mode="aspectFill"></image>
            <view class="article-gradient" :class="{ 'gradient-secondary': article.id === 2 }"></view>
            <view class="article-tag" :class="{ 'tag-secondary': article.id === 2 }">{{ article.tag }}</view>
          </view>
          <text class="article-title" :class="{ 'title-secondary': article.id === 2 }">{{ article.title }}</text>
          <text class="article-desc">{{ article.desc }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const doctors = ref([])
const loading = ref(false)
const defaultAvatar = '/static/user/user.png'

// 科室分类
const departments = ref([
  { id: 1, name: '针灸', desc: '调理气血', icon: '✦', iconClass: 'icon-acupuncture', bgColor: 'linear-gradient(135deg, #2d5a3d 0%, #3d7a4d 100%)', dark: true, size: 'large', pattern: true },
  { id: 2, name: '中药', desc: '古法方剂', icon: '◉', iconClass: 'icon-herb', bgColor: '#F5E6D3', dark: false, size: 'small' },
  { id: 3, name: '推拿', desc: '中医按摩', icon: '☯', iconClass: 'icon-massage', bgColor: '#E8E4DF', dark: false, size: 'small' }
])

// 健康百科
const articles = ref([
  { id: 1, title: '晨间生姜:脾胃健康的催化剂', desc: '了解每天早晨一片生姜如何改善您的新陈代谢...', tag: '膳食营养', cover: 'https://picsum.photos/seed/herb/300/180' },
  { id: 2, title: '四时呼吸:顺应节气养生', desc: '顺应节气，调养身心...', tag: '正念冥想', cover: 'https://picsum.photos/seed/nature/300/180' },
  { id: 3, title: '中医养生之道', desc: '传统智慧，现代健康...', tag: '养生保健', cover: 'https://picsum.photos/seed/health/300/180' }
])

const selectDoctor = (doctor) => {
  uni.navigateTo({
    url: `/doctor/pages/doctor/doctor?id=${doctor.id}`
  })
}

const navigateToDepartments = () => {
  uni.showToast({ title: '科室列表', icon: 'none' })
}

const navigateToDepartment = (item) => {
  uni.showToast({ title: item.name, icon: 'none' })
}

const navigateToAllDoctors = () => {
  uni.showToast({ title: '更多医生', icon: 'none' })
}

const navigateToEncyclopedia = () => {
  uni.showToast({ title: '健康百科', icon: 'none' })
}

const navigateToArticle = (article) => {
  uni.showToast({ title: article.title, icon: 'none' })
}

const fetchDoctors = async () => {
  loading.value = true
  try {
    const response = await proxy.apiUrl({
      url: '/api/doctor/lists',
      method: 'GET',
      data: {
        page_no: 1,
        page_size: 10
      }
    })
    
    if (response && response.code === 1) {
      const data = response.data
      const doctorList = data.lists || []
      doctors.value = doctorList
    } else {
      console.warn('获取医生列表失败:', response?.msg)
    }
  } catch (error) {
    console.error('请求异常:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchDoctors()
})
</script>

<style scoped lang="scss">
/* TCM Care 设计系统 - 源自 code.html */
$background: #faf9f5;
$primary: #204e2b;
$primary-container: #386641;
$on-primary: #ffffff;
$on-primary-container: #afe2b3;
$secondary-container: #fdc39a;
$on-secondary-container: #794e2e;
$surface-container-lowest: #ffffff;
$surface-container-low: #f4f4f0;
$surface-container-high: #e9e8e4;
$surface-container-highest: #e3e2df;
$on-surface: #1b1c1a;
$on-surface-variant: #414941;
$tertiary-container: #4b6500;
$tertiary: #384c00;
$outline: #727970;

.container {
  background: $background;
  min-height: 100vh;
  padding: 24rpx 32rpx 120rpx;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.font-headline {
  font-family: 'Noto Serif', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', serif;
}

// 搜索栏 - surface-container-low
.search-section {
  margin-bottom: 32rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background: $surface-container-low;
  border-radius: 24rpx;
  padding: 24rpx 32rpx;
}

.search-icon {
  font-size: 36rpx;
  color: $outline;
  margin-right: 24rpx;
}

.search-input {
  flex: 1;
  background: transparent;
  font-size: 28rpx;
  color: $on-surface;
}

.search-input::placeholder {
  color: #414941;
  opacity: 0.5;
}

.search-filter {
  font-size: 36rpx;
  color: $outline;
}

// 通用区块
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 48rpx;
  font-weight: bold;
  color: $on-surface;
  font-family: 'Noto Serif', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', serif;
}

.more-link {
  font-size: 28rpx;
  color: $primary;
  font-weight: 500;
}

// 科室分类 - grid 布局
.department-section {
  margin-bottom: 64rpx;
}

.department-grid {
  display: flex;
  gap: 32rpx;
}

.dept-col-left {
  flex: 1;
}

.dept-col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.department-card {
  &.large {
    height: 100%;
    min-height: 320rpx;
  }
  
  &.small {
    flex: 1;
    min-height: 160rpx;
  }
}

.dept-card-inner {
  border-radius: 24rpx;
  padding: 40rpx;
  height: 100%;
  min-height: 160rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* 针灸 - primary-container */
.dept-green {
  background: $primary-container;
  color: $on-primary;
}

.dept-green .dept-icon .icon-text,
.dept-green .dept-name {
  color: $on-primary;
}

.dept-green .dept-desc {
  color: $on-primary-container;
  font-size: 24rpx;
}

/* 中药 - secondary-container */
.dept-beige {
  background: $secondary-container;
  color: $on-secondary-container;
  flex-direction: row;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
}

.dept-beige .dept-icon-wrap {
  background: rgba(255, 255, 255, 0.4);
  padding: 16rpx;
  border-radius: 16rpx;
}

.dept-beige .dept-icon .icon-text {
  font-size: 40rpx;
  color: $on-secondary-container;
}

.dept-beige .dept-name {
  color: $on-secondary-container;
  margin-bottom: 4rpx;
  display: block;
}

.dept-beige .dept-desc {
  color: $on-secondary-container;
  opacity: 0.8;
  font-size: 20rpx;
  display: block;
}

/* 推拿 - surface-container-high */
.dept-grey {
  background: $surface-container-high;
  color: $on-surface;
  flex-direction: row;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
}

.dept-grey .dept-icon-wrap {
  background: rgba(255, 255, 255, 0.6);
  padding: 16rpx;
  border-radius: 16rpx;
}

.dept-grey .dept-icon .icon-text {
  font-size: 40rpx;
  color: $primary;
}

.dept-grey .dept-name {
  color: $on-surface;
  display: block;
}

.dept-grey .dept-desc {
  color: $on-surface-variant;
  font-size: 20rpx;
  display: block;
}

.dept-icon {
  margin-bottom: 16rpx;
}

.dept-beige .dept-icon,
.dept-grey .dept-icon {
  margin-bottom: 0;
}

.dept-icon .icon-text {
  font-size: 56rpx;
  color: $on-primary;
}

.dept-name {
  font-size: 36rpx;
  font-weight: 600;
  color: $on-surface;
  margin-bottom: 8rpx;
  font-family: 'Noto Serif', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', serif;
  
  &.text-white {
    color: $on-primary;
  }
}

.dept-desc {
  font-size: 26rpx;
  color: $on-surface-variant;
  
  &.text-white-sub {
    color: $on-primary-container;
  }
}

// 名医推荐
.doctors-section {
  margin-bottom: 64rpx;
}

.doctors-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.doctor-card {
  background: $surface-container-lowest;
  border-radius: 24rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.doctor-photo {
  width: 160rpx;
  height: 230rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  background: $surface-container-highest;
}

.doctor-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 192rpx;
}

.doctor-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.doctor-name {
  font-size: 36rpx;
  font-weight: bold;
  color: $on-surface;
  font-family: 'Noto Serif', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', serif;
}

.doctor-rating {
  font-size: 24rpx;
  color: #805533;
  font-weight: bold;
}

.doctor-specialty {
  font-size: 28rpx;
  color: $on-surface-variant;
  margin-bottom: 16rpx;
}

.doctor-price-row {
  margin-bottom: 16rpx;
}

.doctor-price {
  font-size: 28rpx;
  color: $primary;
  font-weight: bold;
}

.doctor-unit {
  font-size: 24rpx;
  font-weight: normal;
  color: $on-surface-variant;
}

.doctor-actions {
  display: flex;
  justify-content: flex-end;
}

.appointment-btn {
  background: $primary;
  color: $on-primary;
  font-size: 24rpx;
  font-weight: bold;
  padding: 16rpx 32rpx;
  border-radius: 9999rpx;
}

// 健康百科 - 横向滚动
.encyclopedia-section {
  margin-bottom: 64rpx;
}

.encyclopedia-scroll {
  white-space: nowrap;
  margin: 0 -32rpx;
  padding: 0 32rpx 32rpx;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.article-card {
  display: inline-block;
  width: 560rpx;
  margin-right: 40rpx;
  background: rgba(75, 101, 0, 0.06);
  border-radius: 24rpx;
  overflow: hidden;
  vertical-align: top;
}

.article-card-secondary {
  background: rgba(253, 195, 154, 0.1);
}

.article-card:last-child {
  margin-right: 0;
}

.article-image-wrap {
  position: relative;
  width: 100%;
  height: 256rpx;
  overflow: hidden;
}

.article-image {
  width: 100%;
  height: 100%;
  background: $tertiary-container;
  opacity: 0.8;
}

.article-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(to top, $tertiary-container, transparent);
}

.article-gradient.gradient-secondary {
  background: linear-gradient(to top, $secondary-container, transparent);
}

.article-tag {
  position: absolute;
  bottom: 16rpx;
  left: 24rpx;
  background: $tertiary;
  color: $on-primary;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 9999rpx;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
  z-index: 1;
}

.article-tag.tag-secondary {
  background: #805533;
  color: #ffffff;
}

.article-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #394d00;
  padding: 32rpx 32rpx 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: 'Noto Serif', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', serif;
}

.article-title.title-secondary {
  color: $on-secondary-container;
}

.article-desc {
  font-size: 24rpx;
  color: $on-surface-variant;
  padding: 0 32rpx 32rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
