<template>
  <div class="app-container search-table-box aidex-table">
    <el-card shadow="never" v-loading="loading" element-loading-text="拼命加载中" class="card_div">
      <!-- 头部 -->
      <div class="div-top">
        <div class="div-top-inner">
          <div class="bot-img">
            <el-image :src="form.icon_url" fit="cover"/>
          </div>
          <div class="bot-title">
            <div class="bot-name">
              <span>{{ form.name }}</span>
              <span><el-button type="text" size="default" icon="el-icon-edit-outline" circle @click="openUpdateNameModle"/></span>
            </div>
            <div class="bot-desc">
              <el-tooltip :content="form.description" placement="top">
                <span>{{ form.description }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="bot-pull">
          <span class="bot-pull-time">更新时间：{{ unixTimestampToReadable(form.update_time) }}</span>
        </div>
      </div>
      <div class="outer">
        <!-- 编排 -->
        <div class="div-left">
          <div class="left-top">
            <span>编排</span>
          </div>
          <div class="left-bottom">
            <!-- 人设与回复 -->
            <div class="left-bottom-left">
              <div class="input-name">
                <span>人设与回复逻辑</span>
                <span>
                    <el-badge is-dot :hidden="badgeIsShow">
                      <el-link type="primary" @click="savePromptInfo">保存</el-link>
                    </el-badge>
                </span>
              </div>
              <el-input type="textarea" v-model="form.prompt_info.prompt" placeholder="请输入内容" @change="updatePromptInfo"/>
            </div>

            <!-- 知识库、对话体验 -->
            <div class="left-bottom-right">
              <div class="left-bottom-right-div">
                <!--知识库-->
                <div class="left-bottom-right-div-zs">
                  <div class="input-name">
                    <span>知识库</span>
                    <span><el-button type="text" size="default" icon="el-icon-circle-plus-outline" circle @click="bindKnowledge"/></span>
                  </div>
                  <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item name="1">
                      <template slot="title">
                        <span style="margin-left: 10px">文本</span>
                      </template>
                      <!--知识库文件列表-->
                      <div class="knowledge-fils">
                        <div v-for="(item, index) in form.knowledge.knowledge_infos">
                          <el-card shadow="never" class="fils-el-card" v-if="item.formatType===0">
                            <div class="knowledge-fils-div">
                              <div class="knowledge-fils-img">
                                <el-image :src="item.iconURL" fit="cover"/>
                              </div>
                              <div class="knowledge-fils-name">
                                <div class="knowledge-fils-name-one">{{ item.name }}</div>
                                <div class="knowledge-fils-name-two">{{ item.description }}</div>
                              </div>
                              <div class="knowledge-fils-btn">
                                <el-button type="text" size="mini" icon="el-icon-delete" circle @click="delKnowladgeById(item.id,item.name)"></el-button>
                              </div>
                            </div>
                          </el-card>
                        </div>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                      <template slot="title">
                        <span style="margin-left: 10px">表格</span>
                      </template>
                      <!--知识库文件列表-->
                      <div class="knowledge-fils">
                        <div v-for="(item, index) in form.knowledge.knowledge_infos">
                          <el-card shadow="never" class="fils-el-card" v-if="item.formatType===1">
                            <div class="knowledge-fils-div">
                              <div class="knowledge-fils-img">
                                <el-image :src="item.iconURL" fit="cover"/>
                              </div>
                              <div class="knowledge-fils-name">
                                <div class="knowledge-fils-name-one">{{ item.name }}</div>
                                <div class="knowledge-fils-name-two">{{ item.description }}</div>
                              </div>
                              <div class="knowledge-fils-btn">
                                <el-button type="text" size="mini" icon="el-icon-delete" circle @click="delKnowladgeById(item.id,item.name)"></el-button>
                              </div>
                            </div>
                          </el-card>
                        </div>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                      <template slot="title">
                        <span style="margin-left: 10px">照片</span>
                      </template>
                      <!--知识库文件列表-->
                      <div class="knowledge-fils">
                        <div v-for="(item, index) in form.knowledge.knowledge_infos">
                          <el-card shadow="never" class="fils-el-card" v-if="item.formatType===2">
                            <div class="knowledge-fils-div">
                              <div class="knowledge-fils-img">
                                <el-image :src="item.iconURL" fit="cover"/>
                              </div>
                              <div class="knowledge-fils-name">
                                <div class="knowledge-fils-name-one">{{ item.name }}</div>
                                <div class="knowledge-fils-name-two">{{ item.description }}</div>
                              </div>
                              <div class="knowledge-fils-btn">
                                <el-button type="text" size="mini" icon="el-icon-delete" circle @click="delKnowladgeById(item.id,item.name)"></el-button>
                              </div>
                            </div>
                          </el-card>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <!--对话体验-->
                <div class="left-bottom-right-div-zs">
                  <div class="input-name">
                    <span>对话体验</span>
                    <span>
                      <el-badge is-dot :hidden="chatBadgeIsShow">
                        <el-link type="primary" @click="handleSubmit">保存</el-link>
                      </el-badge>
                    </span>
                  </div>
                  <el-collapse v-model="dialogueExperience" @change="handleChange">
                    <el-collapse-item name="1">
                      <template slot="title">
                        <span style="margin-left: 10px">开场白文案</span>
                      </template>
                      <!--知识库文件列表-->
                      <div class="knowledge-fils">
                        <mavon-editor
                          v-model="form.onboarding_info.prologue"
                          ref="mdEditor"
                          style="min-height: 200px"
                          :subfield="false"
                          :toolbars="toolbarsConfig"
                          @change="prologueChange"
                        />
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                      <template slot="title">
                        <span style="margin-left: 10px">开场白预置问题</span>
                      </template>
                      <!--预设问题列表-->
                      <div class="knowledge-fils">
                        <!-- 拖拽容器 -->
                        <draggable v-model="items" handle=".drag-handle" animation="200" class="drag-container" @end="prologueChange">
                          <transition-group name="flip-list">
                            <div v-for="(item, index) in items" :key="item.id" class="list-item">
                              <div class="drag-handle"><i class="el-icon-rank"></i></div>
                              <el-input v-model="item.value" placeholder="请输入内容" @input="handleInput(index)" @change="prologueChange" maxlength="50"/>
                              <el-button type="text" size="mini" icon="el-icon-delete" circle @click="removeItem(index)" :disabled="items.length === 1"/>
                            </div>
                          </transition-group>
                        </draggable>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预览与调试 -->
        <div class="div-right">
          <div class="right-top">
            <span>预览与调试</span>
          </div>
          <div class="right-bottom">
            <preview-debug ref="previewDebug" />
          </div>
        </div>

      </div>

    </el-card>

    <!--编辑智能体-->
    <el-dialog title="编辑智能体" :visible.sync="openUpdateName" :close-on-click-modal="false" :close-on-press-escape="false" width="480px" append-to-body v-loading="updateLoading" element-loading-text="数据库处理中">
      <el-alert title="修改成功后，将自动发布到 Agent as API 渠道中" type="warning" class="search_card_desc" :closable="false" show-icon/>
      <el-form ref="formUpdateName" :model="formUpdateName" :rules="rulesUpdateName" label-position="top" label-width="120px" size="small" class="datasets-format-form">
        <el-form-item label="智能体名称" prop="name">
          <el-input v-model="formUpdateName.name" placeholder="输入智能体名称" maxlength="100" show-word-limit/>
        </el-form-item>
        <el-form-item label="智能体功能描述" prop="description">
          <el-input type="textarea" rows="3" v-model="formUpdateName.description" placeholder="输入智能体功能描述" maxlength="2000" show-word-limit/>
        </el-form-item>
        <el-form-item label="图标" prop="icon_url">
          <image-upload v-model="formUpdateName.icon_url" :limit="1" :fileSize="1"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormUpdateName" :loading="updateLoading">确 定</el-button>
        <el-button @click="cancelUpdateName">取 消</el-button>
      </div>
    </el-dialog>

    <!--绑定知识库-弹窗-->
    <el-dialog title="绑定知识库" :visible.sync="openKnowledge" :close-on-click-modal="false" :close-on-press-escape="false" width="800px" append-to-body v-loading="updateLoading" element-loading-text="数据库处理中">
      <el-alert title="绑定成功后，将自动发布到 Agent as API 渠道中" type="warning" class="search_card_desc" :closable="false" show-icon/>
      <div class="bind-knowledge-fils">
        <el-row :gutter="20">
          <el-col :span="12" v-for="(item, index) in form.knowledge.unknowledge_infos" :key="index">
            <div class="checkbox-wrapper">
              <el-checkbox :label="item.id" v-model="selectedIds">
                <div class="knowledge-fils-div" :class="{ 'selected': selectedIds.includes(item.id) }">
                  <div class="knowledge-fils-img">
                    <el-image :src="item.iconURL" fit="cover"/>
                  </div>
                  <div class="knowledge-fils-name">
                    <div class="knowledge-fils-name-one">{{ item.name }}</div>
                    <div class="knowledge-fils-name-two">
                      <div>
                        <dict-tag :options="dict.type.datasets_format_type" :value="item.formatType"/>
                      </div>
                      <span>{{ item.description }}</span>
                    </div>
                  </div>
                </div>
              </el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBindKnowledge" :loading="updateLoading">确定绑定</el-button>
        <el-button @click="cancelBindKnowledge">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import {getOnlineInfo, updateBotName, updatePrompt, updatePrologueQuestion, bindKnowledge} from "@/api/business/bot/botInfo"
import previewDebug from "@/views/business/bot/botSet/previewDebug.vue";

export default {
  name: 'botSet',
  components: {draggable, mavonEditor,previewDebug},
  dicts: ['datasets_format_type'],
  data() {
    return {
      // 遮罩层
      loading: false,
      activeNames: [],//知识库列表
      dialogueExperience: [],//对话体验
      form: {
        prompt_info: {}, // 初始化prompt_info
        onboarding_info: {},
        //知识库
        knowledge: {
          knowledge_infos: [],
          unknowledge_infos: []
        }
      },

      // 富文本编辑器配置
      toolbarsConfig: {
        bold: true,          // 粗体
        italic: true,        // 斜体
        header: true,        // 标题
        underline: true,     // 下划线
        quote: true,         // 引用
        ol: true,            // 有序列表
        ul: true,            // 无序列表
        link: true,          // 链接
        imagelink: true,     // 图片链接
        code: true,          // 代码块
        subfield: true,      // 双栏
        fullscreen: true,     // 全屏
        help: true           // 帮助（之前添加的）
      },

      // 开场白-预设问题列表 - 开始
      items: [{id: this.generateId(), value: ''}],
      autoAddLock: false,
      // 开场白-预设问题列表 - 结束

      //编辑智能体
      formUpdateName: {},
      openUpdateName: false,
      // 编辑智能体-按钮
      updateLoading: false,
      // 表单校验
      rulesUpdateName: {
        name: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        description: [
          {required: true, message: "描述不能为空", trigger: "blur"}
        ],
        icon_url: [
          {required: true, message: "图标不能为空", trigger: "blur"}
        ]
      },

      //人设与回复逻辑
      badgeIsShow: true,//人设与回复逻辑是否有改变
      oldPrompt_infoPrompt: null,//原始数据


      //对话体验
      chatBadgeIsShow: true,//对话体验是否有改变
      oldPrologue: null,//原始开场白-是否保存提示用
      oldItems: null,//原始预设问题-是否保存提示用


      //绑定知识库
      openKnowledge: false,
      selectedIds: [],//选中的知识库列表


    }
  },
  created() {
    this.getBotSetInfo();
  },
  methods: {
    /** 获取智能体信息 */
    getBotSetInfo() {
      this.loading = true;
      getOnlineInfo().then(response => {
        this.form = response.data;
        this.form.inputList = [''];
        if (this.form.onboarding_info != null && this.form.onboarding_info.suggested_questions != null) {
          this.initItems(this.form.onboarding_info.suggested_questions);
        }
        this.oldPrompt_infoPrompt = this.form.prompt_info.prompt;
        this.oldPrologue = this.form.onboarding_info.prologue;
        this.oldItems = this.form.onboarding_info.suggested_questions;
        this.loading = false;

        this.submitPreviewDebug(this.form.onboarding_info.prologue,this.form.onboarding_info.suggested_questions);
      });
    },
    /** 打开知识库列表 */
    handleChange(val) {
      console.log(val)
    },

    //格式化时间戳
    unixTimestampToReadable(timestamp) {
      const date = new Date(timestamp * 1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    // 开场白-预设问题列表 - 开始
    initItems(questions) {
      // 转换数据结构并保留一个空行
      this.items = questions.length > 0 ? questions.map(q => ({id: this.generateId(), value: q})) : [{id: this.generateId(), value: ''}]
      if (this.items.length > 0) {
        this.items = [...this.items, {id: this.generateId(), value: ''}]
      }
    },
    generateId() {
      return Date.now() + Math.random().toString(36).substr(2, 5)
    },
    handleInput(index) {
      // 自动添加新行逻辑
      if (index === this.items.length - 1) {
        const currentItem = this.items[index]
        if (currentItem.value.trim() && !this.autoAddLock) {
          this.autoAddLock = true
          this.items.push({id: this.generateId(), value: ''})
          this.$nextTick(() => {
            this.autoAddLock = false
          })
        }
      }

      // 自动清理空行逻辑
      if (index < this.items.length - 1 && !this.items[index].value.trim()) {
        const nextItem = this.items[index + 1]
        if (!nextItem.value.trim()) {
          this.items.splice(index + 1, 1)
        }
      }
    },
    removeItem(index) {
      if (this.items.length > 1) {
        this.items.splice(index, 1)
        this.prologueChange();
      }
    },
    // 开场白-预设问题列表 - 结束

    /** 修改标题、图标、描述 - 开始 **/
    reset() {
      this.formUpdateName = {
        bot_id: null,
        name: null,
        description: null,
        icon_url: null
      };
      this.resetForm("formUpdateName");
    },
    // 取消按钮
    cancelUpdateName() {
      this.openUpdateName = false;
    },
    //编辑智能体-弹出窗
    openUpdateNameModle() {
      this.formUpdateName = {
        bot_id: this.form.bot_id,
        name: this.form.name,
        description: this.form.description,
        icon_url: this.form.icon_url
      };
      this.openUpdateName = true;
    },
    //编辑智能体-提交
    submitFormUpdateName() {
      this.$refs["formUpdateName"].validate(valid => {
        if (valid) {
          this.updateLoading = true;
          updateBotName(this.formUpdateName).then(response => {
            this.$modal.msgSuccess("编辑成功");
            this.updateLoading = false;
            this.openUpdateName = false;
            this.getBotSetInfo();
          }).catch(() => {
            this.updateLoading = false;
          });
        }
      });
    },
    /** 修改标题、图标、描述 - 结束 **/


    /** 修改人设与回复逻辑 - 开始 **/
    //内容发生改变
    updatePromptInfo() {
      if (this.oldPrompt_infoPrompt !== this.form.prompt_info.prompt) {
        this.badgeIsShow = false;
      } else {
        this.badgeIsShow = true;
      }
    },
    //保存人设与回复逻辑
    savePromptInfo() {
      this.$confirm('是否修改 [人设与回复逻辑]？修改成功后，将自动发布到 Agent as API 渠道中。', '保存提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.loading = true;
        updatePrompt(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.loading = false;
          this.badgeIsShow = true;
          this.getBotSetInfo();
        }).catch(() => {
          this.loading = false;
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消保存'
        })
      })
    },
    /** 修改人设与回复逻辑 - 结束 **/


    /** 编辑开场白、预设问题 - 开始 **/
    //监听内容是否有改变
    prologueChange() {
      this.$nextTick(() => {
        //console.log("Olditems ===>>> " + JSON.stringify(this.oldItems));
        //获得问题列表内容
        const validData = this.items.filter(item => item.value.trim()).map(item => item.value.trim())
        //console.log("items ===>>> " + JSON.stringify(validData));
        if (this.oldPrologue !== this.form.onboarding_info.prologue.trim() || JSON.stringify(this.oldItems) !== JSON.stringify(validData)) {
          this.chatBadgeIsShow = false;
        } else {
          this.chatBadgeIsShow = true;
        }
      });
    },
    //提交事件
    handleSubmit() {
      this.$nextTick(() => {
        const validData = this.items.filter(item => item.value.trim()).map(item => item.value.trim())
        //console.log('预设问题:', validData);// ["333","怎样的问题你能更好地解答？","2112"]
        this.form.onboarding_info.suggested_questions = validData;
        this.form.onboarding_info.prologue = this.form.onboarding_info.prologue.trim();//富文本内容

        this.$confirm('是否保存 [对话体验设置]？保存成功后，将自动发布到 Agent as API 渠道中。', '保存提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.loading = true;
          updatePrologueQuestion(this.form).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.loading = false;
            this.chatBadgeIsShow = true;
            this.getBotSetInfo();
          }).catch(() => {
            this.loading = false;
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消保存'
          })
        })

      });
    },
    /** 编辑开场白、预设问题- 结束 **/


    /** 绑定知识库- 开始 **/
    //取消知识库
    delKnowladgeById(id, name) {
      this.$confirm('是否取消 [' + name + '] 知识库？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.knowledge.knowledge_infos = this.form.knowledge.knowledge_infos.filter(item => item.id !== id);
        //console.log("知识库 ===>> ",this.form.knowledge.knowledge_infos);
        this.loading = true;
        bindKnowledge(this.form).then(response => {
          this.$modal.msgSuccess("取消成功");
          this.loading = false;
          this.getBotSetInfo();
        }).catch(() => {
          this.loading = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    //打开绑定窗口
    bindKnowledge() {
      this.openKnowledge = true;
    },
    //提交绑定
    submitBindKnowledge() {
      // 获取选中的 ID
      console.log('选中的 ID:', this.selectedIds);
      if (this.selectedIds.length <= 0) {
        this.$modal.msgError("请选择需要绑定的知识库");
      } else {
        this.form.knowledge.knowledge_infos = this.form.knowledge.knowledge_infos.filter(item => !this.selectedIds.includes(item.id));
        this.selectedIds.forEach((id) => {
          this.form.knowledge.knowledge_infos.push({
            id: id,
            name: null,
            description: null,
            formatType: null,
            iconURL: null
          });
        });
        //console.log("知识库 ===>> ",this.form.knowledge.knowledge_infos);
        this.updateLoading = true;
        bindKnowledge(this.form).then(response => {
          this.$modal.msgSuccess("绑定成功");
          this.updateLoading = false;
          this.openKnowledge = false;// 关闭弹窗
          this.selectedIds = [];// 清空选中的 ID
          this.getBotSetInfo();
        }).catch(() => {
          this.updateLoading = false;
        });
      }
    },
    //关闭绑定窗口
    cancelBindKnowledge() {
      this.openKnowledge = false;
      // 清空选中的 ID
      this.selectedIds = [];
    },
    /** 绑定知识库- 结束 **/


    //传递参数到预览窗口
    submitPreviewDebug(prologue, suggested_questions){
      this.$nextTick(() => {
        this.$refs.previewDebug.previewDebugReq(prologue, suggested_questions);
      });
    }

  }
}
</script>
<style lang="scss" scoped>
.card_div {
  height: calc(100vh - 75px);

  ::v-deep .el-card__body {
    padding: 0px;
  }
}

.div-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 10px;
  background-color: #f7f7fa;
  border-bottom: 1px solid #e4e6f0;

  .div-top-inner {
    display: flex;
    align-items: center;
    flex: 1;

    .bot-img {
      width: 40px;
      height: 40px;

      .el-image {
        height: 40px;
        width: 40px;
      }
    }

    .bot-title {
      padding-left: 10px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;

      .bot-name {
        font-weight: 700;
        color: #0a3069;

        ::v-deep .el-button {
          padding: 5px 12px;
        }
      }

      .bot-desc {
        color: #8d8d8d;

        ::v-deep span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          width: calc(100vh - 150px);
        }
      }
    }
  }

  .bot-pull-time {
    color: #8d8d8d;
    font-size: 12px;
    margin-right: 10px;
  }
}

