<template>
  <view class="consultation-page">
    <!-- 顶部搜索 -->
    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input v-model="searchKeyword" placeholder="搜索医生、科室或疾病" @confirm="handleSearch" />
      </view>
    </view>

    <!-- 科室分类 -->
    <view class="department-section">
      <view class="section-title">科室分类</view>
      <view class="department-grid">
        <view
          v-for="dept in departments"
          :key="dept.id"
          class="department-item"
          @click="selectDepartment(dept)"
        >
          <view class="dept-icon">
            <text class="icon">{{ dept.icon }}</text>
          </view>
          <text class="dept-name">{{ dept.name }}</text>
        </view>
      </view>
    </view>

    <!-- 在线医生 -->
    <view class="doctor-section">
      <view class="section-header">
        <text class="section-title">在线医生</text>
        <text class="more-link" @click="viewAllDoctors">查看全部</text>
      </view>
      <view class="doctor-list">
        <view
          v-for="doctor in onlineDoctors"
          :key="doctor.id"
          class="doctor-card"
          @click="selectDoctor(doctor)"
        >
          <image class="doctor-avatar" :src="doctor.avatar" mode="aspectFill" />
          <view class="doctor-info">
            <view class="doctor-name">{{ doctor.name }}</view>
            <view class="doctor-title">{{ doctor.title }}</view>
            <view class="doctor-hospital">{{ doctor.hospital }}</view>
            <view class="doctor-rating">
              <text class="rating-text">⭐ {{ doctor.rating }}</text>
              <text class="experience">{{ doctor.experience }}年经验</text>
            </view>
          </view>
          <view class="doctor-price">
            <text class="price">¥{{ doctor.consultationFee }}</text>
            <view class="online-status">在线</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 咨询历史 -->
    <view class="history-section">
      <view class="section-header">
        <text class="section-title">咨询历史</text>
        <text class="more-link" @click="viewHistory">查看全部</text>
      </view>
      <view class="history-list">
        <view
          v-for="consultation in consultationHistory"
          :key="consultation.id"
          class="history-item"
          @click="viewConsultation(consultation)"
        >
          <image class="doctor-avatar" :src="consultation.doctorAvatar" mode="aspectFill" />
          <view class="consultation-info">
            <view class="doctor-name">{{ consultation.doctorName }}</view>
            <view class="consultation-time">{{ formatTime(consultation.startTime) }}</view>
            <view class="consultation-status" :class="consultation.status">
              {{ getStatusText(consultation.status) }}
            </view>
          </view>
          <view class="consultation-type">
            <text class="type-icon">{{ getTypeIcon(consultation.type) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 快速咨询入口 -->
    <view class="quick-consultation">
      <button class="quick-btn" @click="quickConsultation">
        <text class="btn-icon">⚡</text>
        <text class="btn-text">快速咨询</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const searchKeyword = ref("");

const departments = ref([
  { id: 1, name: "内科", icon: "🫀" },
  { id: 2, name: "外科", icon: "🔪" },
  { id: 3, name: "妇科", icon: "👩" },
  { id: 4, name: "儿科", icon: "👶" },
  { id: 5, name: "骨科", icon: "🦴" },
  { id: 6, name: "皮肤科", icon: "🧴" },
  { id: 7, name: "眼科", icon: "👁️" },
  { id: 8, name: "口腔科", icon: "🦷" },
]);

const onlineDoctors = ref([
  {
    id: "1",
    name: "张医生",
    title: "主任医师",
    hospital: "三甲医院",
    avatar: "/static/images/doctor1.jpg",
    rating: 4.8,
    experience: 15,
    consultationFee: 50,
  },
  {
    id: "2",
    name: "李医生",
    title: "副主任医师",
    hospital: "二甲医院",
    avatar: "/static/images/doctor2.jpg",
    rating: 4.6,
    experience: 12,
    consultationFee: 40,
  },
]);

const consultationHistory = ref([
  {
    id: "1",
    doctorName: "王医生",
    doctorAvatar: "/static/images/doctor3.jpg",
    startTime: new Date().toISOString(),
    status: "completed",
    type: "text",
  },
]);

const handleSearch = () => {
  console.log("搜索:", searchKeyword.value);
};

const selectDepartment = (dept: any) => {
  uni.navigateTo({ url: `/pages/health/consultation/doctor-list?department=${dept.name}` });
};

const selectDoctor = (doctor: any) => {
  uni.navigateTo({ url: `/pages/health/consultation/chat?doctorId=${doctor.id}` });
};

const viewAllDoctors = () => {
  uni.navigateTo({ url: "/pages/health/consultation/doctor-list" });
};

const viewHistory = () => {
  uni.navigateTo({ url: "/pages/health/consultation/history" });
};

const viewConsultation = (consultation: any) => {
  uni.navigateTo({ url: `/pages/health/consultation/chat?consultationId=${consultation.id}` });
};

const quickConsultation = () => {
  uni.navigateTo({ url: "/pages/health/consultation/quick" });
};

const formatTime = (time: string) => {
  return new Date(time).toLocaleDateString("zh-CN");
};

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: "待开始",
    ongoing: "进行中",
    completed: "已完成",
    cancelled: "已取消",
  };
  return statusMap[status] || status;
};

