<template>
  <AppNoMenu>
    <div class="chat-box">
      <!--智能体-错误 提示-->
      <lz-page-empty v-if="pageError" :type="'3'" class="err-box">
        <lz-svg-icon icon-class="empty3" style="font-size: 312px;" />
      </lz-page-empty>
      <div v-else class="flex-row" v-loading="chat.info.pageLoading" >
        <!--左侧-->
        <Left  @list-click="handeleListClick" @tab-click="handeleTabClick" />

        <!--右侧-->
        <Right  ref="refRight"/>
      </div>
    </div>
  </AppNoMenu>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import AppNoMenu from '../../layout/AppNoMenu.vue'
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import { useRoute } from 'vue-router'
import useStore from '@/stores'
import { getDetail16 } from '@/servers/finyx/api/zhinengti';

const { chat } = useStore()

// 获取当前路由信息
const route = useRoute()

const pageErrorType = ref('3')
const pageError = ref(false)
const refRight = ref()

// 获取路由 chatid
const getChatId = () => {
  const { chatid } = route.params
  chat.addInfo({ historyId: '', agentId: chatid as string })
  // 获取智能体详情
  getAgentInfo(chatid)
  // 获取对话历史
  chat.getHistoryList(chatid)
}

// 获取智能体详情
const getAgentInfo = (id: any) => {
  chat.info.pageLoading = true
  getDetail16({ id })
    .then((res: any) => {
      chat.addAgentInfo(res)
      // 状态为禁用
      if(!res.state) {
        pageError.value = true;
        pageErrorType.value = '3';
      }
    })
    .catch(() => {
      pageError.value = true;
      pageErrorType.value = '4';
    })
    .finally(() => {
      chat.info.pageLoading = false
    })
}

const handeleListClick = () => {
  refRight.value.handelAbort()
}

const handeleTabClick = () => { 
  refRight.value.handelAbort()
}

watch(() => route.params.chatid, (value) => {
  console.log('[ watch ] change id:', value)
  getChatId()
})

onMounted(() => {
  getChatId()
})

</script>


<style lang="scss" scoped>
.chat-box {
  padding: 0 20px;

  .flex-row {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 100px);
  }

  .err-box{
    background:none;
  }
}
</style>