<template>
  <view class="flex-col justify-start relative page">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class="tn-custom-nav-bar__back" @click="goBack">
        <text class="icon tn-icon-left"></text>
        <text class="icon tn-icon-home-capsule-fill"></text>
      </view>
    </tn-nav-bar>
    <!-- 对话容器 -->
    <scroll-view class="chat-container" scroll-y="true" :scroll-into-view="scrollToViewId"
      :style="{ paddingTop: vuex_custom_bar_height + 20 + 'px' }">
      <!-- 消息列表 - 按顺序显示所有消息 -->
      <view v-for="(msg, index) in messageList" :key="index" class="message-item">

        <!-- 用户消息 -->
        <view v-if="msg.type === 'user'" class="user-message-container">
          <view class="user-message-content">
            <view class="user-message-bubble">
              <text class="user-message-text">{{ msg.content }}</text>
            </view>
          </view>
          <image class="user-avatar"
            src="https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png" />
        </view>

        <!-- AI消息 -->
        <view v-else-if="msg.type === 'ai'" class="ai-message-container">
          <image class="ai-avatar"
            src="https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png" />
          <view class="ai-message-content">
            <view class="ai-message-bubble">
              <text class="ai-message-text">{{ msg.content }}</text>
              <!-- 操作按钮区域 -->
              <view class="action-buttons">
                <view class="action-item" @click="copyText(msg.content)">
                  <image class="action-icon"
                    src="https://tmf.bimhui.com/TimeFlow_Human_app/a76cddf3e49df3b5db52c1b72b5459b1.png" />
                  <text class="font_3">复制</text>
                </view>
                <view class="action-item">
                  <image class="action-icon"
                    src="https://tmf.bimhui.com/TimeFlow_Human_app/d24162dc9a11013f39843b6383713a8d.png" />
                  <text class="font_3 text_5">去创作</text>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>

      <!-- AI正在输入提示 -->
      <view class="ai-typing-indicator" v-if="isAiTyping">
        <image class="ai-avatar" src="https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png" />
        <view class="typing-content">
          <text class="typing-text">AI正在思考中</text>
          <view class="typing-dots">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>

      <!-- 滚动定位元素 -->
      <view id="scroll-bottom" class="scroll-anchor"></view>
    </scroll-view>
    <view class="flex-row equal-division">
      <view class="flex-row items-center equal-division-item_1">
        <image class="shrink-0 image_10"
          src="https://tmf.bimhui.com/TimeFlow_Human_app/74c84b0455827e99bc963913a3442ae8.png" />
        <text class="font text_6 ml-5">开启新对话</text>
      </view>
      <view class="flex-row items-center equal-division-item ml-22">
        <image class="shrink-0 image_10"
          src="https://tmf.bimhui.com/TimeFlow_Human_app/54fced3b0dfdf97e41d28a22e80bda01.png" />
        <text class="font text_7 ml-5">历史记录</text>
      </view>
      <view class="flex-row equal-division-item_2 ml-22">
        <text class="font">使用次数剩</text>
        <text class="font text_8 ml-4">4次</text>
      </view>
    </view>
    <view class="flex-row justify-between items-center section_4 pos_18">
      <image class="image_12" src="https://tmf.bimhui.com/TimeFlow_Human_app/9ca79863e79a4ce31476ff029a0a5b68.png"
        @click="changeInputType" />
      <text class="text_9" v-if="inputType === 'voice'">按住说话</text>
      <input class="input_13" v-else type="text" placeholder="请输入您的问题..." v-model="inputMessage" />
      <image class="image_11" src="https://tmf.bimhui.com/TimeFlow_Human_app/04e19c9283df0c50973ff6e885bc421f.png"
        @click="sendMessage" />
    </view>
    <view class="section_5 pos_19"></view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js';
