<script setup>
import HorizontalButtonList from "../components/HorizontalButtonList.vue";
import { useRouter } from "vue-router";
import { computed } from "vue";
const props = defineProps({
  name: String,
  jumpTo: String,
});

console.log("cchtest subpage", props.name, props.jumpTo);
const router = useRouter();
const buttonListConfig = computed(() => {
  return [
    {
      name: "跳转子界面-" + props.jumpTo,
      route: {
        path: "SubPage" + props.jumpTo,
        query: { from: "sub" + props.name },
      },
    },
  ];
});

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

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

<template>
  <div>
    <div class="title">这是子界面{{ name }}</div>
    <HorizontalButtonList
      :style="{ top: 230 }"
      :buttonConfig="buttonListConfig"
      :onButtonClick="onButtonClick"
      :onBack="onBack"
    />
    <div class="tip">按返回键返回前一页</div>
  </div>
</template>

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

.tip {
  top: 330;
  width: 1280;
  height: 100;
  line-height: 100;
  text-align: center;
  font-size: 30;
}
</style>