<template>
  <div :class="`enter-item flx-col relative ${edit ? 'is-edit' : ''} ${size ? size : ''}`" @click="toRouter">
    <el-badge :value="badge" :class="ifDisableCls">
      <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" :class="ifDisableCls" 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 { computed } from "vue";
import { isString } from "@/utils/is";
import { useUserStore } from "@/stores/modules/user";
import { ElMessage } from "element-plus";

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

const props = withDefaults(defineProps<QuickEnterItemProps>(), {
  icon: "",
  name: "",
  badge: "",
  edit: false,
  funid: 0
});

const { userInfo } = useUserStore();

const ifDisableCls = computed(() => {
  return userInfo?.rsltFunids && props.funid > 0 && !userInfo?.rsltFunids.includes(props.funid) ? "is-disabled" : "";
});

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 = () => {
  if (ifDisableCls.value) {
    ElMessage.error("你暂无相关权限值");
    return;
  }
  emit("toclick");
};
</script>

<style lang="scss" scoped>
.is-disabled {
  cursor: not-allowed !important;
  opacity: 0.5;
}
</style>
