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

const userMessage = ref('')
const messages = ref([
  { sender: 'ai', text: '欢迎！请问有什么可以帮助您的吗？' },
])

function sendMessage() {
  if (userMessage.value.trim() === '')
    return

  messages.value.push({ sender: 'user', text: userMessage.value })

  // AI 统一回复（中文套话）
  setTimeout(() => {
    messages.value.push({
      sender: 'ai',
      text: '感谢您的提问！我们会尽力为您提供帮助。',
    })
  }, 1000)

  userMessage.value = ''
}
const safeAreaTop = ref(44)
onShow(() => {
  uni.getSystemInfo({
    success: (res) => {
      if (res.safeArea && res.safeArea.top) {
        safeAreaTop.value = res.safeArea.top // 设置安全区顶部距离
      }
    },
  })
})
</script>

<template>
  <view class="box-border min-h-screen from-blue-100 to-white bg-gradient-to-b" style="paddingTop:44px">
    <view class="chat-page mx-4 flex flex-col rounded-xl shadow-lg">
      <view class="chat-window flex-1 overflow-auto border p-4">
        <view v-for="(message, index) in messages" :key="index" class="mb-2">
          <view
            v-if="message.sender === 'ai'"
            class="inline-block max-w-max rounded-xl bg-white p-2 text-left text-green-600 font-medium shadow-md"
          >
            {{ message.text }}
          </view>
          <view
            v-else
            class="ml-auto inline-block max-w-max rounded-xl from-sky-300 via-sky-300 to-sky-300 bg-gradient-to-r p-2 text-right text-white font-medium shadow-md"
          >
            {{ message.text }}
          </view>
        </view>
      </view>
      <view class="input-area mx-2 flex items-center gap-2 p-4">
        <wd-input v-model="userMessage" placeholder="请输入您的问题..." class="flex-1" size="large" />
        <wd-button custom-class="shadow" type="primary" @click="sendMessage">
          发送
        </wd-button>
      </view>
    </view>
  </view>
  <view class="disclaimer">
    <a href="https://beian.miit.gov.cn">
      备案号：琼ICP备2024038584号-2
    </a>
    <div>
      海南省学宇思网络科技有限公司版权所有
    </div>
  </view>
</template>

<style lang="scss" scoped>
.chat-page {
  // #ifdef H5
  height: calc(100vh - 144px);
  // #endif

  // #ifdef APP-PLUS || MP-WEIXIN
  height: calc(100vh - 188px);
  // #endif

}
</style>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>