const getTypeIcon = (type: string) => {
  const typeMap: Record<string, string> = {
    text: "💬",
    voice: "🎤",
    video: "📹",
  };
  return typeMap[type] || "💬";
};
</script>

<style lang="scss" scoped>
.consultation-page {
  min-height: 100vh;
  padding: 20rpx;
  background: #f5f5f5;
}

.search-section {
  margin-bottom: 30rpx;

  .search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background: white;
    border-radius: 25rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

    .search-icon {
      margin-right: 20rpx;
      font-size: 30rpx;
      color: #999;
    }

    input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.department-section {
  padding: 30rpx;
  margin-bottom: 30rpx;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .section-title {
    margin-bottom: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .department-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30rpx;
  }

  .department-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 15rpx;
    transition: background 0.3s;

    &:active {
      background: #e9ecef;
    }

    .dept-icon {
      margin-bottom: 15rpx;

      .icon {
        font-size: 40rpx;
      }
    }

    .dept-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

.doctor-section,
.history-section {
  padding: 30rpx;
  margin-bottom: 30rpx;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

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

    .more-link {
      font-size: 26rpx;
      color: #007aff;
    }
  }
}

.doctor-list {
  .doctor-card {
    display: flex;
    align-items: center;
    padding: 25rpx;
    margin-bottom: 20rpx;
    background: #f8f9fa;
    border-radius: 15rpx;
    transition: background 0.3s;

    &:active {
      background: #e9ecef;
    }

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

    .doctor-info {
      flex: 1;

      .doctor-name {
        margin-bottom: 8rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }

      .doctor-title {
        margin-bottom: 8rpx;
        font-size: 24rpx;
        color: #666;
      }

      .doctor-hospital {
        margin-bottom: 8rpx;
        font-size: 24rpx;
        color: #999;
      }

      .doctor-rating {
        display: flex;
        align-items: center;

        .rating-text {
          margin-right: 20rpx;
          font-size: 22rpx;
          color: #ff9500;
        }

        .experience {
          font-size: 22rpx;
          color: #666;
        }
      }
    }

    .doctor-price {
      text-align: right;

      .price {
        display: block;
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #ff3b30;
      }

      .online-status {
        padding: 5rpx 15rpx;
        font-size: 20rpx;
        color: #34c759;
        background: #e8f5e8;
        border-radius: 10rpx;
      }
    }
  }
}

.history-list {
  .history-item {
    display: flex;
    align-items: center;
    padding: 25rpx;
    margin-bottom: 20rpx;
    background: #f8f9fa;
    border-radius: 15rpx;

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

    .consultation-info {
      flex: 1;

      .doctor-name {
        margin-bottom: 8rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }

      .consultation-time {
        margin-bottom: 8rpx;
        font-size: 24rpx;
        color: #666;
      }

      .consultation-status {
        padding: 5rpx 15rpx;
        font-size: 22rpx;
        border-radius: 10rpx;

        &.completed {
          color: #34c759;
          background: #e8f5e8;
        }

        &.ongoing {
          color: #ff9500;
          background: #fff2e8;
        }

        &.pending {
          color: #007aff;
          background: #e8f4fd;
        }
      }
    }

    .consultation-type {
      .type-icon {
        font-size: 30rpx;
      }
    }
  }
}

.quick-consultation {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;

  .quick-btn {
    display: flex;
    align-items: center;
    padding: 20rpx 40rpx;
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
    border: none;
    border-radius: 50rpx;
    box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);

    .btn-icon {
      margin-right: 10rpx;
      font-size: 32rpx;
    }

    .btn-text {
      font-size: 28rpx;
      font-weight: bold;
      color: white;
    }
  }
}
</style>
