<template>
  <el-dialog
    title="敏感词设置"
    width="50%"
    :visible.sync="modal"
    :close-on-click-modal="false"
    @close="$emit('cancel')"
  >
    <el-row :gutter="10">
      <el-col class="txt-right" :span="4">敏感词类别：</el-col>
      <el-col :span="20">
        <el-select v-model="sensitiveType" placeholder="请选择" @change="changeType">
          <el-option
            v-for="item in sensitiveTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col class="txt-right" :span="4">添加敏感词：</el-col>
      <el-col :span="20">
        <el-input
          v-model="inputValue"
          class="word-input"
          size="small"
          @keyup.enter.native="handleInputConfirm"
        >
          <el-button slot="append" icon="el-icon-plus" @click="handleInputConfirm" />
        </el-input>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="10">
      <el-col class="txt-right" :span="4">过滤敏感词：</el-col>
      <el-col :span="20">
        <el-input
          v-model="inputValue"
          class="word-input"
          size="small"
          @keyup.enter.native="handleInputConfirm"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleInputConfirm" />
        </el-input>
      </el-col>
    </el-row> -->
    <el-row :gutter="10">
      <el-col class="txt-right" :span="4">所有敏感词：</el-col>
      <el-col :span="20">
        <el-tag
          v-for="(tag, index) in dynamicTags"
          :key="tag.word"
          closable
          :disable-transitions="false"
          @close="handleClose(tag, index)"
        >
          {{ tag.word }}
        </el-tag>
      </el-col>
    </el-row>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit('ruleForm')">提交</el-button>
      <el-button @click="modal = false">取消</el-button>
    </div> -->
  </el-dialog>
</template>

<script>
import { getSensitiveOptions, getSesitiveList, saveSesitive, deleteSesitive } from '@/model/comment'
import EMITKEY from '@/const/emitNameKey'

export default {
  name: 'SensitiveItem',

  props: {
    tagType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      modal: true,
      sensitiveType: null,
      sensitiveTypeOptions: [],
      inputValue: '',
      dynamicTags: []
    }
  },

  mounted() {
    this.loadOptions()
  },

  methods: {
    async loadOptions() {
      const { success, data, msg } = await getSensitiveOptions()
      if (success) {
        this.sensitiveTypeOptions = data
        this.sensitiveType = data[0] ? data[0].value : null
        this.loadData(this.sensitiveType)
      } else {
        this.$message.error(msg)
      }
    },

    changeType(val) {
      this.loadData(val)
    },

    async loadData(val) {
      const { success, data, msg } = await getSesitiveList({
        type: val
      })
      if (success) {
        this.dynamicTags = data
        this.inputValue = ''
      } else {
        this.$message.error(msg)
      }
    },
    async handleInputConfirm() {
      const inputValue = this.inputValue
      if (!inputValue) {
        this.$message.error('不能添加空词组~')
        return false
      } else if (this.dynamicTags.find(x => x.word === inputValue)) {
        this.$message.error('不能添加相同词组~')
        return false
      } else {
        const { success, msg } = await saveSesitive({
          data: {
            word: this.inputValue,
            wordType: this.sensitiveType
          }
        })
        if (success) {
          this.$message.success('新增成功~')
          this.loadData(this.sensitiveType)
        } else {
          this.$message.error(msg)
        }
      }
      this.inputValue = ''
    },
    async handleClose(row, index) {
      const { success, msg } = await deleteSesitive({
        sensitiveWordsId: row.id
      })
      if (success) {
        this.dynamicTags.splice(index, 1)
        this.$message.success('删除成功~')
      } else {
        this.$message.error(msg)
      }
    },
    async handleSubmit() {
      const { success, msg } = await saveSesitive({
        type: this.sensitiveType,
        data: this.dynamicTags.map(x => ({
          id: x.id,
          words: x.word
        }))
      })
      if (success) {
        this.$message.success(`保存成功~`)
        this.bus.$emit(EMITKEY.COMMENTRELOAD)
        this.modal = false
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.word-input {
  max-width: 300px;
}
.el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
.el-tag + .el-tag {
  margin-left: 14px;
}
</style>
