<template>
  <div class="search">
    <div class="search-bg" :style="{ backgroundImage: `url(${livingTop.img})` }" />
    <cr-sticky v-if="livingTop.img" :z-index="1" @scroll="onStickyScroll">
      <div class="search-top" :class="{ searchFixed: isFixed }">
        <div class="search-top-left">
          <cr-icon type="arrow-left" />
          <span v-if="isFixed" class="search-top-left__text">
            {{ region.name }}
            <cr-icon type="arrow-down" size="12px" />
          </span>
          <span v-else class="search-top-left__text">本地服务</span>
        </div>
        <div class="search-top-panel">搜索本地好物</div>
      </div>
    </cr-sticky>
    <div class="search-position">
      {{ region.name }}
      <cr-icon type="arrow-down" color="#fff" size="14px" />
    </div>
    <cr-image
      v-if="livingTop.textImg"
      class="search-tips"
      fit="contain"
      width="246px"
      height="16px"
      :src="livingTop.textImg"
    />
  </div>
</template>

<script>
export default {
  props: {
    livingTop: {
      type: Object,
      default: () => ({})
    },
    region: {
      type: Object,
      default: () => ({})
    }
    // isFixed: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      isFixed: false
    };
  },
  mounted() {
    console.log(this);
  },
  methods: {
    onStickyScroll() {
      const scrollTop = document.documentElement.scrollTop;
      this.isFixed = scrollTop > 10;
    }
  }
};
</script>
<style lang="less" scoped>
.search {
  .text-size(14);
  position: relative;
  &-bg {
    position: absolute;
    top: -44px;
    z-index: -1;

    width: 100%;
    height: 190px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
  &-top {
    height: 42px;
    color: @white;
    width: 100vw;
    display: flex;
    align-items: center;
    padding: 6px 0 6px 15px;
    box-sizing: border-box;
    transition: all 200ms ease-in-out;
    &.searchFixed {
      background-color: @white;
      color: @black;
      .search-top-panel {
        color: @gray-4;
        background-color: #f9f9f9;
      }
    }
    &-left {
      .text-size(16);
      // color: @white;
      display: flex;
      align-items: center;
      &__text {
        margin-left: @padding-unit;
      }
    }
    &-panel {
      // color: @white;
      width: 210px;
      height: 30px;
      line-height: 30px;
      padding-left: 33px;
      box-sizing: border-box;
      border-radius: 17px;
      background-color: rgba(0, 0, 0, 0.58);
      background-image: url(~@/assets/images/sericeGoods/search.png);
      background-repeat: no-repeat;
      background-position: 14px 9px;
      background-size: 13px 13px;
      margin-left: 50px;
    }
  }

  &-position {
    .text-size(32);
    color: @white;
    font-weight: bold;
    height: 45px;
    display: flex;
    align-items: center;
    padding-left: 35px;
    @{deep} .cr-icon {
      margin-left: @padding-unit;
    }
  }
  &-tips {
    margin-left: 35px;
    margin-top: @padding-unit - 1px;
    margin-bottom: @padding-xs;
  }
}
</style>
