<template>
  <div class="home-header-con">
    <div class="title" :style="{ backgroundColor }">一幕数字藏品</div>
    <!-- 搜索框 -->
    <div
      ref="searchBar"
      class="search"
      :style="{ opacity: searchOpacity }"
      v-show="searchOpacity != 0"
    >
      <div class="search-bar flex-default" @click="handleSeach">
        <m-icon icon="icon-search" :size="14" className="icon" />
        <span>搜索数字藏品</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    downHight: Number,
    upHight: Number,
    isShowSticky:Boolean
  },
  data() {
    return {};
  },
  computed: {
    opacity() {
      if (this.downHight <= 0) {
        return 1;
      } else if (this.downHight > 0 && this.downHight < 50) {
        return 1 - this.downHight / 50;
      } else {
        return 0;
      }
    },
    searchOpacity() {
      if (this.upHight <= 0) {
        return 1;
      } else if (this.upHight > 0 && this.upHight < 15) {
        return 1 - this.upHight / 15;
      } else {
        return 0;
      }
    },
    backgroundColor() {
      return this.upHight > 15 ? "#fff" : "";
    },
  },
  methods: {
    handleSeach() {
      this.$router.push({name: "search"})
    },
  },
};
</script>

<style lang="less">
.home-header-con {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  > .title {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
  }
  > .search {
    margin-top: 8px;
    padding: 0 16px;
    height: 30px;
    > .search-bar {
      height: 100%;
      background: rgba(216, 216, 216, 0.4);
      border-radius: 15px;
      padding: 0 15px;
      align-items: center;
      color: #666666;
      font-size: 14px;
    }
    > .search-bar .icon {
      margin-right: 10px;
      color: #666666;
    }
  }
}
</style>