<template>
  <div ref="browseHead" class="nav">
    <div class="nav-wrapper" :style="{ paddingTop: statusBarHeight }">
      <div class="nav-left" @click="onClickLeft">
        <cr-icon color="#c8c9cc" type="arrow-left" />
      </div>
      <div class="nav-title">浏览记录</div>
      <div v-if="!showRightBtn && resultLen" class="nav-right">
        <span v-if="isEdit" class="nav-right-done" @click="doneEvent">完成</span>
        <template v-else>
          <span class="nav-right-clear" @click="clearEvent">清空</span>
          <span class="nav-right-edit" @click="editEevent">编辑</span>
        </template>
      </div>
    </div>
    <div class="nav-static" :style="{ paddingTop: statusBarHeight }" />
  </div>
</template>

<script>
const ON_HEIGHT = 'height';
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    resultLen: {
      type: Number,
      default: 0
    },
    showRightBtn: {
      type: Boolean,
      deefault: false
    }
  },
  data() {
    return {
      isLoading: true
    };
  },
  computed: {
    statusBarHeight() {
      const statusBarHeight = this.$route.query.statusBarHeight;
      const height = isNaN(statusBarHeight) ? 0 : statusBarHeight;
      return `${height}px`;
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$emit(ON_HEIGHT, this.$refs.browseHead.offsetHeight);
      this.isLoading = false;
      // console.log(this.$refs.browseHead.clientHeight);
    });
  },
  methods: {
    onClickLeft() {
      if (this.$bridge.isApp) {
        this.$bridge.closeBrowser();
      } else {
        this.$router.go(-1);
      }
    },
    clearEvent() {
      this.$emit('clear');
    },
    doneEvent() {
      this.$emit('update:isEdit', false);
    },
    editEevent() {
      this.$emit('update:isEdit', true);
    }
  }
};
</script>
<style lang="less" scoped>
.nav {
  position: relative;
  &-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    border-bottom: solid 1px @gray-1;
    display: flex;
    align-items: center;
    background-color: @white;
    z-index: 5;
  }
  &-static {
    height: 44px;
  }
  &-left,
  &-right {
    position: absolute;
  }
  &-title {
    .text-size(16);
    height: 44px;
    line-height: 44px;
    width: 100%;
    text-align: center;
  }
  &-left {
    padding: 0 16px;
  }
  &-right {
    .text-size(14);
    line-height: 44px;
    position: absolute;
    right: 0;
    display: flex;
    // span {
    //   padding: 0 14px;
    // }
    &-clear {
      margin-right: 7px;
      margin-left: 14px;
    }
    &-done {
      color: #ff1616;
      padding: 0 14px;
    }
    &-edit {
      margin-right: 14px;
      margin-left: 7px;
    }
  }
}
</style>
