<template>
  <div class="flex justify-between box">
    <div class="item">
      <img :src="getIconPath(props.icon)" class="icon" />
      <div class="info">
        <div class="name">{{ props.name }}</div>
        <div class="intro">
          {{ props.intro }}
        </div>
      </div>
    </div>
    <div>
      <el-switch :active-value="1" :inactive-value="0" v-model="isOpen" v-if="props.showSwitch" />
    </div>
  </div>
</template>

<script setup>
import defaultIcon from "@/assets/logo.png";

const props = defineProps({
  icon: {
    type: String,
    defautl: "",
  },
  name: {
    type: String,
    default: "",
  },
  intro: {
    type: String,
    default: "",
  },
  showSwitch: {
    type: Boolean,
    default: false,
  },
});

const isOpen = defineModel("isOpen", {
  type: [Boolean, String, Number],
  default: false,
});

// 动态获取PNG图标路径
const getIconPath = (iconName) => {
  try {
    // 直接导入对应PNG文件
    return new URL(`/src/assets/applocation/${iconName}.png`, import.meta.url).href;
  } catch (error) {
    console.warn(`图标 ${iconName}.png 不存在`);
    return defaultIcon; // 图标不存在时使用默认图标
  }
};
</script>

<style scoped lang="scss">
.box {
  padding: 10px;
  border-radius: 4px;
  background-color: #f8f8f8;
  transition: all 0.1s ease-in-out;
}
.item {
  display: flex;
  align-items: center;

  // &:hover {
  //   cursor: pointer;
  //   background-color: #d5ebff;
  // }

  .icon {
    width: 48px;
    height: 48px;
    margin-right: 10px;
  }

  .info {
    .name {
      font-size: 14px;
    }

    .intro {
      margin-top: 4px;
      font-size: 14px;
      color: #666;
      line-height: 1.4em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
      white-space: normal;
    }
  }
}
</style>
