<template>
  <VerticalFlexLayout>
    <template #static>
      <Breadcrumb />
    </template>

    <div class="content">
      <div class="toolbar">
        <el-button type="primary" @click="openEditDrawer()" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
          <template #icon>
            <el-icon>
              <PlusOutlined />
            </el-icon>
          </template>
          新建人员分组
        </el-button>
        <el-button color="#1890FF" plain @click="batchImportVisible = true" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
          <template #icon>
            <el-icon><DocumentAdd /></el-icon>
          </template>
          导入人员分组
        </el-button>
      </div>

      <div class="table-wrapper">
        <el-table :data="personGroupList" height="100%">
          <el-table-column label="分组名" prop="name" width="240" />
          <el-table-column label="分组描述" prop="description" min-width="200" />
          <el-table-column label="人员数量" prop="total" width="200" />
          <el-table-column label="创建人" prop="operatorName" width="240" />
          <el-table-column label="创建时间" prop="operationTime" width="240" />
          <el-table-column label="操作" width="250" fixed="right">
            <template #default="{ row }">
              <section class="actions">
                <el-button type="primary" link @click="openCheckDrawer(row)">查看</el-button>
                <el-button type="primary" link @click="openEditDrawer(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
                  编辑
                </el-button>
                <el-button type="primary" link @click="deleteGroup(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
                  删除
                </el-button>
              </section>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <section class="paginationPosition">
        <el-pagination
          background
          :layout="DEFAULT_PAGINATION_LAYOUT"
          :page-sizes="PAGE_SIZE_CONFIG"
          :total="total"
          v-model:page-size="personGroupListRequestParams.pageSize"
          v-model:current-page="personGroupListRequestParams.pageNumber"
          @change="queryPersonGroupList"
        />
      </section>
      <PersonGroupEditDrawer :title="drawerTitle" ref="editDrawerInstance" @submitted="onSubmit" />
      <PersonGroupExhibitionDrawer :title="drawerTitle" ref="exhibitionDrawerInstance" />
      <BatchImport
        :visible="batchImportVisible"
        :importApiUrl="importApiUrl"
        :templateUrl="templateUrl"
        :templateName="'导入创建分组模版'"
        responseType="simple"
        @close="handleClose"
        @update="handleUpdate"
      />
    </div>
  </VerticalFlexLayout>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { PlusOutlined } from '@vicons/antd';
  import { DocumentAdd } from '@element-plus/icons-vue';
  import { msgConfirm } from '@/utils/element-plus/messageBox';
  import { DEFAULT_PAGINATION_LAYOUT, PAGE_SIZE_CONFIG } from '@/constant/pagination';
  import { PERM_NOTICE } from '@/types/permission/constants';
  import { PersonGroupListItem } from '@/types/person-group/type';
  import usePersonGroupListQuery from './hooks/usePersonGroupListQuery';
  import PersonGroupEditDrawer from './components/PersonGroupEditDrawer.vue';
  import PersonGroupExhibitionDrawer from './components/PersonGroupExhibitionDrawer.vue';
  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
  import Breadcrumb from '@/components/Breadcrumb.vue';
  import { deleteUserGroup } from '@/api/system/person-group';
  import { BatchImport } from '@/components/batch-import';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';

  const { personGroupListRequestParams, personGroupList, total, queryPersonGroupList } = usePersonGroupListQuery();

  const drawerTitle = ref('');
  const editDrawerInstance = ref();
  const exhibitionDrawerInstance = ref();

  // 批量导入
  const batchImportVisible = ref(false);
  const { urlPrefix } = useGlobSetting();
  const importApiUrl = ref(urlJoin(urlPrefix, '/userGroup/importGroupUserList'));
  const templateUrl = ref('./skyeye-file-upload/sfysecurity/TEMPLATE/import-addUserGroup-template.xlsx');

  const handleUpdate = () => {
    // update 事件只用于更新数据，不关闭弹窗
    queryPersonGroupList();
  };

  const handleClose = () => {
    // close 事件用于关闭弹窗
    batchImportVisible.value = false;
  };

  function openEditDrawer(row?: PersonGroupListItem) {
    drawerTitle.value = row ? '编辑人员分组' : '新建人员分组';
    editDrawerInstance.value?.open(row);
  }

  function openCheckDrawer(row: PersonGroupListItem) {
    drawerTitle.value = '查看人员分组';
    exhibitionDrawerInstance.value?.open(row);
  }

  function deleteGroup(row: PersonGroupListItem) {
    msgConfirm('确认删除，删除后无法恢复，确认删除吗？', '提示', {
      type: 'warning',
    }).then(() => {
      deleteUserGroup(row.id)
        .then(() => {
          queryPersonGroupList();
          ElMessage.success('删除成功');
        })
        .catch((e) => {
          ElMessage.error(e);
        });
    });
  }

  const onSubmit = () => {
    queryPersonGroupList();
  };

  onMounted(() => {
    queryPersonGroupList();
  });
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .toolbar {
    margin-bottom: 20px;
    flex-shrink: 0;
  }

  .table-wrapper {
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  .paginationPosition {
    flex-shrink: 0;
    margin-top: 20px;
  }
</style>
