<template>
  <GlobalWindow
    title="文章标签管理"
    width="1000px"
    v-model:visible="visible"
    :with-footer="false"
    :wrapper-closable="true"
    :close-on-press-escape="true"
  >
    <TableLayout
      :authorized="$hasPermissions([`cms:article:tag:query`])"
      :fullscreen="fullscreen"
    >
      <!-- 搜索表单 -->
      <template #search-form>
        <SearchForm ref="searchForm" :model="searchForm" :collapse="false">
          <el-form-item label="标签名" prop="name">
            <el-input v-model="searchForm.name" v-trim placeholder="请输入标签名" @keypress.enter="search"/>
          </el-form-item>
          <template #buttons>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </SearchForm>
      </template>
      <!-- 表格和分页 -->
      <template #table-wrap>
        <SearchTable
          v-loading="isWorking.search"
          :data="tableData.list"
          :with-fullscreen="false"
          @selection-change="handleSelectionChange"
          @refresh="refresh"
        >
          <template
            v-if="$hasAnyPermissions([
              'cms:article:tag:create',
              'cms:article:tag:delete'
            ])"
            #toolbar
          >
            <el-button
              v-permissions="['cms:article:tag:create']"
              type="primary"
              icon="Plus"
              @click="$refs.operaArticleTagWindow.open('新建标签')"
            >新建</el-button>
            <el-button
              v-permissions="['cms:article:tag:delete']"
              icon="Delete"
              @click="deleteByIdInBatch"
            >删除</el-button>
          </template>
          <el-table-column prop="name" label="标签名" min-width="100px"/>
          <el-table-column prop="creatorRealName" label="创建人" min-width="100px"/>
          <el-table-column prop="createdAt" label="创建时间" min-width="185px"/>
          <el-table-column prop="updaterRealName" label="更新人" min-width="100px"/>
          <el-table-column prop="updatedAt" label="更新时间" min-width="185px"/>
          <template
            v-if="$hasAnyPermissions([
              'cms:article:tag:update',
              'cms:article:tag:delete'
            ])"
            #buttons="{ row }"
          >
            <el-button
              v-permissions="['cms:article:tag:update']"
              type="primary"
              icon="EditPen"
              link
              @click="$refs.operaArticleTagWindow.open(`编辑${row.name}`, row)"
            >编辑</el-button>
            <el-button
              v-permissions="['cms:article:tag:delete']"
              type="danger"
              icon="Delete"
              link
              @click="deleteById(row)"
            >删除</el-button>
          </template>
        </SearchTable>
        <pagination
          :pagination="tableData.pagination"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </template>
      <!-- 新建编辑窗口 -->
      <OperaArticleTagWindow
        ref="operaArticleTagWindow"
        @success="refresh"
      />
    </TableLayout>
  </GlobalWindow>
</template>

<script>
import BaseTable from '@/components/base/BaseTable'
import OperaArticleTagWindow from '@/components/cms/article/OperaArticleTagWindow'

export default {
  name: 'ArticleTagManageWindow',
  extends: BaseTable,
  components: { OperaArticleTagWindow },
  data () {
    return {
      visible: false,
      // 搜索
      searchForm: {
        name: ''
      }
    }
  },
  methods: {
    /**
     * 打开窗口
     *
     * @param dictId 字典ID
     * @param dictName 字典名称
     */
    open (dictId, dictName) {
      this.searchForm.dictId = dictId
      this.dictName = dictName
      this.visible = true
      this.search()
    },
  },
  async created () {
    this.config({
      module: '标签',
      api: await import('@/api/cms/article.tag')
    })
  }
}
</script>
