<template>
  <div class="chat-container" ref="chatBxo">
    <div
      class="chat-list"
      ref="scrollContainer"
      :style="{
        height: chatRoom + 'px'
      }"
    >
    <div
        :class="['chat-item',  'ai-message']"
      >
        <!-- 头像 -->
        <img :src="aiIcon" class="user-icon" alt="" />
        <!-- 内容 -->
        <div class="message-content">
          <div class="message-time">当前数据</div>
          <div class="message-text">
            <span>{{ toString(source)}}</span>
          </div>
        </div>
      </div>
    
     
      <div
        v-for="(item, index) in messagesList"
        :key="index"
        :class="['chat-item', item.from == 'user' ? 'user-message' : 'ai-message']"
      >
        <!-- 头像 -->
        <img :src="item.from == 'user' ? userIcon : aiIcon" class="user-icon" alt="" />
        <!-- 内容 -->
        <div class="message-content">
          <div class="message-time">{{ item.time }}</div>
          <div class="message-text">
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="chat-input" ref="chatInput">
      <n-input
        round
        v-model:value="keyWord"
        type="textarea"
        placeholder="请输入需要统计的数据"
        :autosize="{ minRows: 5 }"
      >
        <template #suffix>
          <div class="chat-suffix">
            <span></span>
            <n-button :loading="loading" size="small" :class="['chat-send']" :bordered="false" @click="handleSend">
            </n-button>
          </div>
        </template>
      </n-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toString, isArray } from '@/utils'

import { ChartFrameEnum } from '@/packages/index.d'
import { useMessage } from 'naive-ui'
import { ref, reactive, watch, nextTick, onMounted ,computed} from 'vue'
import { DataResultEnum, TimelineTitleEnum } from '../..'
import { useTargetData } from '../../../hooks/useTargetData.hook'
import moment from 'moment'
// @ts-ignore
import { getAiMsg } from '@/api/ai.js'

import userIcon from '@/assets/images/ai/user-icon.png'
import aiIcon from '@/assets/images/ai/ai-icon.png'

//数据定义区
const { targetData, chartEditStore } = useTargetData()
const source = ref()



let keyWord = ref('')
let loading = ref(false)
const messageDialog = useMessage()
let messagesList :any[]   = reactive([])
const scrollContainer = ref<HTMLDivElement | null>(null)
const chatBxo =ref<HTMLDivElement | null>(null)
const chatInput = ref<HTMLDivElement | null>(null)
let chatRoom = ref(0)
const noData = ref(false)
const dimensions = ref()
const dimensionsAndSource = ref()
// 映射列表, 注意内部的mapping是响应式的，上方需要修改
const fieldList = ref<
  Array<{
    field: string
    mapping: string[]
    result: DataResultEnum
  }>
>([])

// 处理映射列表状态结果
const matchingHandle = (mapping: string) => {
  let res = DataResultEnum.SUCCESS
  for (let i = 0; i < source.value.length; i++) {
    if (source.value[i][mapping] === undefined) {
      res = DataResultEnum.FAILURE
      return res
    }
  }
  return DataResultEnum.SUCCESS
}

