<script setup>
import { useRouter } from "vue-router";
import HorizontalButtonList from "../components/HorizontalButtonList.vue";

const router = useRouter();

const buttonListConfig = [
  {
    name: "启动子界面-First",
    route: {
      path: "SubPageFirst",
      query: { from: "main" },
    },
  },
  {
    name: "启动子界面-Second",
    route: {
      path: "SubPageSecond",
      query: { from: "main" },
    },
  },
];

const onButtonClick = (idx) => {
  const config = buttonListConfig[idx];
  console.log("Jump page to: " + config.name);
  router.push(config.route);
};

const onBack = () => {
  router.go(-1);
};
</script>

<template>
  <div>
    <div class="title">这是主界面</div>
    <HorizontalButtonList
      :style="{ top: 330 }"
      :buttonConfig="buttonListConfig"
      :onButtonClick="onButtonClick"
      :onBack="onBack"
    />
  </div>
</template>

<style scoped>
.title {
  top: 100;
  width: 1280;
  height: 100;
  line-height: 100;
  text-align: center;
  font-size: 55;
}
</style>