<template>
    <div class="sensitive-word-page">
        <Card>
          <div class="test-words">
            <Input placeholder="请输入待验证的敏感词" v-model="textWord" type="textarea"/>
            <Button style="margin-left: 20px;width: 100px" @click="handleTest">测试</Button>
          </div>
          <div class="search-con">
            <Input v-model="searchContent.sensitiveWords" clearable placeholder="请输入敏感词" style="width: 200px"/>
            <ButtonGroup class="search-btngroup" style="margin-left: 20px">
              <Button @click="handleSearch" class="btn-item" type="primary">查找</Button>
              <Button type="primary" @click="handleRefresh">
                <Icon type="md-refresh" />
              </Button>
            </ButtonGroup>
            <Button @click="handleShow" class="btn-item" type="info">+ 添加敏感词</Button>
          </div>
          <tables
            ref="tables"
            editable
            pagable
            v-model="tableData"
            :columns="columns"
            :currentPage="searchContent.pageNum"
            :pageSize="searchContent.pageSize"
            :totalSize="totalSize"
            :loading="loading"
            @on-change="handleCurrentChange"
          />
        </Card>
      <Modal
        title="添加敏感词"
        v-model="modalStatus"
        :mask-closable="false"
      >
        <div class="model-item">
          <label class="label">敏感词：</label>
          <Input
            v-model="newSensitiveWords"
          />
        </div>
        <div class="model-item">
          <label class="label">备注：</label>
          <Input
            v-model="comm"
          />
        </div>
        <div slot="footer">
          <Button
            type="primary"
            @click="handleSure"
          >
            确定
          </Button>
        </div>
      </Modal>
    </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      textWord: '',
      searchContent: {
        sensitiveWords: '',
        page: 1,
        pageSize: 10
      },
      tableData: [],
      columns: [
        { title: '编号', type: 'index', align: 'center', minWidth: 200 },
        { title: '敏感词', key: 'sensitiveWords', align: 'center', minWidth: 130 },
        { title: '备注', key: 'comm', align: 'center', minWidth: 130 },
        { title: '添加时间',
          key: 'uid',
          align: 'center',
          minWidth: 130,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        { title: '操作',
          key: 'operate',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [delBtn])
          }
        }
      ],
      totalSize: 0,
      loading: false,
      modalStatus: false,
      newSensitiveWords: '',
      comm: ''
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getSysSensitiveList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleTest () {
      let text = this.textWord
      if (!text) {
        this.$Message.warning('请输入敏感词')
        return
      }
      this.api({
        apiName: 'testSysSensitiveWord',
        postdata: { text },
        success: (res) => {

        },
        error: (res) => {
          let word = ''
          res.data.forEach((item) => {
            word += `${item} `
          })
          this.$Message.success({
            content: `输入内容包含敏感词：${word}`,
            duration: 10,
            closable: true
          })
        }
      })
    },
    handleDelete (row) {
      return () => {
        let { sensitiveWordsId } = row
        this.$Modal.confirm({
          title: '删除',
          content: `确认要删除此条数据吗 ？`,
          onOk: () => {
            this.api({
              apiName: 'deleteSysSensitiveWord',
              postdata: sensitiveWordsId,
              success: (res) => {
                this.requestData()
                this.$Notice.warning({ title: `删除成功` })
              }
            })
          }
        })
      }
    },
    handleSearch () {
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleShow () {
      this.modalStatus = true
      this.comm = ''
      this.newSensitiveWords = ''
    },
    handleSure () {
      let { comm, newSensitiveWords } = this
      let form = {
        comm,
        sensitiveWords: newSensitiveWords
      }
      if (!comm || !newSensitiveWords) {
        this.$Message.warning('所有项均为必填项哦！')
        return
      }
      this.api({
        apiName: 'addSysSensitiveWord',
        postdata: form,
        success: (res) => {
          this.modalStatus = false
          this.requestData()
          this.$Notice.success({ title: `添加成功！` })
        }
      })
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style lang="less" scoped>
  .test-words {
    display: flex;
  }
  .search-con {
    padding: 10px 0;
  }
  .btn-item {
    margin-left: 20px;
  }
  .model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
