<template>
  <div class="flex flex-col gap-5px">
    <el-card body-class="flex">
      <el-button type="danger">批量移除</el-button>
      <el-button type="primary" @click="refresh">刷新</el-button>
      <search-input class="m-l-auto" placeholder="输入用户名" @submit="refresh" @reset="refresh" />
    </el-card>
    <el-card v-loading="refreshing" element-loading-text="正在加载">
      <paged-wrapper
        pagination-class="w-min"
        :num="20"
        :handle-request="(params) => getUserByClubId(id, params)"
        :converter="(raw) => raw.map(toUserInfoRender)"
        @change="onUsersChange"
        @load-complete="refreshing = false"
        v-slot="{ data }"
        ref="memberList"
      >
        <el-table :data="data" @selection-change="onUsersSelect">
          <el-table-column
            type="selection"
            :selectable="({ removing }: UserInfoRender) => !removing"
          />
          <el-table-column prop="id" label="序号" />
          <el-table-column prop="name" label="用户名" />
          <el-table-column label="权限组" v-slot="{ row }">
            {{ (row as UserInfoRender).clubAuth?.name ?? '无' }}
          </el-table-column>
          <el-table-column label="操作" :min-width="100" v-slot="{ row }">
            <div class="user-action-outer">
              <el-button
                type="danger"
                :loading="(row as UserInfoRender).removing"
                @click="remove(row)"
              >
                移除成员
              </el-button>
            </div>
          </el-table-column>
        </el-table>
      </paged-wrapper>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.user-action-outer {
  @apply flex flex-wrap gap-10px;
  .el-button {
    margin: 0;
  }
}
</style>
<script lang="ts">
type UserInfoRender = UserInfo & {
  removing: boolean;
};
const toUserInfoRender = (raw: UserInfo): UserInfoRender => ({ ...raw, removing: false });
</script>
<script setup lang="ts">
import { getUserByClubId, removeUserFromClub } from '@/api';
import { ref, useTemplateRef } from 'vue';
import PagedWrapper from '@/components/PagedWrapper.vue';
import type { UserInfo } from '@/schemas/response';
import { useUserStore } from '@/stores/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import SearchInput from '../SearchInput.vue';
const { id: clubId } = defineProps<{ id: number }>();
const userStore = useUserStore();
const refreshing = ref(true);
async function refresh() {
  refreshing.value = true;
  try {
    await memberListRef.value!.refresh();
  } finally {
    refreshing.value = false;
  }
}
const memberListRef = useTemplateRef('memberList');
const users = ref<UserInfoRender[]>([]);
const selectedUsers = ref<UserInfoRender[]>([]);
function onUsersChange(v: UserInfoRender[]) {
  console.log(v);
  users.value = v;
}
function onUsersSelect(v: UserInfoRender[]) {
  selectedUsers.value = v;
}
function remove(user: UserInfoRender) {
  ElMessageBox.confirm('确定移除该成员吗？', '警告', {
    type: 'warning',
  }).then(
    async () => {
      user.removing = true;
      try {
        if (!(await removeUserFromClub(user.id, clubId))) {
          return;
        }
        ElMessage.success('移除成功');
        await Promise.all([
          refresh(),
          userStore.userInfo!.id === user.id && userStore.updateSelfUserInfo(),
        ]);
      } finally {
        user.removing = false;
      }
    },
    () => {},
  );
}
</script>
