<template>
  <view>
    <view class="header" :style="{ paddingTop: customBarHeight + 'px' }">
      <uni-icons class="icon" type="back" size="20" @tap="backPage"></uni-icons>
      <view class="title">{{ props.title }}</view>
    </view>
    <view class="box">
      <view class="left">{{ props.title }}列表</view>
      <view class="right"><slot></slot></view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { CUSTOM_BAR_HEIGHT } from "@/common/const/cache.js";
const props = defineProps({
  title: "",
  backUrl: {
    type: String,
    default: "",
  },
});
const customBarHeight = computed(() => {
  return uni.getStorageSync(CUSTOM_BAR_HEIGHT) - 30;
});

function backPage() {
  if (props.backUrl) {
    if (props.backUrl === "func") {
      uni.switchTab({
        url: "/pages/func/func",
      });
    } else if (props.backUrl === "home") {
      uni.switchTab({
        url: "/pages/home/home",
      });
    } else if (props.backUrl == "-1") {
      uni.navigateBack({
        delta: 1,
      });
    } else {
      uni.redirectTo({
        url: props.backUrl,
      });
    }
  } else {
    uni.navigateBack({
      delta: 1,
    });
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  padding: 28rpx;
  height: 98rpx;
  background: linear-gradient(180deg, #5e95ff 0%, #ffffff 100%);
  padding-bottom: 60rpx;
}

uni-icon,
.uni-icons {
  font-size: 27rpx;
  height: 27rpx;
  color: #23354e;
  font-weight: 700;
}

.title {
  flex: 1;
  margin-right: 42rpx;
  text-align: center;
  font-weight: bold;
  font-size: 38rpx;
  color: #23354e;
  line-height: 42rpx;
}
.box {
  background: #f6f9ff;
  border-radius: 29rpx 29rpx 0rpx 0rpx;
  position: relative;
  top: -40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48rpx 28rpx 0 28rpx;
  .left {
    font-weight: bold;
    font-size: 31rpx;
    color: #23354e;
  }
}
</style>
