<script setup lang="ts">
import {
  Col as VanCol,
  Icon as VanIcon,
  Row as VanRow,
} from 'vant'

const { title } = defineProps<{
  // 标题
  title: string
}>()

// back
const onClickLeft = () => history.back()
</script>

<template>
  <!-- 常规数据布局 -->
  <main class="layout_main">
    <!-- 布局头部 -->
    <div class="layout_header">
      <VanRow class="header_row" justify="space-between">
        <VanCol class="header_row_left_col">
          <VanIcon class="header_row_icon" name="arrow-left" @click="onClickLeft" />
          <span class="header_row_title">{{ title }}</span>
        </VanCol>
        <VanCol class="header_row_right_col">
          <!-- 右侧区域 -->
          <slot name="layout_header_row_right_col" />
        </VanCol>
      </VanRow>
    </div>
    <!-- 布局主体 -->
    <div class="layout_content">
      <slot name="layout_content" />
    </div>
  </main>
</template>

<style scoped lang="less">
.layout_main {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100vh;
  .layout_header {
    padding: var(--base-interval-1);
    .header_row {
      align-items: center;
      .header_row_left_col {
        flex-grow: 1;
        .header_row_title {
          margin-left: var(--van-padding-xs);
          font-size: 20px;
          font-weight: bold;
        }
      }
      .header_row_icon {
        font-size: 18px;
      }
    }
  }
  .layout_content {
    flex: 1;
    margin-top: var(--van-padding-base);
    height: 0;
  }
}
</style>
