<template>
  <div class="app-container">
    <div class="title">应用中心</div>
    <div class="list">
      <div class="item" v-for="item in list" :key="item.id" @click="to(item)">
        <img :src="item.icon" class="icon" />
        <div class="info">
          <div class="name">{{ item.name }}</div>
          <div class="intro">
            {{ item.desc }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import bear from "@/assets/images/application/bear.png";
import song from "@/assets/images/application/song.png";
import ad from "@/assets/images/application/ad.png";
import call from "@/assets/images/application/call.png";

const list = ref([
  { name: "存酒", icon: bear, path: "storingWine", desc: "用户未喝完的酒可暂存在店里" },
  // { name: "点歌", icon: song, path: "song", desc: "用户可以付费点歌" },
  // { name: "广告", icon: ad, path: "advertisement", desc: "添加弹窗广告" },
  { name: "叫号", icon: call, path: "lineUplist", desc: "" },
]);

const router = useRouter();

const to = (item) => {
  router.push("/application/" + item.path);
};
</script>

<style scoped lang="scss">
.title {
  font-size: 24px;
  font-weight: bold;
  padding-top: 10px;
}

.list {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  .item {
    width: 400px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 14px;

    &:hover {
      cursor: pointer;

      .info {
        .name {
          color: #39d47a;
        }

        .intro {
          color: #39d47a;
        }
      }
    }

    .icon {
      width: 40px;
      height: 40px;
      object-fit: cover;
    }

    .info {
      flex: 1;
      padding-left: 10px;

      .name {
        font-weight: bold;
      }

      .intro {
        color: #999;
        margin-top: 4px;
      }
    }
  }
}
</style>