<template>
  <TableLayout
    :authorized="$hasPermissions(['system:icon:query'])"
  >
    <!-- 搜索表单 -->
    <template #search-form>
      <SearchForm class="window-search-form" ref="searchForm" :model="searchForm">
        <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"
            icon="Search"
            @click="search"
          >搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </template>
      </SearchForm>
    </template>
    <!-- 表格和分页 -->
    <template #table-wrap>
      <SearchTable
        v-loading="isWorking.search"
        :data="tableData.list"
        stripe
        :opera-permissions="['system:icon:update','system:menu:icon:delete']"
        :with-fullscreen="false"
        digest="前端可使用IconSelect组件进行图标选择，使用Icon组件进行展示。"
        @refresh="refresh"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <template
          v-if="$hasAnyPermissions([
            'system:icon:create',
            'system:icon:delete'
          ])"
          #toolbar
        >
          <el-button
            type="primary"
            v-permissions="['system:icon:create']"
            icon="Plus"
            @click="$refs.operaIconWindow.open('新建系统图标', searchForm.dictId)"
          >新建</el-button>
          <el-button
            v-permissions="['system:icon:create']"
            type="danger"
            icon="Delete"
            @click="deleteByIdInBatch"
          >删除</el-button>
        </template>
        <el-table-column type="selection" fixed="left" width="55"></el-table-column>
        <el-table-column label="预览" min-width="50px" fixed="left">
          <template #default="{ row }">
            <Icon :value="row.value" size="22px"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="图标名称" min-width="100px" fixed="left"></el-table-column>
        <el-table-column prop="value" label="图标值" min-width="160px"/>
        <el-table-column prop="creatorRealName" label="创建人" min-width="100px"/>
        <el-table-column prop="createdAt" label="创建时间" min-width="165px"/>
        <el-table-column prop="updaterRealName" label="更新人" min-width="100px"/>
        <el-table-column prop="updatedAt" label="更新时间" min-width="165px"/>
        <template
          v-if="$hasAnyPermissions([
            'system:icon:update',
            'system:icon:delete'
          ])"
          #buttons="{ row }"
        >
          <el-button
            type="primary"
            icon="EditPen"
            v-permissions="['system:icon:update']"
            @click="$refs.operaIconWindow.open(`编辑系统图标`, row)"
            link
          >编辑</el-button>
          <el-button
            type="danger"
            icon="Delete"
            v-permissions="['system:icon:delete']"
            @click="deleteById(row)"
            link
          >删除</el-button>
        </template>
      </SearchTable>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :pagination="tableData.pagination"
      />
    </template>
    <!-- 新建编辑窗口 -->
    <OperaIconWindow
      ref="operaIconWindow"
      @success="refresh"
    />
  </TableLayout>
</template>


<script>
import BaseTable from '@/components/base/BaseTable.vue'
import OperaIconWindow from '@/components/system/icon/OperaIconWindow'
export default {
  extends: BaseTable,
  components: {
    OperaIconWindow
  },
  data () {
    return {
      // 搜索
      searchForm: {
        name: '',
        category: ''
      }
    }
  },
  async created () {
    this.config({
      module: '系统图标',
      'field.main': 'name',
      api: await import('@/api/system/icon'),
      sorts: []
    })
    this.search()
  }
}
</script>
