<template>
  <view :class="['chat-page', elderClass]">
    <!-- 消息列表 -->
    <scroll-view scroll-y class="chat-scroll" :scroll-top="scrollTop" :scroll-with-animation="true">
      <Loading v-if="loading" text="加载中..." />
      <template v-else>
        <view v-for="msg in messages" :key="msg.id" :class="['msg-bubble', msg.sender === 'user' ? 'right' : 'left']">
          <text class="msg-text">{{ msg.content }}</text>
          <text class="msg-time">{{ formatDate(msg.created_at, 'HH:mm') }}</text>
        </view>
      </template>
    </scroll-view>

    <!-- 输入框 -->
    <view class="input-bar">
      <input v-model="inputText" class="chat-input" placeholder="输入消息..." confirm-type="send" @confirm="send" />
      <view class="send-btn" @tap="send">
        <text class="send-text">发送</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { api } from '@/services/request'
import { formatDate } from '@/utils/date'
import Loading from '@/components/Loading.vue'
import { useElderClass } from '@/composables/useElderClass'

const { elderClass } = useElderClass()
const consultationId = ref('')
const loading = ref(false)
const messages = ref<any[]>([])
const inputText = ref('')
const scrollTop = ref(0)

async function fetchMessages() {
  loading.value = true
  try {
    messages.value = await api.get<any[]>(`/health/consultations/${consultationId.value}/messages`) || []
    scrollTop.value = 99999
  } catch { messages.value = [] }
  loading.value = false
}

async function send() {
  const text = inputText.value.trim()
  if (!text || !consultationId.value) return
  inputText.value = ''
  try {
    await api.post(`/health/consultations/${consultationId.value}/messages`, { content: text })
    await fetchMessages()
  } catch {
    uni.showToast({ title: '发送失败', icon: 'none' })
  }
}

onLoad((query: any) => {
  consultationId.value = query?.id || ''
  if (consultationId.value) fetchMessages()
})
</script>

<style lang="scss" scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: $bg;
}

.chat-scroll {
  flex: 1;
  padding: 20px 24px;
}

.msg-bubble {
  max-width: 75%;
  padding: 16px 20px;
  border-radius: $r;
  margin-bottom: 16px;

  &.left {
    background: $card;
    align-self: flex-start;
  }

  &.right {
    background: $pri;
    align-self: flex-end;
  }
}

.msg-text {
  display: block;
  font-size: var(--tk-font-body);

  .left & { color: $tx; }
  .right & { color: $white; }
}

.msg-time {
  display: block;
  font-size: var(--tk-font-micro);
  margin-top: 4px;

  .left & { color: $tx3; }
  .right & { color: rgba(255,255,255,0.7); }
}

.input-bar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: $card;
  border-top: 1px solid $bd-l;
  @include safe-bottom;
}

.chat-input {
  flex: 1;
  height: 72px;
  background: $bg;
  border-radius: $r-sm;
  padding: 0 16px;
  font-size: var(--tk-font-body);
}

.send-btn {
  margin-left: 12px;
  background: $pri;
  border-radius: $r-sm;
  padding: 16px 24px;
}

.send-text {
  color: $white;
  font-size: var(--tk-font-body-sm);
  font-weight: 600;
}
</style>