//方法区
const handleSend = async () => {
  if (!keyWord.value.trim()) {
    messageDialog.warning('请输入需要统计的数据！')
    return
  }
  /**
   *保存用户提问信息
   */
  const messagesItem = {
    from: 'user',
    text: keyWord.value,
    time: moment().format('YYYY/MM/DD HH:mm:ss')
  }
  messagesList.push(messagesItem)

 
 
  loading.value = true
  try {
    const res = await getAiMsg({ prompt: keyWord.value })
    targetData.value.lastMessagesItem = messagesItem//保存最后一次问答
    let result:any = {}
    if (res.chartType) {
      result.dimensions = ['product', 'data1']
      result.source = []
      res.xData.map((item:any, index:any) => {
        result.source.push({
          product: item,
          data1: parseInt(res.yData[index])
        })
      })
      targetData.value.option.dataset = result
      // targetData.value.option.messages = messagesItem
    } else {
      result = res
    }
    // //保存AI回答
    // messagesList.push({
    //   from: 'ai',
    //   text: result,
    //   time: moment().format('YYYY/MM/DD HH:mm:ss')
    // })

    keyWord.value = '' //清除搜索值
    loading.value = false
  } catch (error) {
    //报错纯文本信息
    messagesList.push({
      from: 'ai',
      text: '服务器繁忙，请稍后再试。',
      time: moment().format('YYYY/MM/DD HH:mm:ss')
    })
    keyWord.value = '' //清除搜索值
    loading.value = false
  }
}
// 处理映射列表
const dimensionsAndSourceHandle = () => {
  try {
    // 去除首项数据轴标识
    return dimensions.value.map((dimensionsItem: string, index: number) => {
      return index === 0
        ? {
            // 字段
            field: '通用标识',
            // 映射
            mapping: dimensionsItem,
            // 结果
            result: DataResultEnum.NULL
          }
        : {
            field: `数据项-${index}`,
            mapping: dimensionsItem,
            result: matchingHandle(dimensionsItem)
          }
    })
  } catch (error) {
    return []
  }
}
// 是支持 dataset 的图表类型
const isCharts = computed(() => {
  return targetData.value.chartConfig.chartFrame === ChartFrameEnum.ECHARTS
})
// 处理 vchart 映射列表
const initFieldListHandle = () => {
  if (targetData.value?.option) {
    fieldList.value = []
    // 所有名称，找到其中中 Field 结尾 的 key 和值
    for (const key in targetData.value.option) {
      if (key.endsWith('Field')) {
        const value = targetData.value.option[key]
        targetData.value.option[key] = value
        const item = {
          field: key,
          mapping: value,
          result: DataResultEnum.SUCCESS
        }
        if (item.mapping === undefined) {
          item.result = DataResultEnum.FAILURE
        }
        fieldList.value.push(item)
      }
    }
  }
}
//watch区
// 监听messages变化，自动滚动到底部
watch(
  messagesList,
  () => {
    nextTick(() => {
      if (scrollContainer.value) {
        scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
      }
    })
  },
  { deep: true }
)

//监听图表选中变化
watch(
  () => targetData.value.id,
  (
   newData
  ) => {
    if(newData){
      messagesList = []
    }

  },
 
)

//监听选中图表值
watch(
  () => targetData.value?.option?.dataset,
  (
    newData?: {
      source: any
      dimensions: any
    } | null
  ) => {
    if(targetData.value.lastMessagesItem && messagesList.length === 0){
      messagesList.push(targetData.value.lastMessagesItem)
    }
    noData.value = false
    if (newData && targetData?.value?.chartConfig?.chartFrame === ChartFrameEnum.ECHARTS) {
      // 只有 DataSet 数据才有对应的格式
      source.value = newData
      if (isCharts.value) {
        dimensions.value = newData.dimensions
        dimensionsAndSource.value = dimensionsAndSourceHandle()
      }
    } else if (newData && targetData?.value?.chartConfig?.chartFrame === ChartFrameEnum.VCHART) {
      source.value = newData
      initFieldListHandle()
    } else if (newData !== undefined && newData !== null) {
      dimensionsAndSource.value = null
      source.value = newData
      fieldList.value = []
    } else {
      noData.value = true
      source.value = '此组件无数据源'
    }
    if (isArray(newData)) {
      dimensionsAndSource.value = null
    }
  },
  {
    immediate: true
  }
)

onMounted(() => {
  if (chatBxo.value && chatInput.value) {
    // 使用 offsetHeight 获取元素高度
    chatRoom.value = chatBxo.value.offsetHeight - (chatInput.value.offsetHeight + 100)
  }
})
</script>

<style lang="scss" scoped>
.chat-container {
  // box-sizing: border-box;
  // padding: 20px;
  height: 100%;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .chat-item {
    display: flex;
    gap: 6px;
  }
  .user-icon {
    height: 35px;
    width: 35px;
  }

  .user-message {
    flex-direction: row-reverse;
    .message-content {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
  .ai-message {
    flex-direction: row;
    .message-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .message-content {
    font-size: 13px;
    font-weight: 400;
    .message-time {
      color: #c3cad9;
    }
    width: calc(100% - 70px);
    padding-top: 8px;
    .message-text {
      width: auto;
      color: #ffffff;
      font-size: 13px;
      margin-top: 10px;
      padding: 10px;
      background: #282a31;
      border-radius: 10px 10px 10px 10px;
    }
  }

  ::v-deep .n-input .n-input__suffix .n-base-loading {
    color: #283e81 !important;
  }
}
.chat-input {
  width: 100%;
}
.chat-suffix {
  font-size: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.chat-send {
  cursor: pointer;
  width: 46px;
  height: 30px;
  margin-bottom: 10px;
  background: url('@/assets/images/ai/chat-send.png');
  background-size: 100% 100%;
}
/* 设置滚动条整体样式 */
::-webkit-scrollbar {
  width: 0px;
}
</style>