.outer {
  display: flex;
  justify-content: flex-start;

  .div-left {
    height: calc(100vh - 77px);
    width: 70%;
    background-color: #f7f7fa;
    display: flex;
    flex-direction: column;
    flex-grow: 0;

    .left-top {
      color: #0a3069;
      font-weight: 700;
      text-align: left;
      padding: 10px 15px;
      font-size: 14px;
      border-bottom: 1px solid #e4e6f0;
    }

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

      .left-bottom-left {
        padding: 15px;
        width: 50%;
        flex-grow: 0;
        border-right: 1px solid #e4e6f0;
        display: flex;
        flex-direction: column;

        .input-name {
          font-size: 14px;
          color: #0a3069;
          font-weight: 700;
          height: 40px;
          display: flex;
          align-items: center;
          padding-left: 10px;
          justify-content: space-between;
        }

        .el-textarea {
          ::v-deep .el-textarea__inner {
            min-height: calc(100vh - 245px) !important;
            padding: 20px 15px;
            border: none;
          }
        }
      }

      .left-bottom-right {
        padding: 15px;
        width: 50%;
        flex-grow: 0;
        height: calc(100vh - 190px);
        overflow: auto;

        .input-name {
          font-size: 14px;
          color: #0a3069;
          font-weight: 700;
          height: 35px;
          display: flex;
          align-items: center;
          padding-left: 10px;
          justify-content: space-between;
        }

        .left-bottom-right-div {
          display: flex;
          flex-direction: column;

          .left-bottom-right-div-zs {
            margin-bottom: 15px;

            .knowledge-fils {
              padding: 10px;

              .fils-el-card {
                margin-bottom: 10px;
                background-color: #fafafd;
                border: none;
              }

              .knowledge-fils-div {
                display: flex;
                padding: 10px 10px;

                .knowledge-fils-img {
                  height: 40px;
                  width: 40px;
                  border-radius: 5px;
                  flex-grow: 0;

                  ::v-deep .el-image {
                    height: 40px;
                    border-radius: 5px;
                  }
                }

                .knowledge-fils-name {
                  padding-left: 10px;
                  flex-grow: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;

                  .knowledge-fils-name-one {
                    font-size: 14px;
                    color: #0a3069;
                    line-height: 20px;
                  }

                  .knowledge-fils-name-two {
                    font-size: 12px;
                    color: #2029459e;
                    line-height: 16px;
                  }
                }

                .knowledge-fils-btn {
                  display: flex;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }

  .div-right {
    height: calc(100vh - 87px);
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .right-top {
      color: #0a3069;
      font-weight: 700;
      text-align: left;
      padding: 10px 15px;
      font-size: 14px;
      border-bottom: 1px solid #e4e6f0;
    }

    .right-bottom {
      height: calc(100vh - 87px);
      padding: 15px;
    }
  }
}

/* 开场白-预设问题列表 */
.knowledge-fils {
  padding: 20px;

  .drag-container {
    .list-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #ebeef5;
      transition: all 0.3s;

      .drag-handle {
        cursor: move;
        color: #909399;
        padding: 0 10px;

        i {
          font-size: 18px;
        }
      }

      ::v-deep .el-input {
        flex: 1;
        margin: 0 15px;
      }

      &:hover {
        background-color: #f5f7fa;
      }
    }

    .flip-list-move {
      transition: transform 0.3s;
    }
  }
}

/* 绑定知识库 */
.bind-knowledge-fils {
  padding: 10px;
  height: 400px;
  overflow: auto;

  .checkbox-wrapper {
    .el-checkbox {
      display: flex;
      align-items: center;

      .el-checkbox__label {
        padding-left: 7px;
      }
    }
  }

  .knowledge-fils-div {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    background-color: #f5f7fa;
    margin: 7px 0px;
    border-radius: 5px;

    .knowledge-fils-img {
      height: 40px;
      width: 40px;
      border-radius: 5px;
      flex-grow: 0;

      .el-image {
        height: 40px;
        width: 40px;
        border-radius: 5px;
      }
    }

    .knowledge-fils-name {
      padding-left: 10px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .knowledge-fils-name-one {
        font-size: 14px;
        color: #0a3069;
        line-height: 20px;
      }

      .knowledge-fils-name-two {
        font-size: 12px;
        color: #2029459e;
        line-height: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;

        .item-row-div-three-tag {
          font-size: 10px;
          height: 18px;
          width: 45px;
          line-height: 18px;
        }

        span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          width: 220px;
        }
      }
    }
  }

  .selected {
    background-color: #d9e7ff;
  }

  .knowledge-fils-div:hover {
    background-color: #d9e7ff;
  }
}
</style>
