<script setup>
import { ref, computed, nextTick } from 'vue'
import XConversation from '@vue2-client/base-client/components/common/XConversation/XConversation.vue'
import { getConfigByNameAsync } from '@vue2-client/services/api/common'

const xConversationRef = ref(null)

const isModalVisible = ref(false)

const aiModel = ref('')

const aiModelOptions = ref([])

const props = defineProps({
  chatId: {
    type: String,
    required: false,
    default: undefined
  },
  prompt: {
    type: String,
    required: false,
    default: undefined
  }
})

const showModal = () => {
  isModalVisible.value = true
  getConfigByNameAsync('ai_config').then(res => {
    const options = res.modelProviders.flatMap(provider =>
      provider.models.map(model => ({
        label: model,
        value: model
      }))
    )
    aiModelOptions.value = options
    aiModel.value = options[0].value
    nextTick(() => {
      xConversationRef.value.init({
        type: 'AI',
        streamApi: '/ai/chat',
        chatId: props.chatId,
        aiModel: aiModel.value,
        serviceName: process.env.VUE_APP_SERVICE_NAME
      })
    })
  })
}

const aiModelChange = (value) => {
  xConversationRef.value.init({
    type: 'AI',
    streamApi: '/ai/chat',
    chatId: props.chatId,
    aiModel: value,
    serviceName: process.env.VUE_APP_SERVICE_NAME
  })
}

const handleOk = () => {
  isModalVisible.value = false
}

const state = ref({
  styleTop: 80,
  styleLeft: 460,
})

const dialogStyle = computed(() => {
  return { left: state.value.styleLeft + 'px', top: state.value.styleTop + 'px', resize: 'both' }
})

// 计算是否超出屏幕;超出后
const inWindow = (left, top, startPosX, startPosY) => {
  const H = document.body.clientHeight
  const W = document.body.clientWidth
  if ((left < 20 && startPosX > left) || (left > W - 20 && startPosX < left) ||
    (top < 20 && startPosY > top) || ((top > H - 20 && startPosY < top))) {
    document.body.onmousemove = null
    document.body.onmouseup = null
    return false
  }
  return true
}

const onMouseDown = (e) => {
  e.preventDefault()
  const startPosX = e.clientX
  const startPosY = e.clientY
  const { styleLeft, styleTop } = state.value
  document.body.onmousemove = e => {
    const left = e.clientX - startPosX + styleLeft
    const top = e.clientY - startPosY + styleTop
    if (inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
      state.value.styleLeft = left
      state.value.styleTop = top
    }
  }
  // 鼠标放开时去掉移动事件
  document.body.onmouseup = function () {
    document.body.onmousemove = null
  }
}

</script>

<template>
  <div>
    <a-button icon="rocket" @click="showModal">问问AI</a-button>
    <a-modal
      :z-index="1020"
      :style="{ pointerEvents: 'none'}"
      v-model="isModalVisible"
      :footer="null"
      :mask="false"
      :maskClosable="false"
      :dialogStyle="dialogStyle"
      @ok="handleOk"
    >
      <template #title>
        <div :style="{width:'100%',cursor:'move'}" @mousedown="onMouseDown">
          AI对话
          <a-select style="width: 120px" v-model="aiModel" placeholder="选择模型" @change="aiModelChange">
            <a-select-option :value="model.value" v-for="model in aiModelOptions" :key="model.value">
              {{ model.label }}
            </a-select-option>
          </a-select>
        </div>
      </template>
      <XConversation ref="xConversationRef" :prompt="prompt"/>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
</style>
