<template>
   <lz-page-empty v-if="pageError" :type="'3'">
    <lz-svg-icon icon-class="empty3" style="font-size: 312px;" />
  </lz-page-empty>
  <div class="setting" v-else>
    <!--顶部-->
    <div class="flex-between">
      <div class="flex-center">
        <el-icon @click="router.go(-1)" class="mr-6 cursor">
          <ArrowLeftBold />
        </el-icon>
        智能问答
      </div>
      <div>
        <el-button type="primary" @click="handleSave"  :disabled="pageLoading">保存</el-button>
        <el-button type="primary" @click="handlePublish" class="ml-20" :disabled="pageLoading">发布</el-button>
      </div>
    </div>
    <!--内容区域-->
    <div class="setting_content flex-between" v-loading="pageLoading" >
      <div class="setting_content_left">
        <el-scrollbar>
          <SettingForm ref="settingFormRef" />
        </el-scrollbar>
      </div>
      <div class="setting_content_right">
        <DebugChat :id="params.id"></DebugChat>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import router from '@/router'
import DebugChat from './components/DebugChat.vue';
import SettingForm from './components/SettingForm.vue';
import { getDetail16, update14, publish } from '@/servers/finyx/api/zhinengti';
import { useRoute } from 'vue-router'
import useStore from '@/stores'
import { MsgError, MsgSuccess } from '@/utils/message';

const { answerSetting } = useStore()
const { params } = useRoute()
const pageLoading = ref(false)
const pageError = ref(false)
const settingFormRef = ref<any>(null)

/** 保存 */
const handleSave = () => {
  const res = settingFormRef.value?.getParams()
  pageLoading.value = true
  update14({...res, random: `${res.random}`})
    .then((res: any) => {
      console.log(res)
      MsgSuccess('保存成功')
    })
    .catch((err: any) => {
      console.log(err)
      MsgError(err)
    })
    .finally(() => {
      pageLoading.value = false
    })
  }

/** 发布 */
const handlePublish =() => {
  const res = settingFormRef.value?.getParams()
  pageLoading.value = true
  publish({ id: res.id })
     .then((res: any) => {
      console.log(res)
      MsgSuccess('发布成功')
    })
    .catch((err: any) => {
      console.log(err)
      MsgError(err)
    })
    .finally(() => {
      pageLoading.value = false
    })
}

/** 获取详情 */
const handelDetail = (id: any) => {
  pageLoading.value = true
  getDetail16({ id })
    .then((res: any) => {
      answerSetting.addAnswers(res)
      if(res.questions && !res.questions.length) {
        settingFormRef.value.handleInsertQuestionGuide()
      }
    })
    .catch((err: any) => {
      console.log(err)
      pageError.value = true
    })
    .finally(() => {
      pageLoading.value = false
    })
}

onMounted(() => {
  const { id }: any = params
  handelDetail(id)
})

</script>

<style lang="scss" scoped>
.setting {
	&_content{
		margin-top: 18px;
		&_left,
		&_right {
			width: 50%;
			height: calc(100vh - 175px);
			border: 1px solid rgba(0,0,0,0.08);
		}
		&_left {
			margin-right: 10px;

		}
		&_right {
			margin-left: 10px;
			background: #F4F8FF;

		}
	}
}

</style>