export default {
  mixins: [template_page_mixin],
  components: {},
  props: {},
  data() {
    return {
      inputType: 'text',
      count: 4,
      inputMessage: '', // 用户输入的消息
      isAiTyping: false, // AI是否正在输入
      scrollToViewId: '', // 滚动定位ID
      messageList: [
        {
          type: 'user',
          content: '如何提取视频内容',
          image: 'https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png'
        },
        {
          type: 'ai',
          content: '当然可以。提取短视频内容是一个广泛的需求，可能指下载保存、分析内容（如文案、音乐、数据）或进行二次创作。我将从这几个方面为您提供详细的方法和注意事项。核心概念：提取 ≠ 盗用.首先必须明确，提取内容用于个人学习、欣赏或合理引用是常见的，但未经授权直接盗用他人视频并声称原创是侵权行为，请务必遵守平台规则和版权法律。',
          image: 'https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png'
        },
        {
          type: 'user',
          content: '提取文案',
          image: 'https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png'
        }
      ]
    };
  },

  methods: {
    /**
     * 切换输入类型
     */
    changeInputType() {
      this.inputType = this.inputType === 'text' ? 'voice' : 'text';
    },
    /**
     * 复制文本
     * @param {string} text - 要复制的文本
     */
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000
          });
        }
      });
    },
    /**
     * 发送用户消息
     */
    sendMessage() {
      // 检查输入是否为空
      if (!this.inputMessage.trim()) {
        return;
      }

      // 添加用户消息到消息列表
      const userMessage = {
        type: 'user',
        content: this.inputMessage.trim(),
        image: 'https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png'
      };

      this.messageList.push(userMessage);

      // 清空输入框
      const messageToProcess = this.inputMessage.trim();
      this.inputMessage = '';

      // 滚动到底部
      this.scrollToBottom();

      // 触发AI回复
      this.generateAiResponse(messageToProcess);
    },

    /**
     * 生成AI回复
     * @param {string} userMessage - 用户输入的消息
     */
    generateAiResponse(userMessage) {
      // 设置AI正在输入状态
      this.isAiTyping = true;

      // 模拟AI思考时间
      setTimeout(() => {
        const aiResponse = this.getAiResponse(userMessage);

        // 添加AI回复到消息列表
        const aiMessage = {
          type: 'ai',
          content: aiResponse,
          image: 'https://tmf.bimhui.com/TimeFlow_Human_app/a07479c17fa5e2042bf9439d5cae65b5.png'
        };

        this.messageList.push(aiMessage);
        this.isAiTyping = false;

        // 滚动到底部
        this.scrollToBottom();
      }, 1000 + Math.random() * 2000); // 1-3秒随机延迟
    },

    /**
     * 根据用户输入生成AI回复内容
     * @param {string} userMessage - 用户输入的消息
     * @returns {string} AI回复内容
     */
    getAiResponse(userMessage) {
      // 简单的关键词匹配回复逻辑
      const responses = {
        '视频': '关于视频处理，我可以帮您分析视频内容、提取关键信息、生成文案等。您具体需要什么帮助呢？',
        '文案': '我可以帮您创作各种类型的文案，包括短视频文案、营销文案、产品描述等。请告诉我您的具体需求。',
        '抖音': '抖音内容创作需要注意热点话题、用户喜好和平台算法。我可以帮您分析热门内容趋势和创作技巧。',
        '提取': '内容提取可以包括文字、音频、视频等多个维度。请具体说明您想要提取什么类型的内容？',
        '你好': '您好！我是您的AI助手，专门帮助您进行内容创作和分析。有什么可以为您服务的吗？',
        '帮助': '我可以帮您：\n1. 分析视频内容\n2. 生成创意文案\n3. 提供创作建议\n4. 解答相关问题\n\n请告诉我您的具体需求！'
      };

      // 检查是否包含关键词
      for (let keyword in responses) {
        if (userMessage.includes(keyword)) {
          return responses[keyword];
        }
      }

      // 默认回复
      return `我理解您提到了"${userMessage}"。作为您的AI助手，我会尽力为您提供帮助。请您详细描述一下您的需求，这样我就能给出更准确的建议和解决方案。`;
    },

    /**
     * 滚动到聊天底部
     */
    scrollToBottom() {
      this.$nextTick(() => {
        // 使用scroll-into-view滚动到底部
        this.scrollToViewId = '';
        this.$nextTick(() => {
          this.scrollToViewId = 'scroll-bottom';
        });
      });
    }
  },
};
</script>

