<template>
  <div class="right-list-toolbar">
    <el-toolbar>
      <el-button @click="addBadClickHandler" priv="WordManage.Bad">
        <i class="fa fa-plus"></i>新建
      </el-button>
      <el-button @click="importBadClickHandler" priv="WordManage.Bad">
        <i class="fa fa-download"></i>敏感词批量导入
      </el-button>

      <el-col :span="10" class="search-box-r tool-search-box-r">
        <el-input v-model="searchBad.word" @keyup.enter.native="searchBadClickHandler" placeholder="请输入敏感词" class="search-bar-algin-toolbar"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchBadClickHandler" title="查询"></i></span>
      </el-col>

    </el-toolbar>

    <div>
      <el-table ref="refBadTable" :data="badTable" :data-read-url="badTableList" :page-size="10" :auto-get-data="false" tooltip-effect="dark" @selection-change="onSelectionChange" :multi-operates="multiOperates">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
        <el-table-column prop="word" label="敏感词">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.word" priv="WordManage.Bad" @click.stop="edit(scope.row)">{{scope.row.word}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="replaceWord" label="替换词"></el-table-column>
        <el-table-column prop="addUser" label="添加用户"></el-table-column>
        <el-table-column prop="addTime" label="添加时间">
          <template slot-scope="scope">
            {{scope.row.addTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="edit(scope.row)" type="text" title="编辑" priv="WordManage.Bad">
              <i class="fa fa-edit f16"></i></el-button>
            <el-button @click.stop="del(scope.row)" type="text" title="删除" priv="WordManage.Bad">
              <i class="fa fa-times f16"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--敏感词 Dialog-->
    <bad-word-dialog :add-bad-dialog.sync="addBadDialog" :tmp-bad="tmpBad" @callback="init"></bad-word-dialog>

    <!--敏感词导入dialog-->
    <batch-upload-dialog :batch-import-dialog.sync="batchImportDialog" @callback="init"></batch-upload-dialog>

  </div>
</template>

<script>
import util from '@src/common/util.js'
import Privilege from '@src/common/privilege.js'
import badWordDialog from './badWordDialog.vue'
import batchImportUploadDialog from './batchImportUploadDialog.vue'

export default {
  components: {
    'bad-word-dialog': badWordDialog,
    'batch-upload-dialog': batchImportUploadDialog
  },
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      // 敏感词导入新建、编辑对话框
      batchImportDialog: false,

      // 敏感词列表
      badTable: [],

      // 敏感词新建、编辑对话框
      addBadDialog: false,

      // 敏感词form表单定义
      tmpBad: {
        word: '',
        replaceWord: ''
      },

      // 当前选择行
      badSelectedRows: [],

      // 敏感词搜索
      searchBad: {
        word: ''
      },

      multiOperates: [
        {
          label: '删除',
          value: 'delete',
          fn: rows => {
            this.deleteBadWords(rows)
          }
        }
      ]
    }
  },

  methods: {
    // 批量删除
    async deleteBadWords(rows) {
      if (Privilege.hasPriv(`WordManage.Bad`) === false) {
        util.showError('您没有操作权限！')
        return
      }

      this.$confirm(`确认删除选择的<span class='icon-danger'>${rows.length}条</span>内容吗 ？`, {
        title: '提示',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      })
        .then(async res => {
          let IDs = _.map(rows, 'ID').join(',')

          let resp = await axios.delete(`/ui/badwords/${IDs}`)
          if (resp.data.status === 1) {
            util.showMessage(resp)
            this.init()
          } else {
            util.showErrorMessageBox(resp.data.message)
          }
        })
        .catch(err => { console.error(err) })
    },

    // 敏感词批量导入点击事件
    importBadClickHandler() {
      this.batchImportDialog = true
    },

    // 新建敏感词事件
    addBadClickHandler() {
      this.editBadMode = 1
      this.tmpBad = {
        word: '',
        replaceWord: ''
      }
      this.addBadDialog = true
    },

    edit(row) {
      this.editBadMode = 2
      this.tmpBad = Object.assign({}, row)
      this.addBadDialog = true
    },

    // 删除敏感词事件
    async batchDel() {
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let ids = []
        this.badSelectedRows.forEach(function(row) {
          ids.push(row.ID)
        })
        let strIds = ids.join(',')
        let res = await axios.delete(`/ui/badwords/${strIds}`)
        if (res.data.status === 1) {
          util.showMessage(res)
          this.init()
        } else {
          util.showErrorMessageBox(res.data.message)
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    },

    del(row) {
      this.badSelectedRows = [row]
      this.batchDel()
    },

    // 数据选中事件
    onSelectionChange(selection) {
      this.badSelectedRows = selection
    },

    // 敏感词搜索事件
    searchBadClickHandler() {
      this.init()
    },

    // 刷新表格数据
    init() {
      this.$refs.refBadTable.getData()
    },

    // 敏感词列表数据加载
    badTableList() {
      return [
        '/ui/badwords',
        {
          params: {
            word: encodeURIComponent(this.searchBad.word)
          }
        }
      ]
    }
  }
}
</script>

<style scoped>
.row {
  margin-top: 10px;
}

.hot span {
  text-align: center;
  line-height: 32px;
  margin-left: 2px;
}

.page {
  float: right;
}
</style>
