<template>
  <div class="space-between header">
    <div :class="resourceData.isTransparent?'searchTransparent':'bgWhite'" class="search">
      <input type="search" :class="resourceData.isTransparent?'searchTransparent':''" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
      <img class="searchImg" :src="resourceData.img">
    </div>
    <div class="headerRight">
      <img class="info" :src="resourceData.img">
      <div :class="resourceData.isTransparent?'transparent':'notTransparent'" class="info-count fs10">{{resourceData.count}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'header',
  components: {
  },
  props: {
      resourceData: {
          type: Object,
          default:()=>{
              return {
                isTransparent: true,
                placeholder: '请输入课程名称',
                img: '../../images/Shape@2x.png',
                count: 0
              }
          }
      }
  },
  watch: {
    message(val){
      console.log('val',val);
    }
  },
  data () {
    return {
      message: ''
    }
  },
  mounted(){
  },
  methods: {
  }
}
</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;
}
.searchTransparent{
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.searchTransparent::-webkit-input-placeholder{ 
    color:    #fff;
}
.white{
  color: #fff;
}
.headerRight{
  width: px2rem(30px);
  height: px2rem(30px);
}
.fs30{
  font-size: px2rem(15px);
}
.gxyStudy{
  margin-right: px2rem(19px);
}
.gxy{
  font-size: px2rem(25px);
  margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
  width: 100%;
  padding: 0 px2rem(25px) 0 px2rem(15px);
  position: relative;
}
.search{
  width: px2rem(290px);
  height: px2rem(30px);
  border-radius: px2rem(19px);
}
.input{
  outline: none;
  border: none;
  float: left;
  font-size: px2rem(13px);
  margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
  line-height: px2rem(18px);
  width: 80%;
}
.searchImg{
  width: px2rem(16px);
  height: px2rem(16px);
  margin: px2rem(8px) px2rem(18px) px2rem(8px) 0;
  float: right;
}
.info{
  width: px2rem(20px);
  height: px2rem(20px);
}
.info-count{
  position:absolute;
  top: 0;
  right: px2rem(21px);
  width: px2rem(15px);
  height: px2rem(15px);
  border-radius: 50%;
  text-align: center;
  line-height: 15px;
}
.transparent{
  background-color: #fff;
  color: RGBA(53, 134, 126, 1);
}
.notTransparent{
  background-color: RGBA(251, 91, 82, 1);
  color: #fff;
}
.hotTag{
  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);
}
.fontTitle{
  font-size: px2rem(18px);
  padding: 0 0 px2rem(21px) px2rem(15px);
  float: left;
  width: 100%;
  text-align: left;
}
.title{
  font-size: px2rem(16px);
}
.courceLeft{
  float: left;
  padding-left: px2rem(15px);
}
.needLeft{
  float: left;
  padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
  float: left;
}
.courceImg{
  width: px2rem(170px);
  height: px2rem(96px);
  margin-bottom: px2rem(10px);
}
.courceMore{
  font-size: px2rem(15px);
  color: #999999;
}
.need{
  width: 100%;
  height: px2rem(325px);
  margin-top: px2rem(35px);
}
</style>
