<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { useDesign } from '~/composables/useDesign';
  // import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
  import banner from '~~/assets/images/homeBanner.png';
  export default defineComponent({
    // components: { SvgIcon },
    emits: ['search'],
    setup(_, ctx) {
      const { prefixCls } = useDesign('banner');
      const imgUrl = ref(banner);
      const searchVal = ref('');
      function onInput(ev: { target: { value: string; }; }) {
        searchVal.value = ev.target.value;
        ctx.emit('search', ev);
      }
      // const imgUrl = ()=
      return {
        prefixCls,
        imgUrl,
        onInput,
        searchVal,
      };
    },
  });
</script>
<template>
  <div :class="[prefixCls, `${prefixCls}--host`]">
    <img :src="imgUrl" alt="" />
    <div class="search-bar">
      <el-icon :size="27" >
        <svg width="27px" height="27px" viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>放大镜</title>
          <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="首页" transform="translate(-416.000000, -351.000000)" fill="#000000" fill-rule="nonzero">
              <g id="放大镜" transform="translate(416.000000, 351.000000)">
                <path d="M25.853125,24.25 L20.128125,18.525 C21.73125,16.56875 22.69375,14.071875 22.69375,11.35 C22.69375,5.096875 17.60625,0.00625 11.35,0.00625 C5.096875,0.00625 0.00625,5.09375 0.00625,11.35 C0.00625,17.60625 5.09375,22.69375 11.35,22.69375 C14.06875,22.69375 16.56875,21.73125 18.525,20.128125 L24.25,25.853125 C24.471875,26.075 24.7625,26.184375 25.053125,26.184375 C25.34375,26.184375 25.634375,26.075 25.85625,25.853125 C26.296875,25.409375 26.296875,24.690625 25.853125,24.25 L25.853125,24.25 Z M2.275,11.35 C2.275,6.346875 6.346875,2.275 11.35,2.275 C16.353125,2.275 20.425,6.346875 20.425,11.35 C20.425,16.353125 16.353125,20.425 11.35,20.425 C6.346875,20.425 2.275,16.353125 2.275,11.35 Z" id="形状"></path>
              </g>
            </g>
          </g>
        </svg>
      </el-icon>
      <input
        placeholder="按照关键词搜索"
        :value="searchVal"
        @input="onInput"
        class="mai-input"
        type="text"
      />
      <button class="mai-btn" type="button">搜索</button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @import 'banner';
</style>
