<template>
  <div class="search-wrapper">
    <input 
     type="text" 
     class="search-input"
     :placeholder="placeholder"
     v-model="val"
     @keyup.enter="sendMessage"
     />
    <span 
     class="search-icon iconfont icon-sousuo"
     @click="sendMessage"
    ></span>
  </div>
</template>

<script>
import "../../lib/iconfont/iconfont.css";
import {reactive, toRefs} from 'vue'
export default {
  name: "Search",
  props: {
      placeholder:{
          type:String,
          default:"请输入搜索内容"
      }
  },
  setup(props, ctx) {
      const state = reactive({
          val:""
      })
      const sendMessage = () => {
          ctx.emit("inputEnter",state.val)
      }
      return {
          sendMessage,
          ...toRefs(state)
      }
  },
};
</script>

<style lang="scss" scoped>
.search-wrapper {
  border:1px solid silver;
  border-radius: 15px;
  width: 300px;
  display: flex;
  .search-input{
   width: 100%;
   height: 30px;
   border: none;
   outline: none;
   font-size: 20px;
   margin-left: 12px;
  }
  .search-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 30px;
    margin-right: 5px;
    cursor: pointer;
    color: silver;
  }
}
</style>