<style scoped lang="scss">
@import '@/static/css/templatePage/custom_nav_bar.scss';

.ml-5 {
  margin-left: 10rpx;
}

.page {
  background-color: #ffffff;
  background-image: linear-gradient(167.6deg, #181629 13.9%, #272144 58.2%);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  padding-bottom: 240rpx;
  /* 为底部固定区域预留空间 */

  .section {
    background-image: linear-gradient(167.6deg, #181629 13.9%, #272144 58.2%);
    width: 750rpx;
    height: 1624rpx;
  }

  // 对话容器样式
  .chat-container {
    padding: 32rpx;
    height: 100%;
  }

  // 消息项容器
  .message-item {
    margin-bottom: 32rpx;
  }

  // 用户消息容器 - 右对齐
  .user-message-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;

    .user-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-left: 16rpx;
      flex-shrink: 0;
    }

    .user-message-content {
      display: flex;
      justify-content: flex-end;
      max-width: 70%;

      .user-message-bubble {
        padding: 20rpx 30rpx;
        background-color: #6c5ce7;
        border-radius: 30rpx 8rpx 30rpx 30rpx;
        border: solid 2rpx #9a92e9;
        max-width: 100%;

        .user-message-text {
          color: #ffffff;
          font-size: 28rpx;
          font-weight: 500;
          line-height: 40rpx;
          word-wrap: break-word;
        }
      }
    }
  }

  // AI消息容器 - 左对齐
  .ai-message-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;

    .ai-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      flex-shrink: 0;
    }

    .ai-message-content {
      display: flex;
      justify-content: flex-start;
      max-width: 70%;

      .ai-message-bubble {
        padding: 20rpx 30rpx;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8rpx 30rpx 30rpx 30rpx;
        border: solid 1rpx rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10rpx);
        max-width: 100%;

        .ai-message-text {
          color: #ffffff;
          font-size: 28rpx;
          font-weight: 400;
          line-height: 40rpx;
          word-wrap: break-word;
          margin-bottom: 16rpx;
        }

        // 操作按钮区域
        .action-buttons {
          display: flex;
          flex-direction: row;
          gap: 16rpx;
          margin-top: 16rpx;

          .action-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 8rpx 16rpx;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 20rpx;
            border: solid 1rpx rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;

            &:hover {
              background-color: rgba(255, 255, 255, 0.2);
            }

            .action-icon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 8rpx;
            }
          }
        }
      }
    }
  }

  /* 滚动锚点样式 */
  .scroll-anchor {
    height: 1rpx;
    width: 100%;
  }

  .font_2 {
    font-size: 24rpx;
    font-family: PingFang SC;
    line-height: 28rpx;
    font-weight: 700;
    color: #ffffff;
  }

  .font_3 {
    font-size: 20rpx;
    font-family: PingFang SC;
    line-height: 18.46rpx;
    color: #61ddfd;
  }

  .text_5 {
    line-height: 18.48rpx;
  }

  .equal-division {
    position: fixed;
    left: 30rpx;
    right: 32rpx;
    bottom: 180rpx;
    z-index: 999;

    .equal-division-item_1 {
      padding: 13rpx 20.6rpx 13rpx 24rpx;
      background-color: #2d2756;
      border-radius: 1000rpx;
      height: 58rpx;

      .text_6 {
        line-height: 22.4rpx;
      }
    }

    .equal-division-item {
      padding: 13rpx 21.08rpx 13rpx 24rpx;
      background-color: #2d2756;
      border-radius: 1000rpx;
      height: 58rpx;

      .text_7 {
        line-height: 21.98rpx;
      }
    }

    .image_10 {
      width: 32rpx;
      height: 32rpx;
    }

    .equal-division-item_2 {
      padding: 18.2rpx 10.72rpx 13.44rpx 24.74rpx;
      background-image: linear-gradient(90deg, #8ffe67 -8.8%, #2d2756 49.6%, #4cd9fd 108.1%);
      border-radius: 1000rpx;
      height: 58rpx;
      border: solid 2rpx #ffffff33;

      .text_8 {
        line-height: 22.36rpx;
      }
    }
  }

  .font {
    font-size: 24rpx;
    font-family: PingFang SC;
    line-height: 22.28rpx;
    color: #ffffff;
  }

  .section_4 {
    padding: 32rpx 24rpx 24rpx 34rpx;
    background-color: #261e53;
    border-radius: 1000rpx;
    border: solid 4rpx #493eb0;

    .image_12 {
      border-radius: 2rpx 2rpx 6rpx 6rpx;
      width: 44rpx;
      height: 36rpx;
    }

    .text_9 {
      color: #ffffff;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 800;
      line-height: 26.44rpx;
      opacity: 0.6;
    }

    .input_13 {
      margin-left: 20rpx;
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: #ffffff;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 26.44rpx;

      &::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
      }
    }

    .image_11 {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .pos_18 {
    position: fixed;
    left: 30rpx;
    right: 32rpx;
    bottom: 40rpx;
    z-index: 999;
  }

  .section_5 {
    background-color: #231f3d;
    width: 750rpx;
    height: 68rpx;
  }

  .pos_19 {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
  }

  /* 聊天输入框样式 */
  .chat-input-container {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    bottom: 120rpx;
    z-index: 1000;
    background-color: rgba(35, 31, 61, 0.95);
    border-radius: 25rpx;
    padding: 20rpx;
    backdrop-filter: blur(10rpx);
    border: 1rpx solid rgba(255, 255, 255, 0.1);

    .input-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 20rpx;

      .chat-input {
        flex: 1;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1rpx solid rgba(255, 255, 255, 0.2);
        border-radius: 20rpx;
        padding: 20rpx 30rpx;
        color: #ffffff;
        font-size: 28rpx;
        line-height: 40rpx;

        &::placeholder {
          color: rgba(255, 255, 255, 0.6);
        }
      }

      .send-button {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 20rpx;
        padding: 20rpx 30rpx;
        transition: all 0.3s ease;

        &.active {
          background-color: #6c5ce7;
        }

        .send-text {
          color: #ffffff;
          font-size: 28rpx;
          font-weight: 600;
        }
      }
    }
  }

  /* AI正在输入提示样式 */
  .ai-typing-indicator {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 30rpx 0;
    padding: 0 30rpx;

    .ai-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .typing-content {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 20rpx;
      padding: 20rpx 30rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      display: flex;
      flex-direction: column;
      gap: 10rpx;

      .typing-text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 24rpx;
      }

      .typing-dots {
        display: flex;
        flex-direction: row;
        gap: 8rpx;

        .dot {
          width: 8rpx;
          height: 8rpx;
          background-color: #6c5ce7;
          border-radius: 50%;
          animation: typing 1.4s infinite ease-in-out;

          &:nth-child(1) {
            animation-delay: -0.32s;
          }

          &:nth-child(2) {
            animation-delay: -0.16s;
          }
        }
      }
    }
  }

  @keyframes typing {

    0%,
    80%,
    100% {
      transform: scale(0);
      opacity: 0.5;
    }

    40% {
      transform: scale(1);
      opacity: 1;
    }
  }
}
</style>