<script setup lang="ts">
import { usePermGroup } from "./permGroup";
const {
  actionButtons,
  dlgShow,
  dlgTitle,
  editFormColumns,
  editFormData,
  editFormRules,
  handleAdd,
  handleRowClick,
  handleSave,
  handleSearch,
  searchFormColumns,
  searchFormData,
  selectedGroupId,
  tableColumns,
  tableData
} = usePermGroup();
import PermGroupApi from "./permGroupApi.vue";
defineOptions({
  name: "IsvPermPermGroup"
});
</script>
<template>
  <el-card shadow="never">
    <el-container>
      <el-aside width="300px">
        <template #header>
          <PlusSearch
            v-model="searchFormData"
            :columns="searchFormColumns"
            :show-number="2"
            label-position="right"
            :has-reset="false"
            @search="handleSearch"
          />
        </template>
        <PlusTable
          :columns="tableColumns"
          :table-data="tableData"
          :action-bar="{ buttons: actionButtons, width: 100 }"
          adaptive
          @row-click="handleRowClick"
        >
          <template #title>
            <el-button type="primary" @click="handleAdd">新增</el-button>
          </template>
        </PlusTable>
        <PlusDialogForm
          v-model:visible="dlgShow"
          v-model="editFormData"
          :dialog="{ title: dlgTitle }"
          :form="{
            columns: editFormColumns,
            rules: editFormRules,
            labelWidth: '100px',
            labelPosition: 'right'
          }"
          :hasErrorTip="false"
          @confirm="handleSave"
        />
      </el-aside>
      <el-main>
        <el-card v-show="selectedGroupId > 0" shadow="never">
          <template #header>
            <div class="card-header">
              <span>组权限</span>
            </div>
          </template>
          <PermGroupApi />
        </el-card>
      </el-main>
    </el-container>
  </el-card>
</template>
