<template>
  <el-card v-loading="!club" element-loading-text="正在加载" class="min-h-200px">
    <template #header>
      <h4>编辑社团资料</h4>
    </template>
    <template v-if="club">
      <div class="flex justify-center">
        <div class="grid gap-15px">
          <el-form :model="data" :rules="rules" ref="form">
            <el-form-item prop="name" label="社团名称">
              <el-input v-model="data.name" />
            </el-form-item>
            <el-form-item prop="commit" label="社团简介">
              <el-input type="textarea" v-model="data.commit" />
            </el-form-item>
          </el-form>
          <div class="flex flex-col gap-15px items-center">
            <club-avatar :avatar="club.avatar" :size="100" />
            <el-upload :show-file-list="false" :http-request="upload">
              <template #trigger>
                <el-link type="primary" :icon="Upload" :disabled="uploading" :underline="false">
                  上传头像
                </el-link>
              </template>
            </el-upload>
          </div>
          <div class="col-span-2 text-center">
            <el-button type="primary" @click="submit" :loading="submitting">修改信息</el-button>
          </div>
        </div>
      </div>
    </template>
  </el-card>
</template>
<style lang="scss" scoped>
.el-divider {
  margin: 15px 0;
}
</style>
<script lang="ts">
export const minClubNameLength = 2;
</script>
<script setup lang="ts">
import {
  changeClubAvatar,
  changeClubCommit,
  changeClubName,
  getClubById,
  patchRequest,
  uploadAvatar,
  validateAvatarFile,
} from '@/api';
import type { Club } from '@/schemas/response';
import { Upload } from '@element-plus/icons-vue';
import { ElMessage, type FormRules, type UploadRequestHandler } from 'element-plus';
import { pick } from 'lodash-es';
import { reactive, ref, useTemplateRef } from 'vue';
import ClubAvatar from './ClubAvatar.vue';
const { id } = defineProps<{ id: number }>();
const club = ref<Club>();
const data = ref({
  name: '',
  commit: '',
});
const rules = reactive<FormRules<typeof data>>({
  name: [
    { required: true, message: '请输入社团名' },
    { min: minClubNameLength, message: `社团名长度不能小于${minClubNameLength}位` },
  ],
});
const formRef = useTemplateRef('form');
const uploading = ref(false);
const upload: UploadRequestHandler = async ({ file }) => {
  if (!validateAvatarFile(file)) return;
  uploading.value = true;
  try {
    const uploadResp = await uploadAvatar(file);
    if (!uploadResp) return;
    if (!(await changeClubAvatar(id, uploadResp.data))) return;
    ElMessage.success('社团头像修改成功');
    await refresh();
  } finally {
    uploading.value = false;
  }
};
const submitting = ref(false);
async function submit() {
  try {
    await formRef.value!.validate();
  } catch {
    return;
  }
  submitting.value = true;
  const res = await patchRequest(data.value, club.value!, {
    name: (name) => changeClubName(id, name),
    commit: (commit) => changeClubCommit(id, commit),
  });
  if (res === 'succeed') {
    await refresh();
    ElMessage.success('修改成功');
  }
  submitting.value = false;
}
async function refresh() {
  club.value = await getClubById(id);
  if (!club.value) return;
  data.value = pick(club.value, ['name', 'commit']);
}
refresh();
</script>
