<template>
  <div class="page-view" :style="{ 'background-image': `url(${ agentInfo.background ? backgroundImg : '' } )` }">
    <t-agent-talk
      ref="TAgentTalkRef"
      :prologue="agentInfo.prologue"
      :agentInfo="agentInfo"
      :agentImg="agentInfo.icon"
      :minRows="1"
      :mode="1"
      :isOpenClear="false"
      :isOpenBack="false"
      :chatStatus="chatStatus"
      :isOpenToolAndBg="true"
      :isOpenWheelScroll="true"
      :isOpenApi="true"
      :isOpenTTS="isOpenTTS"
      :isOpenCopyText="isOpenCopyText"
      :isOpenZanCai="isOpenZanCai"
      :isShowAgentInfo="isShowAgentInfo"
      :isOpenUploadFile="isOpenUploadFile"
      :readOnly="readOnly"
      @session-agent-data="startQuestion"
      @clearContent="clearContent"
    >
    <template #tts="slotProps" v-if="isOpenTTS">
      <TTSRecord ref="TTSRecordRef" @updateText="ttsUpdateText" :text="slotProps.data.msg" :maxLen="slotProps.data.maxLen" :disabled="slotProps.data.loading" />
    </template>
  </t-agent-talk>
  </div>
</template>

<script setup name="TAgentChat">
import { reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, inject } from 'vue'
import { getDialogInfo, getAgentDetailApi } from '@packages/api/common'
import { format, downloadFile, downloadFileOpenApi } from "@packages/utils/index";
import TTSRecord from "@packages/components/tts/TTsRecord.vue";
let proxy = getCurrentInstance()

let props = defineProps({
  isOpenTTS: { // 是否开启语音合成和转写
    type: Boolean,
    default: true
  },
  isOpenCopyText: { // 是否开启文本复制
    type: Boolean,
    default: true
  },
  isOpenZanCai: { // 是否开启点赞点踩
    type: Boolean,
    default: true
  },
  isOpenUploadFile: { // 是否开启上传文件
    type: Boolean,
    default: true
  },
  readOnly: { // 是否只读
    type: Boolean,
    default: false
  },
  isShowAgentInfo: { // 是否需要显示头部的智能体信息
    type: Boolean,
    default: true
  }
})

let state = reactive({
  agentInfo: {},
  chatStatus: -1,
  backgroundImg: ''
})

onMounted(() => {
  initPageView()
  window.addEventListener('resize', initPageView)
  getParentAuthInfo()
})

const getAuthInfo = inject('getAuthInfo')

const getBackGroundImg = async() => {
  let res = await getAuthInfo('downloadFileEndpoint', state.agentInfo.background)
  let { date, host, authorization, baseUrl } = res
  let authStr = `date=${date}&host=${host}&authorization=${authorization}`
  state.backgroundImg = downloadFileOpenApi(state.agentInfo.background, authStr, baseUrl)
}

const getParentAuthInfo = async() => {
  let res = await getAuthInfo('assistantCodeEndpoint')
  getAgentDetail(res)
}

let initPageView = () => {
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );
  let pageView = document.querySelector('.page-view')
  pageView.style.padding = isMobile ? '10px' : '40px'
}

onUnmounted(() => {
  window.removeEventListener('resize', initPageView)
})

const ttsUpdateText = (msg) => {
  proxy.$refs.TAgentTalkRef?.updateChatMsg(msg);
};

const startQuestion = (res) => {
  state.chatStatus = 1
};

const clearContent = () => {
  state.chatStatus = 0
}

const getAgentDetail = (paramsInfo) => {
  let { assistantCode, authorization, host, date, baseUrl } = paramsInfo
  let paramsStr = `${assistantCode}?authorization=${authorization}&host=${host}&date=${date}`
  // let paramsStr = 'dialog@1899076695117012992?authorization=aG1hYyBhcGlfa2V5PSI3NkVDMjI0NjdENzc0RUFCQkM2MSIsIGFsZ29yaXRobT0iaG1hYy1zaGEyNTYiLCBoZWFkZXJzPSJob3N0IGRhdGUgcmVxdWVzdC1saW5lIiwgc2lnbmF0dXJlPSJTZGEvM0g5ZEdJWThxdUtzVUFoWEd0TzQ4ZkoxWENRV3liaEtCYk45b1drPSI%3D&host=172.31.108.26&date=Wed%2C+14+May+2025+08%3A32%3A41+GMT'
  getDialogInfo(paramsStr, baseUrl).then(res => {
    state.agentInfo = {
      ...res,
      lastModifiedDate: format(res.lastModifiedDate, "yyyy-MM-dd hh:mm"),
      exampleList: res.leadingQuestionInfo?.map(
        (e) => e.context
      ),
      // 判空
      sceneInfo: res.sceneInfo
        ? res.sceneInfo.map((e) => ({
            ...e,
            inputArgs: e.inputArgs || [],
          }))
        : [],
      toolInfo: res.toolInfo || []
    };
    state.chatStatus = 0
    getBackGroundImg()
  })
}

const getAgentDetailTest = () => {
  getAgentDetailApi(1818).then(res => {
    state.agentInfo = {
      ...res,
      lastModifiedDate: format(res.lastModifiedDate, "yyyy-MM-dd hh:mm"),
      exampleList: res.leadingQuestionInfo?.map(
        (e) => e.context
      ),
      // 判空
      sceneInfo: res.sceneInfo
        ? res.sceneInfo.map((e) => ({
            ...e,
            inputArgs: e.inputArgs || [],
          }))
        : [],
      toolInfo: res.toolInfo || [],
    };
    state.chatStatus = 0
  })
}

let { agentInfo, chatStatus, backgroundImg } = toRefs(state)
// 对话组件
</script>

<style lang="scss" scoped>
.page-view{
  width: 100%;
  height: 100%;
  // padding: 40px;
  background-image: url(../../../assets/images/system_bg.png);
  background-size: 100% 100%;
}

</style>

<style lang="scss">
@import '../../../assets/css/reset.css';
.flexBox {
  display: flex;
  align-items: center;
}
.page-view .el-textarea__inner{
  background-color: #F6F9FD !important;
}
</style>