<template>
  <article class="search-wrapper">
    <section class="search-wrapper-input">
      <img src='../../images/search-grey.png'>
      <form action="" @submit="search">
        <input type="search" v-model="searchText"/>
      </form>
    </section>
    <section class="search-wrapper-cancle">
      <span @click="cancel">取消</span>
    </section>
  </article>
</template>
<script>
export default {
  data() {
    return {
      searchText: '搜索疾病、课程、讲师'
    }
  },
  methods: {
    cancel() {
      this.searchText = ''
    },
    search() {
      this.$emit('search', this.searchText)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.search-wrapper {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  flex-direction: row;
  padding: px2rem(20px) px2rem(10px) px2rem(10px) px2rem(15px);
  text-align: center;
  align-items: center;
  &-input {
    width: px2rem(290px);
    height: px2rem(30px);
    border: 1px solid #efefef;
    border-radius: px2rem(18px);
    background: rgba(245, 246, 246, 1);
    img {
      position: relative;
      top: px2rem(-18px);
      left: px2rem(0px);
      width: px2rem(14px);
      height: px2rem(14px);
    }
    input {
      position: relative;
      top: px2rem(-20px);
      left: px2rem(-8px);
      width: px2rem(240px);
      text-decoration-color: #bbb;
      color: #bbb;
      font-size: px2rem(13px);
      font-weight: 400;
      background: rgba(245, 246, 246, 1);
    }
  }
  &-cancle {
    position: relative;
    top: 0;
    left: px2rem(15px);
    // width: px2rem(60px);
    font-size: px2rem(14px);
    color: #999;
    span {
      padding: px2rem(4px);
    }
  }
}
</style>
