<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">SearchBar</div>
    </div>
    <h3>基本示例</h3>
    <h4>Normal</h4>
    <SearchBar placeholder="search" />
    <h4>AutoFocus when enter page</h4>
    <SearchBar autofocus placeholder="search" />
    <h4>Show cancel button</h4>
    <SearchBar placeholder="search" showCancelButton />
    <h4>Custom basic</h4>
    <SearchBar placeholder="custom basic" :custom="true" @onInput="handleInput" />
    <h4>Custom Left slot</h4>
    <SearchBar id="custom_1" placeholder="custom left slot" :custom='true'>
      <div slot="customLeft" class="slot"><i class="logo"></i></div>
    </SearchBar>
    <h4>Custom right slot</h4>
    <SearchBar id="custom_2" placeholder="custom right slot" :custom='true'>
      <div slot="customRight" class="slot"><button class="button">search button</button></div>
    </SearchBar>
    <h4>Custom left and right slot</h4>
    <SearchBar id="custom_3" placeholder="custom left and right slot" :custom='true'>
      <div slot="customLeft" class="slot"><span>Left</span></div>
      <div slot="customRight" class="slot"><span>Right</span></div>
    </SearchBar>
  </div>
</template>
<script>
export default {
  methods: {
    handleInput(val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less" scoped>
#custom_1 {
  .slot {
    width: 50px;
    height: 28px;
    text-align: center;
    box-shadow: 0px 1px 4px rgba(0, 80, 255, 1);
    background: linear-gradient(to bottom, #1089FF, #40A9FF);
    .logo {
      display: inline-block;
      height: 18px;
      width: 18px;
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAllBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AJcWoAAAAMXRSTlMAu/JJRkP86WZfMxkM1cecelP03tnSz41aNy0eB/fjyr+wpZSHaiYOqqmJfkEiErRwNH4FxQAAAWdJREFUOMu1k9l6gjAQhRNQQVYXEBDqLti6tPP+L9eM+CUkBEovPFecMz+ThAlEyJuHwcYwlrvEJD1aJxZwLa95F/cFsj7OWqwM6vJiRak/qZ+/izZ3X2BlcjAf6Nx0D6i4UrncwPyYNzb8RCMVjDGdytkMs0/NORyiaNp6+45Jyq3U02oGRxaERCOfFWxhCzyxpwMz/PLCzsWmVW2lvYfM3bhrnefcfG1RdIyfgQl3FsCK6OWyYe65Y1OhHaCHtf+DGwC/Z+kLdwG7NpUedNhhTtJg5nrwRxrNCDo3GbFSKazFrCusPLO44a9dLTfKph7ANGtzoXQnUHbriqJO+CuWckY1PUNAULn3hY9pMBJJGkEtU5mV/0x3tuN6VZ7NVsA1JrIOr3xiGCDLVEg7kuvbzOnoSc6NBXcpzkz0VJTZyYXSw2m6rv34RY7IXzIHkqKn+Yaet35MnN0iQ0lChq0ekCFkbFH3FyidSdANFe2tAAAAAElFTkSuQmCC') no-repeat center;
      background-size: 100% 100%;
      margin-top: 5px;
    }
  }
  ::v-deep .ok-custom-input {
    border-left: none;
    border-radius: 0 2px 2px 0;
  }
}
#custom_2 {
  .slot {
    height: 100%;
    .button {
      height: 100%;
      width: 120px;
      outline: none;
      border: none;
      -webkit-appearance: none;
      background: linear-gradient(to bottom, #1089FF, #40A9FF);
      color: #FFFFFF;
      font-size: 14px;
      transition: opacity .25s ease-in-out;
      &:hover, &:active {
        opacity: .6;
      }
    }
  }
  ::v-deep .ok-custom-input {
    border-right: none;
    border-radius: 2px 0 0 2px;
  }
}
#custom_3 {
  margin-bottom: 48px;
  .slot {
    height: 100%;
    text-align: center;
    span {
      display: inline-block;
      background: linear-gradient(to bottom, #1089FF, #40A9FF);
      height: 100%;
      width: 50px;
      line-height: 28px;
      font-size: 14px;
      color: #FFFFFF;
    }
  }
  ::v-deep .ok-custom-input {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}
</style>