<template>
  <article class="search-wrapper">
    <section class="search-wrapper-input">
      <!-- <form action="" @submit.stop.prevent="search"> -->
        <img src='../../images/search-grey.png'>
        <input type="search" v-model="currentText" @keydown.enter="search"/>
        <!-- <button type="submit" v-show="false"/> -->
      <!-- </form> -->
    </section>
    <section class="search-wrapper-cancle">
      <span @click="cancel">取消</span>
    </section>
  </article>
</template>
<script>
export default {
  data() {
    return {
      currentText: ''
    }
  },
  props: {
    searchText: {
      type: String,
      default: ''
    }
  },
  // computed: {
  //   currentText() {
  //     return this.searchText
  //   }
  // },
  watch: {
    searchText(val) {
      this.currentText = val
      console.log(val)
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    // 取消
    cancel() {
      console.log('in cancel')
      this.currentText = ''
    },
    // 搜索
    search() {
      console.log(this.currentText)
      this.$emit('search', this.currentText)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.search-wrapper {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  flex-direction: row;
  padding: px2rem(20px) px2rem(10px) px2rem(10px) px2rem(15px);
  text-align: center;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #F8F8F8;
  &-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(-13px);
      left: px2rem(0px);
      width: px2rem(14px);
      height: px2rem(14px);
    }
    input {
      position: relative;
      top: px2rem(-15px);
      left: px2rem(-8px);
      width: px2rem(240px);
      text-decoration-color: #bbb;
      color: #666;
      font-size: px2rem(13px);
      font-weight: 400;
      background: rgba(245, 246, 246, 1);
      user-select: all;
      &[type="search"]::-webkit-search-cancel-button{
        display: none;
      }
    }
  }
  &-cancle {
    position: relative;
    top: 0;
    left: px2rem(15px);
    // width: px2rem(60px);
    font-size: px2rem(14px);
    color: #999;
    span {
      padding: px2rem(4px);
    }
  }
}
</style>
