<template>
  <div class="vocabulary-wrapper">
    <div class="tools-wrapper">
      <el-button type="primary" @click="addDialogShow">新增</el-button>
      <el-button type="warning" :disabled="isEditAble" @click="editChosenKeyWord">编辑</el-button>
      <el-button type="danger" :disabled="isDeleteAble" @click="deleteChosenKeyWords">删除</el-button>
    </div>
    <div class="vocabularies-wrapper">
      <el-row>
        <el-col :span="8">
          <el-card>
            <div slot="header">
              <span>隐患关键词</span>
            </div>
            <div v-for="item in vocabularies" :key="item.kId">
              <input type="checkbox" :checked="item.checked" @input="vocabularyinput($event, item)">{{ '&nbsp;&nbsp;' + item.name }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="增加隐患关键词"
      :visible.sync="addFormVisible"
    >
      <ul>
        <li v-for="(item) in toAddVocabularies" :key="item.id">{{ item.name }}</li>
      </ul>
      <div class="add-wrapper add-vocabulary-wrapper" style="display:flex;align-items: center;">
        <div ref="addVocabulary" class="addEditVocabulary" :style="{minWidth:'100px',marginRight: '7px'}" contenteditable spellcheck="false" />
        <el-button type="primary" round @click="addVocabularyItem">增加</el-button>
      </div>
      <span slot="footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddKeyword">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑隐患关键字"
      :visible.sync="editFormVisible"
    >
      <div class="edit-vocabulary-wrapper">
        <div ref="editVocabulary" class="editVocabularyBorder" contenteditable spellcheck="true" />
        <el-button type="primary" round @click="editVocabularyItem">确定</el-button>
      </div>
      <span slot="footer">
        <el-button @click="editFormVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getHDKeyWords, postHDKeyWords, putHDKeyWords, deleteHDKeyWords } from '../../api/keyword.js'
export default {
  data() {
    return {
      vocabularies: [],
      toAddVocabularies: [],
      // 控制编辑按钮的功能
      isEditAble: true,
      // 控制删除按钮的功能
      isDeleteAble: true,
      // 添加 隐患关键字页面
      addFormVisible: false,
      // 编辑 隐患关键字页面
      editFormVisible: false,
      // 当前编辑的隐患关键词的 kId
      curkId: 0,
      // 当前编辑的隐患关键字的词
      curKeyWord: ''
    }
  },
  mounted() {
    this.initAllVocabulary()
  },
  methods: {
    // 初始化所有隐患关键字
    initAllVocabulary() {
      getHDKeyWords().then(res => {
        // console.log(res, 'xixixihehe')
        this.vocabularies = res.content.map(item => {
          return {
            kId: item.kId,
            name: item.kWord,
            checked: false
          }
        })
      })
    },
    // 修改隐患关键字
    vocabularyinput($event, item) {
      item.checked = !item.checked
      this.isEditAble = true
      this.isDeleteAble = true
      if (this.vocabularies.filter(item => item.checked === true).length === 1) {
        this.isEditAble = false
      }
      if (this.vocabularies.filter(item => item.checked).length > 0) {
        this.isDeleteAble = false
      }
    },
    // 增加隐患关键词
    addVocabularyItem() {
      if (this.$refs['addVocabulary'].innerText !== '') {
        this.toAddVocabularies.push({
          kId: new Date().getMilliseconds(),
          name: this.$refs['addVocabulary'].innerText
        })
        this.$refs['addVocabulary'].innerText = ''
        this.$nextTick(() => {
          this.$refs['addVocabulary'].focus()
        })
      }
    },
    // 新增对话框显示
    addDialogShow() {
      this.toAddVocabularies = []
      this.addFormVisible = true
    },
    // 提交新增关键词
    submitAddKeyword() {
      postHDKeyWords(this.toAddVocabularies).then(res => {
        this.$message({
          message: '新增关键词成功',
          type: 'success'
        })
        this.toAddVocabularies = []
        this.initAllVocabulary()
      })
    },
    // 删除关键词
    deleteChosenKeyWords() {
      deleteHDKeyWords(this.vocabularies.filter(item => item.checked).map(item => item.kId)).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.initAllVocabulary()
      })
    },
    // 设置当前的隐患关键词
    editChosenKeyWord() {
      this.curkId = this.vocabularies.filter(item => item.checked === true)[0].kId
      this.curKeyWord = this.vocabularies.filter(item => item.checked === true)[0].kWord
      this.editFormVisible = true
    },
    // 编辑隐患关键词
    editVocabularyItem() {
      if (this.$refs['editVocabulary'].innerText !== '') {
        putHDKeyWords(this.curkId, this.$refs['editVocabulary'].innerText).then(res => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.initAllVocabulary()
          this.$refs['editVocabulary'].innerText = ''
          this.editFormVisible = false
        })
      }
    }
  }
}
</script>

<style lang="scss">
  .addEditVocabulary {
    border: 1px solid #eee;
    border-radius: 4px;
    outline: none;
    padding: 5px;
  }
  .add-vocabulary-wrapper {
    display: flex;
    justify-content: flex-start;
  }
  .edit-vocabulary-wrapper {
    display: flex;
    justify-content: flex-start;
  }
  .editVocabularyBorder {
    min-width: 100px;
    margin-right: 7px;
    border: 1px solid #eee;
    border-radius: 4px;
    outline: none;
  }
</style>
