<template>
  <a-card class="general-card" title="我的仓库">
    <template #extra>
      <a-link @click="$router.push('/repos/list')">查看更多</a-link>
    </template>
    <a-row :gutter="16">
      <a-col v-for="(item, index) in repos" :key="index" :xs="12" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
        <a-card class="card" hoverable  @click="$router.push(`/repos/detail/${item.id}`)">
          <a-skeleton v-if="loading" :loading="loading" :animation="true">
            <a-skeleton-line :rows="3" />
          </a-skeleton>
          <div v-else>
            <a-avatar shape="square" :size="45" class="logo">
              <img alt="" src="@/assets/repo.svg" v-if="!item.logo" />
              <img alt="" :src="item.logo" v-else />
            </a-avatar>
            <div class="right">
              <div class="name">{{ item.name }}</div>
              <div class="info">
                <div>
                  创建时间：{{ stramptoTime(item.create_time) }}
                </div>
                <div>
                  更新时间：{{ stramptoTime(item.update_time) }}
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script setup>
import { Notification } from '@arco-design/web-vue'
import { ref } from 'vue'
import { GetRepos } from '@/api/user'

const loading = ref(false)
const repos = ref([])

const GetRepo = async () => {
  try {
    loading.value = true
    const res = await GetRepos()
    if (!res || res.code !== 0)
      return Notification.error({
        title: '获取仓库列表失败！',
        content: res?.msg ?? '请稍后再试'
      })
    repos.value = res.data
  } catch (error) {
    Notification.error({
      title: '获取仓库列表失败！',
      content: error.message || '请稍后再试'
    })
  } finally {
    loading.value = false
  }
}
GetRepo()

const stramptoTime = (time) => {
  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
}

</script>

<style scoped lang="less">
.general-card {
  border-radius: 5px;
}

:deep(.arco-card-body) {
  min-height: 128px;
  padding-bottom: 0;
}

.card {
  margin-bottom: 15px;
  height: 130px;
  display: flex;
  border-radius: 3px;
  cursor: pointer;

  .logo {
    user-select: none;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .right {
    margin-left: 60px;
    margin-top: 10px;

    .name {
      font-size: 1.2em;
      font-weight: 550;
    }

    .info {
      color: #666;
      margin-top: 10px;
      font-size: 0.9em;
    }
  }

}
</style>
