<script lang="ts" setup>
/**
 * @Name: InfoCard.vue
 * @Description: 店铺信息卡片
 * @Author: Cheney
 */

import { inject, ref, Ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElCard, ElCol, ElDescriptions, ElIcon, ElRow } from 'element-plus';
import { GoodsFilled, Picture as IconPicture, Search, Shop } from '@element-plus/icons-vue';


const router = useRouter();
const cardData = inject<Ref>('cardData', ref({}));

function handleNavigate(item: any) {
  router.push({
    path: '/shop/platform/detail',
    query: { platform: item.platform }
  });
}

function getImageSrc(platform: string) {
  try {
    return new URL(`/src/assets/platformImg/${ platform }.png`, import.meta.url).href;
  } catch (error) {
    // 如果图片不存在，返回一个默认图片
    return new URL(`/src/assets/platformImg/default.png`, import.meta.url).href;
  }
}

</script>

<template>
  <el-row :gutter="20">
    <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="8" :sm="8" :xl="4" :xs="12" class="my-2.5">
      <el-card body-style="padding: 0px 10px 0px 10px" shadow="hover">
        <el-descriptions>
          <template #title>
            <el-image :src="getImageSrc(item.platform)" class="my-2.5 rounded-2xl" fit="contain" style="width: 60px; height: 60px">
              <template #error>
                <div class="flex justify-center items-center" style="width: 60px; height: 60px; font-size: 4rem">
                  <el-icon>
                    <icon-picture/>
                  </el-icon>
                </div>
              </template>
            </el-image>
            <div class="text-xl mb-2">{{ item.platform }}</div>
            <hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
          </template>
        </el-descriptions>
        <div class="flex justify-evenly mb-2.5">
          <div>
            <el-icon style="top: 2px; margin-right: 6px; font-size: 1.2rem">
              <Shop/>
            </el-icon>
            <span class="font-medium text-lg mr-2">店铺</span>
            <span class="font-medium text-xl italic">
              {{ item.countShop }}
            </span>
          </div>
          <div>
            <el-icon style="top: 2px; margin-right: 5px; font-size: 1.2rem">
              <GoodsFilled/>
            </el-icon>
            <span class="font-medium text-lg mr-2">公司</span>
            <span class="font-medium text-xl italic">
              {{ item.countCompany }}
            </span>
          </div>
        </div>
        <template #footer>
          <div style="text-align: center; padding: 0 10px">
            <el-button :icon="Search" plain round style="width: 100%" type="primary" @click="handleNavigate(item)">查看详情</el-button>
          </div>
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
:deep(.el-descriptions__header .el-descriptions__title) {
  flex: 1;
  text-align: center;
}

:deep(.el-card__footer) {
  border-top: none;
  padding: 0 0 10px 0;
}
</style>
