<template>
  <TableLayout
    :authorized="$hasPermissions([`cms:resource:group:query`])"
    :fullscreen="fullscreen"
  >
    <!-- 表格和分页 -->
    <template #table-wrap>
      <SearchTable
        v-loading="isWorking.search"
        :data="tableData.list"
        v-model:fullscreen="fullscreen"
        buttons-width="245px"
        @selection-change="handleSelectionChange"
        @refresh="refresh"
      >
        <template
          v-if="$hasAnyPermissions([
            'cms:resource:group:create',
            'cms:resource:group:delete'
          ])"
          #toolbar
        >
          <el-button
            v-permissions="['cms:resource:group:create']"
            type="primary"
            icon="Plus"
            @click="$refs.operaResourceGroupWindow.open('新建资源组')"
          >新建资源组</el-button>
          <el-button
            v-permissions="['cms:resource:group:delete']"
            type="danger"
            icon="Delete"
            @click="deleteByIdInBatch"
          >删除</el-button>
        </template>
        <el-table-column type="selection" fixed="left" width="55"/>
        <el-table-column prop="uid" label="唯一标识" min-width="100px"/>
        <el-table-column prop="name" label="组名" min-width="100px"/>
        <el-table-column prop="supportedTypes" label="资源类型" min-width="150px">
          <template #default="{ row }">
            <TagCellValue :data="getDictLabels(row.supportedTypes, 'RESOURCE_TYPES')"/>
          </template>
        </el-table-column>
        <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:resource:query',
            'cms:resource:group:update',
            'cms:resource:group:delete'
          ])"
          #buttons="{ row }"
        >
          <el-button
            type="primary"
            v-permissions="['cms:resource:query']"
            @click="$refs.resourceManageWindow.open(row)"
            link
          >管理资源</el-button>
          <el-button
            type="primary"
            icon="EditPen"
            v-permissions="['cms:resource:group:update']"
            @click="$refs.operaResourceGroupWindow.open(`编辑${row.name}`, row)"
            link
          >编辑</el-button>
          <el-button
            type="danger"
            icon="Delete"
            v-permissions="['cms:resource:group:delete']"
            @click="deleteById(row)"
            link
          >删除</el-button>
        </template>
      </SearchTable>
      <pagination
        :pagination="tableData.pagination"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </template>
    <!-- 新建编辑窗口 -->
    <OperaResourceGroupWindow
      ref="operaResourceGroupWindow"
      @success="refresh"
    />
    <!-- 管理资源窗口 -->
    <ResourceManageWindow ref="resourceManageWindow"/>
  </TableLayout>
</template>

<script>
import BaseTable from '@/components/base/BaseTable'
import OperaResourceGroupWindow from '@/components/cms/resource/OperaResourceGroupWindow'
import ResourceManageWindow from '@/components/cms/resource/ResourceManageWindow'
import { deleteById, deleteByIdInBatch } from '@/api/cms/resource.group'

export default {
  extends: BaseTable,
  components: { ResourceManageWindow, OperaResourceGroupWindow },
  methods: {
    /**
     * 删除（点击行操作/删除时触发）
     *
     * @param row 行对象
     * @param childConfirm 删除子节点时是否进行二次确认
     */
    deleteById (row, childConfirm = true) {
      let message = `确认删除${this.module}【${row[this.configData['field.main']]}】吗?`
      if (row[this.configData['field.main']] == null) {
        message = `确认删除该${this.module}吗？`
      }
      if (childConfirm && row.children != null && row.children.length > 0) {
        message = `确认删除${this.module}【${row[this.configData['field.main']]}】及其子${this.module}吗?`
        if (row[this.configData['field.main']] == null) {
          message = `确认删除该${this.module}及其子${this.module}吗？`
        }
      }
      this.$dialog.deleteConfirm(message)
        .then(() => {
          this.isWorking.delete = true
          return deleteById(row[this.configData['field.id']])
        })
        .then(() => {
          this.__afterDelete()
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.delete = false
        })
    },
    /**
     * 批量删除（点击批量删除时触发）
     */
    deleteByIdInBatch () {
      if (this.tableData.selectedRows.length === 0) {
        this.$tip.warning('请至少选择一条数据')
        return
      }
      this.$dialog.deleteConfirm(`确认删除已选中的 ${this.tableData.selectedRows.length} 条资源组及组下所有资源吗?`)
        .then(() => {
          this.isWorking.delete = true
          return deleteByIdInBatch(this.tableData.selectedRows.map(row => row.id).join(','))
        })
        .then(() => {
          this.__afterDelete(this.tableData.selectedRows.length)
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.delete = false
        })
    }
  },
  async created () {
    this.config({
      module: '资源组',
      api: await import('@/api/cms/resource.group')
    })
    this.search()
  }
}
</script>
