<template>
  <view
    class="back-button-container"
    :style="{ paddingTop: statusBarHeight + 'px' }"
  >
    <view @click="handleBack" class="back-btn">
      <image class="back-icon" :src="iconSrc" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: "BackButton",
  props: {
    // 自定义图标路径
    iconSrc: {
      type: String,
      default: "https://epic.js-dyyj.com/uploads/20250825/f7e4825867dbd90e2cd0721a49fad6eb.png",
    },
    // 自定义返回逻辑
    customBack: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  mounted() {
    this.setStatusBarHeight();
  },
  methods: {
    setStatusBarHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 0;
      } catch (e) {
        // 开发工具或获取失败时使用默认值
        this.statusBarHeight = 0;
      }
    },
    handleBack() {
      if (this.customBack) {
        // 使用自定义返回逻辑
        this.customBack();
      } else {
        // 默认返回逻辑
        uni.navigateBack({
          delta: 1,
          fail: () => {
            // 如果返回失败，跳转到首页
            uni.switchTab({
              url: "/pages/index/index",
            });
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.back-button-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding-left: 20rpx;
  padding-bottom: 20rpx;
}

.back-btn {
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
