<template>
  <div class="sensitive_word_page">
    <div class="head">
      <el-form ref="formPage" action="" :model="formPage" inline>
        <el-form-item label="关键词">
          <el-input v-model="formPage.keyword" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="fetch">查询</el-button>
          <el-button size="mini" @click="reset">重置</el-button>

        </el-form-item>
      </el-form>
    </div>
    <div class="setting">
      <el-form ref="form" :model="form" inline>
        <el-form-item label="状态">
          <!-- <el-radio-group v-model="form.enabled" @change="changeItem">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group> -->
          <el-switch
            v-model="form.enabled"
            :active-value="1"
            :inactive-value="0"
            @change="changeItem"
          />
        </el-form-item>

        <el-form-item label="处理措施">
          <el-radio-group v-model="form.action" @change="changeItem">
            <el-radio :label="1">禁止发布</el-radio>
            <el-radio :label="2">需审核</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <el-button type="primary" size="mini" style="margin-bottom: 20px" @click="addSensitiveKeyword">新增</el-button>
      <el-table
        :data="tableData.sensitiveKeywordList"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="100"
          label="序号"
        />
        <el-table-column
          prop="sensitiveKeyword"
          label="敏感词"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
        />
        <el-table-column label="操作">
          <template
            slot-scope="scope"
          >
            <el-button
              type="text"
              size="small"
              @click.native.prevent="edit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deletes(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableData.total > 0"
        :limit.sync="formPage.pageSize"
        :page.sync="formPage.pageIndex"
        :total="Number(tableData.total)"
        @pagination="fetch"
      />
    </div>
    <Dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :fullscreen="!true"
      :before-close="close"
      width="30%"
    >
      <add v-if="dialog.visible" :dialog="dialog" @add="add" @close="close" />
    </Dialog>
  </div>
</template>

<script>
import Comment from '@/api/Comment'
import Pagination from '@/components/Pagination'
import { Dialog } from 'element-ui'
import add from './add'
export default {
  components: {
    Pagination,
    Dialog,
    add
  },
  data() {
    return {
      form: {
        enabled: 0,
        action: 1
      },
      formPage: {
        keyword: '',
        pagesize: 10,
        pageSize: 10,
        pageIndex: 1
      },
      tableData: {},
      dialog: {

      }
    }
  },
  created() {
    this.getSensitiveKeywordList()
  },
  methods: {
    async getSensitiveKeywordList() {
      const res = await Comment.getSensitiveKeywordList(this.formPage)
      const ob = res.data
      if (ob.code === 0) {
        this.tableData = ob.data
        Object.keys(this.form).forEach(item => {
          if ( ob.data.sensitiveKeywordList[0] && ob.data.sensitiveKeywordList[0][item] !== undefined) {
            this.form[item] = ob.data.sensitiveKeywordList[0][item]
          }
        })
      }
    },
    changeItem() {
      Comment.setSensitiveKeyword(this.form).then(res => {
        if (res.data.code === 0) {
          this.getSensitiveKeywordList()
        }
      })
    },
    addSensitiveKeyword() {
      this.dialog = {
        title: '新增',
        visible: true,
        info: {}
      }
    },
    add(keyword) {
      const _ = this
      const key = _.dialog.edit ? 'editSensitiveKeyword' : 'addSensitiveKeyword'
      if (_.dialog.edit) {
        keyword.id = _.dialog.info.id
      }
      Comment[key](Object.assign({}, _.form, keyword )).then(res => {
        if (res.data.code === 0) {
          _.getSensitiveKeywordList()
          _.$message.success(`${_.dialog.edit ? '修改' : '新增'}成功`)
          _.close()
        }
      })
    },
    close() {
      this.dialog = {}
    },
    fetch() {
      this.getSensitiveKeywordList()
    },
    reset() {
      this.formPage.keyword = ''
    },
    edit(item) {
      this.dialog = {
        title: '修改',
        visible: true,
        edit: true,
        info: item
      }
    },
    deletes(id) {
      const _ = this
      _.$confirm('确定要删除该条敏感词', `删除`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Comment.deleteSensitiveKeyword({ id }).then(res => {
          if (res.data.code === 0) {
            _.$message.success('删除成功')
            _.getSensitiveKeywordList()
          }
        })
      })
    }
  }
}
</script>

<style lang='less' scoped>
.sensitive_word_page {
  margin-top: 10px;
  background-color: #fff;
  height: calc(100% - 10px);
  padding: 20px 30px;
  .setting {
    height: 80px;
  }
}

/deep/ .el-form-item__label {
  text-align: left !important;
  font-weight: 400;
}
/deep/.el-form-item {
  margin-right: 50px;
}
/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      // text-align: center;
  }
  td {
    font-size: 14px;
    // text-align: center;
    color: #666666;
  }
}

/deep/ .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3A68F2;
    .el-dialog__title {
      font-size:24px;
      color: #fff;
    }
  }
}
</style>
