<template>
  <view class="asset-shell" :style="{ '--asset-shell-side-width': sideWidth }">
    <view class="asset-shell__nav">
      <view class="asset-shell__side">
        <view v-if="backable" class="asset-shell__back" @click="handleBack">
          <image
            class="asset-shell__back-image"
            src="https://imgs.agrimedia.cn/bm-bmt/bacn-icon.png"
            mode="aspectFit"
          ></image>
        </view>
      </view>
      <text class="asset-shell__title">{{ title }}</text>
      <view class="asset-shell__side asset-shell__side--right">
        <slot name="right">
          <text
            v-if="rightText"
            class="asset-shell__action"
            @click="$emit('right-click')"
          >
            {{ rightText }}
          </text>
        </slot>
      </view>
    </view>
    <slot />
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    rightText: {
      type: String,
      default: "",
    },
    backable: {
      type: Boolean,
      default: true,
    },
    sideWidth: {
      type: String,
      default: "120rpx",
    },
  },
  methods: {
    handleBack() {
      if (getCurrentPages().length > 1) {
        uni.navigateBack();
        return;
      }

      uni.reLaunch({
        url: "/pages/index/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/tokens.scss";

.asset-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(env(safe-area-inset-top) + 20rpx) 14rpx 20rpx;
  background: #191e32;
}

.asset-shell__nav {
  display: flex;
  align-items: center;
  min-height: 48rpx;
}

.asset-shell__side {
  display: flex;
  align-items: center;
  width: var(--asset-shell-side-width);
  flex: 0 0 var(--asset-shell-side-width);
  min-width: 0;
}

.asset-shell__side--right {
  justify-content: flex-end;
  width: 48rpx;
  height: 48rpx;
}

.asset-shell__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
}

.asset-shell__back-image {
  width: 48rpx;
  height: 48rpx;
}

.asset-shell__title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}

.asset-shell__action {
  font-size: 24rpx;
  font-weight: 600;
  color: rgba(232, 239, 255, 0.86);
}
</style>
