<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="qualification-section">
      <view class="section-header">
        <text class="section-title">平台资质</text>
        <!-- <text class="more-link" @click="navigateToQualifications">查看详情</text> -->
      </view>
      <view class="qualification-grid">
        <view class="qual-col-left">
          <view 
            class="qualification-card large"
            @click="navigateToQualification(qualifications[0])"
          >
            <view class="qual-card-inner qual-primary">
              <view class="qual-icon"><image src="/static/wjw.png" style="width: 100rpx; margin-left: -5px;" mode="widthFix"></image></view>
              <text class="qual-name text-white">卫健委认证机构</text>
              <text class="qual-desc text-white-sub">互联网诊疗资质备案</text>
            </view>
          </view>
        </view>
        <view class="qual-col-right">
          <view 
            class="qualification-card small"
            @click="navigateToQualification(qualifications[1])"
          >
            <view class="qual-card-inner qual-beige">
              <view class="qual-icon-wrap">
                <view class="qual-icon"><image src="/static/yy.png" style="width: 100rpx; margin-left: -10px;" mode="widthFix"></image></view>
              </view>
              <view>
                <text class="qual-name">互联网医院</text>
                <text class="qual-desc">持证合规运营</text>
              </view>
            </view>
          </view>
          <view 
            class="qualification-card small"
            @click="navigateToAllDoctors"
          >
            <view class="qual-card-inner qual-grey">
              <view class="qual-icon-wrap">
                <view class="qual-icon"><image src="/static/ys.png" style="width: 90rpx; margin-left: -5px;" mode="widthFix"></image></view>
              </view>
              <view>
                <text class="qual-name">执业医师认证</text>
                <text class="qual-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" v-if="doctor.title">{{doctor.title}}</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, index) in articles" 
          :key="article.id"
          class="article-card"
          :class="{ 'article-card-secondary': index % 2 === 1 }"
          @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': index % 2 === 1 }"></view>
            <view class="article-tag" :class="{ 'tag-secondary': index % 2 === 1 }">{{ article.tag }}</view>
          </view>
          <text class="article-title" :class="{ 'title-secondary': index % 2 === 1 }">{{ 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'
import { onShow, onShareAppMessage } from '@dcloudio/uni-app'
const { proxy } = getCurrentInstance()

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

// 平台资质
const qualifications = ref([
  { id: 1, name: '卫健委认证机构', desc: '互联网诊疗资质备案', icon: '✓', dark: true, size: 'large' },
  { id: 2, name: '互联网医院', desc: '持证合规运营', icon: '', dark: false, size: 'small' },
  { id: 3, name: '执业医师认证', desc: '持证医师在线问诊', icon: '★', dark: false, size: 'small' }
])

// 健康百科
const articles = ref([])

const fetchArticles = async () => {
  try {
    const response = await proxy.apiUrl({
      url: '/api/article/lists',
      method: 'GET',
      data: { page_no: 1, page_size: 10 }
    })
    if (response && response.code === 1) {
      articles.value = (response.data.lists || []).map(item => ({
        ...item,
        cover: item.image,
        tag: item.cid || ''
      }))
    }
  } catch (error) {
    console.error('获取文章列表失败:', error)
  }
}

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

const navigateToQualifications = () => {
  uni.showToast({ title: '资质详情', icon: 'none' })
}

const navigateToQualification = (item) => {
  // 根据类型打开不同的协议页面
  uni.navigateTo({
  	url: '/pages/Card/contact?type=health'
  })
}

const navigateToAllDoctors = () => {
  uni.navigateTo({
    url: '/doctor/pages/doctor/list/list'
  })
}

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

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

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
  }
}
const userinfo = async (code) => {

    try {
    // 通过 proxy 调用全局的 apiUrl
    const res = await proxy.apiUrl({
      url: '/api/user/info',
      method: 'POST',
    }, false) // 不显示加载中
 
	uni.setStorageSync('userData', res.data)
	
    
  } catch (err) {
  
   
  }

}
onMounted(() => {
  fetchDoctors()
  fetchArticles()
  userinfo()
})
</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 布局
.qualification-section {
  margin-bottom: 64rpx;
}

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

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

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

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

.qual-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 */
.qual-primary {
  background: $primary-container;
  color: $on-primary;
}

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

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

/* 互联网医院 - secondary-container */
.qual-beige {
  background: $secondary-container;
  color: $on-secondary-container;
  flex-direction: row;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
}



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

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

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

/* 执业医师认证 - surface-container-high */
.qual-grey {
  background: $surface-container-high;
  color: $on-surface;
  flex-direction: row;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
}



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

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

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

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

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

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

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

.qual-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;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



.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;
  position: relative;
    right: 0;
    bottom: 0;
}

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