<!-- 
    TODO 系统管理 / 数据权限列表
 -->
<template>
  <el-main class="data-permission-list">
    <el-form
      ref="dataPermissionListFormRef"
      :model="dataPermissionListParams"
      inline
    >
      <el-form-item
        prop="permissionName"
        class="permission-search"
      >
        <el-input
          v-model="dataPermissionListParams.permissionName"
          clearable
          placeholder="权限名称"
        />
      </el-form-item>
      <!-- <el-form-item
        prop="menuId"
        class="permission-search"
      >
        <BaseSelect
          v-model:modelValue="dataPermissionListParams.menuId"
          clearable
          :options="menuList"
          placeholder="菜单名称"
        />
      </el-form-item> -->
      <el-form-item
        prop="entityName"
        class="permission-search"
      >
        <el-input
          v-model="dataPermissionListParams.entityName"
          clearable
          placeholder="实体名"
        />
      </el-form-item>
      <el-form-item
        prop="tableName"
        class="permission-search"
      >
        <el-input
          v-model="dataPermissionListParams.tableName"
          clearable
          placeholder="表名"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="dataPermissionListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          class="reset-btn"
          :icon="RefreshRight"
          :loading="dataPermissionListState.loading"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:dataPermission:add']"
          type="success"
          :icon="Plus"
          plain
          @click="hanleAdd"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="dataPermissionListOptions"
      ref="dataPermissionListTableRef"
    >
      <!-- 菜单 -->
      <template #menuId="{ row }">
        {{ deal_FindItemName(row.menuId, menuList) }}
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="dataPermissionActionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="dataPermissionListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="dataPermissionListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataPermissionListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 添加/编辑数据权限 -->
  <DataPermissionAdd
    ref="dataPermissionAddRef"
    :menu-list="menuList"
    @save-confirm="hanleSaveConfirm"
  />
</template>
<script lang="ts" setup name="dataPermission">
import { Search, RefreshRight, Plus } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import {
  useDataPermission,
  useDataPermissionModel
} from "@/composables/dataPermission/useDataPermission";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import DataPermissionAdd from './dataPermissionAdd.vue';
import { deal_FindItemName } from "@/utils/dealFindData";

const { dataPermissionListOptions, dataPermissionActionOptions } =
  useDataPermissionModel();
//   初始化表格高度
useInitTableHeight(dataPermissionListOptions);
const {
  dataPermissionListState,
  dataPermissionListParams,
  dataPermissionListFormRef,
  dataPermissionAddRef,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  hanleAdd,
  handleClickChange,
  hanleSaveConfirm,
  menuList
} = useDataPermission(dataPermissionListOptions);
</script>
<style lang="scss" scoped>
.data-permission-list {
  .permission-search {
    width: 156px;
    margin-right: 11px;
  }
}
</style>
