<template>
  <div class="layout-no-flex right-list-toolbar">
    <el-toolbar>
      <el-col :span="14">
        <span class="f16 tag-name">
          <i class="fa fa-tag"></i> 标签管理
        </span>
      </el-col>
      <el-col :span="10" class="search-box-r tool-search-box-r">
        <el-input v-model="search" placeholder="请输入名称" @keyup.enter.native="tagTreeFilter" class="search-bar-algin-toolbar"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="tagTreeFilter" title="搜索"></i></span>
      </el-col>
    </el-toolbar>
    <div>
      <el-table
        class="tag-table"
        :data-read-url="getData"
        ref="tagTable">
        <el-table-column label="标签名称" width="250">
          <template slot-scope="scope">
            <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(scope.row)">
              <i :class="scope.row.icon" aria-hidden="true"></i> {{scope.row.name}}
            </a>
          </template>
        </el-table-column>
        <el-table-column  label="代码" prop="code" align="left" width="200"></el-table-column>
        <el-table-column  label="插件名称" prop="pluginName" align="left" width="200"></el-table-column>
        <el-table-column  label="描述" prop="description" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: ''// 查询条件
    }
  },
  methods: {
    getData() {
      return ['/ui/tags', { params: {search: this.search} }]
    },
    tagTreeFilter() {
      this.$refs.tagTable.getData()
    },
    gotoDetailPage(row) {
      if (!row || !row.ID) {
        return
      }
      this.$router.push({path: `/settings/tag/${row.ID}`})
    }
  }
}
</script>

<style scope>
.tag-table .list-card-title {
    font-size: 14px;
}
.tag-name {
  font-weight: 600;

}
.tag-name i {
  color:#28B06E;
}
</style>
