<template>
  <div :class="`enter-item flx-col relative ${edit ? 'is-edit' : ''} ${size ? size : ''}`" @click="toRouter">
    <el-badge :value="badge">
      <div class="icon">
        <img v-if="isString(icon) && ifimage(icon)" :src="getAssetUrl(icon)" />
        <i v-else class="iconfont" :class="icon"></i>
      </div>
    </el-badge>
    <span class="title break-word text-body-m mle" v-if="name">
      {{ name }}
    </span>
    <template v-if="edit">
      <el-button class="edit-btn" type="danger" plain circle size="small" @click="toDelect">
        <template #icon>
          <i class="iconfont iconwrong_light"></i>
        </template>
      </el-button>
    </template>
  </div>
</template>

<script setup lang="ts" name="home_quick_enter_item">
import { isString } from "@/utils/is";

interface QuickEnterItemProps {
  /**
   * @argument string 图标
   */
  icon?: string;
  name?: string;
  /**
   * @argument string 微章
   */
  badge?: string;
  edit?: boolean;
  size: "small" | "default" | "large" | "" | undefined;
}

withDefaults(defineProps<QuickEnterItemProps>(), {
  icon: "",
  name: "",
  badge: "",
  edit: false
});

const ifimage = (icon: string) => {
  const regex = /\.(png|jpg|svg|gif|jpeg|webp|bmp)$/i;
  return regex.test(icon);
};

const getAssetUrl = (path: string) => {
  return new URL(`/src/assets/images/${path}`, import.meta.url).href;
};

const emit = defineEmits(["todelect", "toclick"]);
const toDelect = () => {
  emit("todelect");
};
const toRouter = () => {
  emit("toclick");
};
</script>
