<template>
  <div>
    <div v-show="!showDetailPage">
      <el-toolbar>
        <el-button @click="addHotWordKindsClickHandler">
          <i class="fa fa-plus"></i>新建
        </el-button>
      </el-toolbar>
      <div class="search-bar search-bar-table">
        <el-col class="tree-search-box">
          <el-input placeholder="请输入分类名称" v-model="searchHotWordKinds.kinds" @keyup.enter.native="searchHotWordKindsClickHandler" class="search-input-with-select"></el-input>
          <span class="search-icon"><i class="fa fa-search" slot="append" @click="searchHotWordKindsClickHandler" title="查询"></i></span>
        </el-col>
      </div>
      <div>
        <el-table ref="refHotWordKindsTable" :data="hotWordKindsTable" :data-read-url="hotWordKindsTableList" :page-size="10" :auto-get-data="false" tooltip-effect="dark" @selection-change="onSelectionHotWordKindsChange">
          <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
          <el-table-column prop="kinds" label="热词分类">
            <template slot-scope="scope">
              <a href="javascript:void(0)" @click.stop="gotoDetailPage(scope.row)">{{scope.row.kinds}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="addUser" label="添加人"></el-table-column>
          <el-table-column prop="addTime" label="添加时间"></el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-button @click.stop="edit(scope.row)" type="text" title="编辑">
                <i class="fa fa-edit f16"></i></el-button>
              <el-button @click.stop="del(scope.row)" type="text" title="删除">
                <i class="fa fa-times f16"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--详细页-->
    <hot-word-tabs :kind-id="kindId" :kind-name="kindName" :show.sync="showDetailPage" ref="hotWordTabs"></hot-word-tabs>
    <hot-kinds-dialog :add-hot-word-kinds-dialog.sync="addHotWordKindsDialog" :tmp-hot-word-kinds="tmpHotWordKinds" @callback="init"></hot-kinds-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import hotWordKindsDialog from './hotWordKindsDialog.vue'
import hotWordTabs from './hotWordTabs.vue'

export default {
  components: {
    'hot-kinds-dialog': hotWordKindsDialog,
    'hot-word-tabs': hotWordTabs
  },

  data() {
    return {
      selectedRows: [],

      // 热词分类列表
      hotWordKindsTable: [],

      // 热词分类新建、编辑对话框
      addHotWordKindsDialog: false,

      // 热词分类form表单定义
      tmpHotWordKinds: {
        kinds: ''
      },

      // 热词分类搜索
      searchHotWordKinds: {
        kinds: ''
      },

      kindId: 0,
      showDetailPage: false,
      kindName: ''
    }
  },

  methods: {
    // 新建热词分类事件
    addHotWordKindsClickHandler() {
      this.tmpHotWordKinds = {
        kinds: ''
      }
      this.addHotWordKindsDialog = true
    },

    edit(row) {
      this.tmpHotWordKinds = Object.assign({}, row)
      this.addHotWordKindsDialog = true
    },

    // 删除热词分类事件
    async batchDel() {
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let ids = []
        this.selectedRows.forEach(function (row) {
          ids.push(row.ID)
        })
        let strIds = ids.join(',')
        let res = await axios.delete(`/ui/hotwordkinds/${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.selectedRows = [row]
      this.batchDel()
    },

    // 热词分类数据加载
    hotWordKindsTableList() {
      return ['/ui/hotwordkinds', {
        params: {
          category: encodeURIComponent(this.searchHotWordKinds.kinds)
        }
      }]
    },

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

    // 热词分类搜索事件
    searchHotWordKindsClickHandler() {
      this.init()
    },

    // 热词分类数据选中事件
    onSelectionHotWordKindsChange(selection) {
      this.selectedRows = selection
      if (selection.length > 0) {
        this.$emit('callback', selection[0].ID)
      } else if (selection.length === 0) {
        this.$emit('callback', 0)
      }
    },

    gotoDetailPage(row) {
      this.kindId = row.ID
      this.kindName = row.kinds
      this.showDetailPage = true
    }
  }
}
</script>
