<script setup lang="ts">
import { NButton, NCard, NGrid, NGridItem, NInput } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import OssImageUpload from '@/components/common/oss-image-upload/index.vue'
import { PublishStatus } from '@/enum/business'

const props = defineProps<{ isEdit: boolean, teams: Array<Api.Competition.TeamListRecord>, publishStatus: number }>()
const emit = defineEmits(['enterEdit', 'save', 'cancel'])

const localTeams = ref<Array<Api.Competition.TeamListRecord>>([])

/** 同步父组件队伍列表到本地数据 */
function syncTeams(list: Array<Api.Competition.TeamListRecord>) {
  localTeams.value = Array.isArray(list) ? list : []
}

watch(() => props.teams, val => syncTeams(val || []), { immediate: true, deep: true })

/** 是否显示编辑按钮 */
const showEnterEditButton = computed(() => {
  return !props.isEdit && [PublishStatus.Unpublished, PublishStatus.Published].includes(props.publishStatus)
})

/** 是否显示保存/取消按钮 */
const showEditActions = computed(() => props.isEdit)

defineExpose({ localTeams })
</script>

<template>
  <NCard :bordered="false" class="rounded-xl shadow-sm">
    <div class="mb-5 flex items-center justify-between border-l-4 border-green-500 pl-3">
      <span class="text-lg text-gray-800 font-bold">参与队伍</span>
      <div class="flex gap-2">
        <NButton v-if="showEnterEditButton" size="small" type="primary" secondary @click="emit('enterEdit')">
          编辑
        </NButton>
        <template v-else-if="showEditActions">
          <NButton size="small" secondary @click="emit('cancel')">
            取消
          </NButton>
          <NButton size="small" type="primary" @click="emit('save')">
            保存
          </NButton>
        </template>
      </div>
    </div>

    <NGrid :x-gap="16" :y-gap="16" cols="1 m:2 l:4" responsive="screen">
      <NGridItem v-for="(item, i) in localTeams" :key="i">
        <div
          class="relative border rounded-lg bg-gray-50 p-4 transition-all"
          :class="isEdit ? 'border-blue-200 bg-white' : 'border-transparent hover:shadow-md'"
        >
          <div class="mb-3 inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-600 font-bold">
            TEAM {{ String(i + 1).padStart(2, '0') }}
          </div>

          <div class="flex items-center gap-3">
            <template v-if="isEdit">
              <OssImageUpload
                v-model="item.HeadImg"
                variant="mini"
                class="h-10 w-10 shrink-0"
              />
              <div class="min-w-0 flex-1">
                <NInput v-model:value="item.Name" size="small" placeholder="输入队伍名称" class="mb-2 font-bold" />
                <NInput v-model:value="item.PenSerial" size="tiny" disabled placeholder="输入编号" class="font-mono" />
              </div>
            </template>

            <template v-else>
              <div v-if="item.HeadImg" class="h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-gray-200">
                <img :src="item.HeadImg" class="h-full w-full object-cover" alt="team-logo">
              </div>
              <div class="min-w-0 flex-1">
                <h4 class="m-0 mb-1 truncate text-base text-gray-800 font-bold">
                  {{ item.Name || '未命名队伍' }}
                </h4>
                <p class="m-0 truncate text-xs text-gray-400 font-mono">
                  {{ item.PenSerial || '—' }}
                </p>
              </div>
            </template>
          </div>
        </div>
      </NGridItem>
    </NGrid>
  </NCard>
</template>
