<!--
 * @Author: riverQiu
 * @Date: 2023-10-14 13:21:37
 * @LastEditors: riverQiu
 * @LastEditTime: 2023-10-15 00:55:44
 * @Description:
-->
<template>
  <el-dialog title="话术" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="800px" height="700">
    <div>
      <!-- 问题 -->
      <el-input v-model="queryParams.searchValue" placeholder="请输入问题" clearable @keyup.enter.native="queryAnswer"  style="margin-bottom: 10px;"/>

      <!-- 关键词 -->
      <el-checkbox-group v-model="queryParams.keyList" @change="queryAnswer">
            <el-checkbox v-for="(item, index) in dict.type.dm_skill_key" :key="index" :label="item.value" style="margin: 2px;" border>{{item.label}}</el-checkbox>
        </el-checkbox-group>

      <!-- 话术内容 -->
      <el-card class="box-card">

        <div class="text item">
          <ul v-for="item in skillInfo">
            <li>
              <span style="font-style: italic; font-size: 16px; font-weight: bold; margin-right: 5px;">Q:</span><span>{{item.question}}</span>
             
            </li>
            <li>
              <span style="font-style: italic; font-size: 16px; font-weight: bold; margin-right: 5px;">A:</span><span v-html="item.content"></span>
            </li>
            <el-divider></el-divider>
          </ul>
          <span v-html="content" />
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
import { listSkill,getSkillKey, getSkill } from '@/api/system/skill';
export default {
  name: 'SkillDialog',
  dicts: ['dm_skill_key'],
  data () {
    return {
      visible: false,
      loading: true,
      keyOptions: [],
      content: undefined,
      skillId: undefined,
      queryParams:{
        searchValue: undefined,
        keyList: [],
        status: 2
      },
      skillInfo:[]
    };
  },
  methods: {
    init () {
      this.visible = true;
      this.getSkillKeyOption();
    },
    getSkillKeyOption () {
      getSkillKey().then((resp) => {
        if (resp && resp.code === 200) {
          this.keyOptions = resp.data;
        }
      });
    },
    queryAnswer(){
      console.log(this.queryParams)
      this.skillInfo = []
      listSkill(this.queryParams).then((resp) => {
          if (resp && resp.code === 200) {
            this.skillInfo = resp.data;
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 500px;
  min-height: 100px;
}
</style>

