<!--
 * @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="700px" height="700">
    <div>
      <!-- 搜索框 -->
      <el-select v-model="skillId" placeholder="请选择关键词" filterable style="width: 90%;" @change="selectKey">
        <el-option v-for="item in keyOptions" :key="item.skillId" :label="item.skillKey" :value="item.skillId" />
      </el-select> <!-- 常用关键词 -->

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

        <div class="text item">
          <span v-html="content" />
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
import { getSkillKey, getSkill } from '@/api/system/skill';
export default {
  name: 'SkillDialog',
  data () {
    return {
      visible: false,
      loading: true,
      keyOptions: [],
      content: undefined,
      skillId: undefined
    };
  },
  methods: {
    init () {
      this.visible = true;
      this.getSkillKeyOption();
    },
    getSkillKeyOption () {
      getSkillKey().then((resp) => {
        if (resp && resp.code === 200) {
          this.keyOptions = resp.data;
        }
      });
    },
    selectKey (item) {
      if (item) {
        getSkill(item).then((resp) => {
          if (resp && resp.code === 200) {
            this.content = resp.data.content;
          }
        });
      }
    }
  }
};
</script>

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

