<template>
  <section class="relative" @click.stop>
    <aside class="view-search rowACenter">
      <div class="flex-1 overflow">
        <input type="text"
               v-model="vValue"
               :disabled="status === constStatus.loading"
               @keydown.enter="triggerSearchValue"
               class="view-search-input" :placeholder="placeholder" />
      </div>
      <section class="view-search-icon center">
        <svg v-if="status === constStatus.loading" class="view-search-icon-loading" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
          </path>
        </svg>
        <div v-else-if="status === constStatus.fail" @click="retrySearchValue" class="view-search-fail cursor-pointer">重试</div>
        <img @click="triggerSearchValue" v-else src="../images/search.png" class="view-search-icon-target screen cursor-pointer" />
      </section>
    </aside>
    <slot></slot>
  </section>

</template>

<script>
import props from "../props";
import mixins from '../mixins';
export default {
  name: "view-search",
  props,
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>