<template>
  <view class="container">
    <view class="fit-content"></view>
    <view class="operation" v-if="isCustom">
      <slot></slot>
    </view>
    <view v-else>
      <view class="operation" v-if="isTab">
        <view
          class="wd-flex wd-items-center"
          style="gap: 10px; padding: 4px 12px"
        >
          <u--image
            src="/static/favicon.png"
            width="24px"
            height="24px"
            mode="aspectFit"
          ></u--image>
          <text class="title">{{ title }}</text>
        </view>
      </view>
      <view
        class="operation wd-flex wd-flex-row wd-items-center"
        style="gap: 10px; padding: 4px 12px"
        v-else
        @tap="goback"
      >
        <view class="icon-box">
          <u-icon name="arrow-left" size="12"></u-icon>
        </view>
        <text class="title wd-text-16 wd-font-800">{{ title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 's-header',
  data() {
    return {}
  },
  props: {
    title: String,
    isTab: {
      type: Boolean,
      default: false
    },
    isCustom: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    goback() {
      this.$emit('goback')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  z-index: 1;
  .fit-content {
    height: 6vh;
  }
  .operation {
    padding: 12px 4px;
    .title {
      color: #000;
      font-size: 16px;
      font-weight: bold;
    }
    .icon-box {
      padding: 5px;
      border-radius: 50%;
    }
  }
}
</style>