<template>
  <div>
    <!-- 展示所有当前用户可打开的应用程序，包含图标和名称及各应用的角色 -->
    <div class="flex flex-wrap gap-4">
      <el-card
        v-for="item in appList"
        :key="item.id"
        shadow="hover"
        class="width-200px"
        @click="handleAppClick(item)"
      >
        <!-- card body -->
        <el-image :src="item.clientLogo" fit="fill" :lazy="true" style="width: 180px" />
        <div class="cutout-text">{{ item.clientName }}</div>

        <template #footer v-if="item.clientDescription">
          <div class="text-14px text-gray-400">{{ item.clientDescription }}</div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup name="Home">
import { getAppList } from '@/api/platform/index.js'

const appList = ref([])

onMounted(() => {
  getAppList({
    pageNo: 1,
    pageSize: -1,
    isCurrentUser: true
  }).then((res) => {
    appList.value = res || []
  })
})

function handleAppClick(item) {
  window.open(item.redirectUri, '_blank')
}
</script>

<style lang="scss" scoped>
::v-deep(.el-card__body) {
  background-color: #001529;
  padding: 5px;
  text-align: center;
}

.cutout-text {
  position: relative;
  font-size: 40px;
  font-weight: bold;
  -webkit-text-stroke: 1px #9a9acc;
  color: #001529;
  &::before {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
    mix-blend-mode: multiply;
  }
  &::after {
    content: '';
    position: absolute;
    left: -75%;
    top: 0;
    width: 200%;
    height: 100%;
    background: radial-gradient(circle, #fff, #000 50%);
    background-size: 25% 30%;
    mix-blend-mode: color-dodge;
    animation: mix 4s linear infinite;
    background-repeat: repeat;
  }
}
@keyframes mix {
  to {
    transform: translateX(25%);
  }
}
</style>
