<template>
  <div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
    <div class="search-menu">
      <div class="bgFill" :style="{height:ptop}"></div>
      <div class="fixBox">
        <img @click="goBackHome" class="left-arror" :style="{top: bPtop}" src="../../images/lecturer/left-arror.png" alt="">
        <div :class="isTransparent?'search-transparent':'bgWhite'" class="search" @click="goSearch">
          <!-- <img class="search-img-left" src="../../images/search-white.png"> -->
          <span class="input">{{placeholder}}</span>
          <img class="search-img" src="../../images/search-white.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jumpWebPageUrl } from "@/utils/index";
export default {
  data() {
    return {
      placeholder: "搜索疾病、课程、讲师",
      isTransparent: true, //更改颜色 背景
      count: "",
      ptop: 0,
      bPtop: 0,
      menuptop: 0,
      popHeight: 0
    };
  },
  props: {
    statusBarHeight: {
      type: Number,
      default: 0
    },
    searchFix: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    // searchFix:function(n){
    //   if(n){
    //     alert(this.searchFix)
    //   }
    // }
  },
  created() {
    let _this = this;
    window.__getStatusBarHeight = function(parm) {
      if (window.__isAndroid) {
        _this.popHeight = parseInt(parm.statusBarHeight) / 2.5;
      } else {
        _this.popHeight = parm.statusBarHeight;
      }
      _this.ptop = _this.popHeight + "px";
      _this.bPtop = _this.popHeight + 2 + "px"
      _this.menuptop = _this.popHeight + "px";
      // alert(parm.statusBarHeight);
    };
    this.getStatusHight();
  },

  mounted() {},
  methods: {
    getStatusHight() {
      rocNative.getStatusBarHeight({
        __funcName: "__getStatusBarHeight"
      });
    },
    goSearch() {
      let _this = this,
        url = jumpWebPageUrl;
      let itemData = {
        title: "",
        imageUrl: "",
        appModuleInfo: {
          code: "M300",
          type: 4,
          name: "wwww",
          paramFlag: 1,
          paramList: [
            {
              key: "pageUrl",
              value: url + 'sousuo/#/index',
              type: 4,
              seqNo: 1
            },
            {
              key: "showTitle",
              value: false,
              type: 1,
              seqNo: 2
            },
            {
              key: "title",
              value: "",
              type: 1,
              seqNo: 3
            }
          ]
        }
      };

      rocNative.dispatchEventByModuleCode({
        modeCode: itemData.appModuleInfo.code,
        jsonString: itemData.appModuleInfo.paramList
      });
    },

    // 返回到首页
    goBackHome() {
      rocNative.goBack()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../../style/mixin.scss";
@import "../../style/global.scss";
html,
body {
  width: px2rem(375px);
  height: 100%;
  background-color: #f8f8f8;
}

.search-transparent {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 1);
  color: #fff;
  margin: px2rem(8px) 0 0 0;
  margin-left: px2rem(20px);
}
.search-transparent::-webkit-input-placeholder {
  color: #fff;
}

.white {
  color: #fff;
}
.header-right {
  width: px2rem(20px);
  height: px2rem(20px);
  position: relative;
  margin-top: px2rem(13px);
  float: right;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.bgFill {
  background: inherit;
  height: 20px;
}
.fs30 {
  font-size: px2rem(15px);
}
.gxy-study {
  margin-right: px2rem(19px);
}
.gxy {
  font-size: px2rem(25px);
  margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header {
  width: 100%;
  /*//height: px2rem(50px);*/

  position: relative;
}
.fixed {
  .search-menu {
    position: fixed;
    z-index: 110;
    top: 0;
    left: 0;
  }
  .fixBox {
    background: #4cbba9;
    height: px2rem(46px);
    padding: 0 px2rem(25px);
    /* padding-top: px2rem(7px)*/
  }
  .bgFill {
    background: #4cbba9;
  }
  .search-transparent::-webkit-input-placeholder {
    color: #fff;
  }
  .search {
    border-color: #fff;
  }
  .info-count {
    background: #fb5b52;
    color: #fff;
  }
}
.fixBox {
  padding: 0 px2rem(25px);
  height: px2rem(30px);
  /* padding-top: px2rem(7px)*/
}
.search-menu {
  width: 100%;
  position: absolute;
}
.search {
  width: px2rem(290px);
  height: px2rem(30px);
  border-radius: px2rem(19px);
  float: left;
  text-align: left;
}
.input {
  outline: none;
  border: none;
  float: left;
  font-size: px2rem(13px);
  margin: 0 0 0 px2rem(15px);
  line-height: px2rem(28px);
  width: 80%;
  color: #fff;
}
.search-img {
  width: px2rem(13px);
  height: px2rem(13px);
  margin: px2rem(8px) px2rem(10px) 0 0;
  float: right;
}
.search-img-left {
  width: px2rem(13px);
  height: px2rem(13px);
  margin: px2rem(8px) px2rem(10px) 0 0;
  float: left;
}

.info-count {
  position: absolute;
  top: -(px2rem(5px));
  left: (px2rem(10px));
  /*max-width: px2rem(25px);*/

  padding: 0 px2rem(3px) 0 px2rem(2px);
  height: px2rem(15px);
  line-height: px2rem(15px);
  border-radius: px2rem(15px);
  text-align: center;
  font-size: px2rem(12px);
  /*font-weight: bold;*/
  background-color: #fff;
  color: RGBA(53, 134, 126, 1);
}
.num-min {
  max-width: px2rem(25px);
  min-width: px2rem(15px);
  /*padding:0;*/
}
.num-max {
  width: auto;
  /* background-color: RGBA(251, 91, 82, 1);
  color: #fff;*/
}
.hot-tag {
  width: 100%;
  height: px2rem(150px);
}
.hotTagTitle {
  font-size: px2rem(18px);
  padding: px2rem(73px) px2rem(15px);
  float: left;
  background-color: #fff;
}
.cource {
  width: 100%;
  height: px2rem(350px);
}
.font-title {
  font-size: px2rem(18px);
  padding: 0 0 px2rem(21px) px2rem(15px);
  float: left;
  width: 100%;
  text-align: left;
}
.title {
  font-size: px2rem(16px);
}
.cource-left {
  float: left;
  padding-left: px2rem(15px);
}
.need-left {
  float: left;
  padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time {
  float: left;
}
.cource-img {
  width: px2rem(170px);
  height: px2rem(96px);
  margin-bottom: px2rem(10px);
}
.cource-more {
  font-size: px2rem(15px);
  color: #999999;
}
.need {
  width: 100%;
  height: px2rem(325px);
  margin-top: px2rem(35px);
}
.left-arror {
  position: absolute;
  left: px2rem(6px);
  top: px2rem(3px);
  width: px2rem(25px);
  height: px2rem(25px);
  margin: px2rem(8px) px2rem(12px);
}
</style>
