<template>
  <div class="screen-layout">
    <!-- 顶部状态栏 -->
    <StatusBar
      v-if="showStatusBar"
      :logo="logo"
      :title="title"
      @logo-long-press="onLogoLongPress"
    />

    <!-- 主内容区域 -->
    <main class="layout-main" :style="mainStyle">
      <slot />
    </main>

    <!-- 底部操作区 -->
    <div v-if="showActionBar" class="layout-action">
      <slot name="action">
        <button v-if="showBackBtn" class="btn-action-back" @click="handleBack">
          <span class="icon-back"></span>
          <span>{{ backText }}</span>
        </button>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import StatusBar from '@/components/StatusBar.vue'

const props = defineProps({
  showStatusBar: {
    type: Boolean,
    default: true
  },
  showActionBar: {
    type: Boolean,
    default: true
  },
  showBackBtn: {
    type: Boolean,
    default: true
  },
  backText: {
    type: String,
    default: '返回首页'
  },
  backTarget: {
    type: String,
    default: '/idle'
  },
  logo: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '迎宾巡逻机器人'
  },
  mainPadding: {
    type: String,
    default: '24px'
  }
})

const emit = defineEmits(['back', 'logo-long-press'])

const router = useRouter()

const mainStyle = computed(() => ({
  padding: props.mainPadding
}))

const handleBack = () => {
  emit('back')
  router.push(props.backTarget)
}

const onLogoLongPress = () => {
  emit('logo-long-press')
}
</script>

<style scoped>
.screen-layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  overflow: hidden;
}

.layout-main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.layout-action {
  height: 104px;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.btn-action-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 76px;
  padding: 0 42px;
  font-size: 25px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-page);
  border: 2px solid var(--border-light);
  border-radius: 35px;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 1px;
}

.btn-action-back:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

.icon-back {
  width: 22px;
  height: 22px;
  border: 2.5px solid currentColor;
  border-top: none;
  border-right: none;
  transform: rotate(45deg);
  flex-shrink: 0;
}
</style>
