<template>
  <div class="co-search">
    <div class="co-searchbar">
      <div class="co-searchbar-inner">
        <i class="coicon coicon-search" :style="{ visibility: visible ? 'visible' : 'hidden'}"></i>
        <input
        ref="input"
        @click="visible = true"
        type="search"
        @keyup.enter="submit"
        v-model="currentValue"
        :placeholder="visible ? placeholder : ''"
        class="co-searchbar-core">
        <i class="coicon coicon-delete_fill"
          @click="currentValue = '', $refs.input.focus()"
          :style="{ visibility: visible && value ? 'visible' : 'hidden'}"></i>
      </div>
      <a
        class="co-searchbar-cancel"
        @click="cancel"
        v-show="visible"
        v-text="cancelText">
      </a>
      <label
        @click="visible = true, $refs.input.focus()"
        class="co-searchbar-placeholder"
        v-show="!visible">
        <i class="coicon coicon-search"></i>
        <span class="co-searchbar-text" v-text="placeholder"></span>
      </label>
    </div>
    <div class="co-search-list" v-show="show || currentValue">
      <div class="co-search-list-warp">
        <slot>
          <x-cell v-for="(item, index) in result" :key="index" :title="item"></x-cell>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import XCell from 'CoUI/packages/cell/index.js';
if (process.env.NODE_ENV === 'component') {
  require('CoUI/packages/cell/style.css');
}

/**
 * co-search
 * @module components/search
 * @desc 搜索框
 * @param {string} value - 绑定值
 * @param {string} [cancel-text=取消] - 取消按钮文字
 * @param {string} [placeholder=搜索] - 搜索框占位内容
 * @param {boolean} [autofocus=false] - 自动 focus
 * @param {boolean} [show=false] - 始终显示列表
 * @param {string[]} [result] - 结果列表
 * @param {slot} 结果列表
 *
 * @example
 * <co-search :value.sync="value" :result.sync="result"></co-search>
 * <co-search :value.sync="value">
 *   <co-cell v-for="item in result" :title="item"></co-cell>
 * </co-search>
 */
export default {
  name: 'co-search',

  data() {
    return {
      visible: false,
      currentValue: this.value
    };
  },

  components: { XCell },

  watch: {
    currentValue(val) {
      this.$emit('input', val);
    },

    value(val) {
      this.currentValue = val;
    }
  },

  props: {
    value: String,
    autofocus: Boolean,
    show: Boolean,
    cancelText: {
      default: '取消'
    },
    placeholder: {
      default: '搜索'
    },
    result: Array
  },

  methods: {
    submit() {
      this.$emit('submit');
      this.$refs.input.blur();
    },
    cancel() {
      this.visible = false;
      this.currentValue = '';
      this.$emit('cancel');
      this.$refs.input.blur();
    }
  },

  activated() {
    if (this.autofocus) {
      this.$refs.input.focus();
      this.visible = true;
    }
  }
};
</script>

<style lang="css">
  @import "../../../src/style/var-ios9.css";

  @component-namespace co {
    @component search {
      height: 100%;
      /*height: 100vh;*/
      height: calc(100vh - 2.2rem);   /*防止拖动时搜索框遮挡标题栏*/
      overflow: hidden;
    }

    @component searchbar {
      position: relative;
      align-items: center;
      background-color: $color-white;
      box-sizing: border-box;
      display: flex;
      padding: 0.4rem 0.5rem;
      z-index: 1;

      @descendent inner {
        align-items: center;
        background-color: $search-background-color;
        border-radius: 1.1rem;
        display: flex;
        flex: 1;
        height: 1.4rem;
        padding: 0.2rem 0.3rem;

        .coicon-search {
          width: 1rem;
          color: $search-text-color;
          font-size: 0.7rem;
        }
        input{
          width: 100%;
          border: none;
          outline: none;
          font-size: 15px;
          color: #333;
          background-color: $search-background-color;
        }
        .coicon-delete_fill {
          color: #9B9999;
          font-size: 1.1rem;
        }
      }

      @descendent core {
        appearance: none;
        border: 0;
        box-sizing: border-box;
        height: 100%;
        outline: 0;
      }

      @descendent placeholder {
        align-items: center;
        color: $search-text-color;
        display: flex;
        font-size: 0.75rem;
        line-height: 1;
        justify-content: center;
        position: absolute 0 0 0 0;

        .coicon-search {
          margin-right: 0.3rem;
          font-size:0.75rem;
        }
      }

      @descendent cancel {
        color: $color-blue;
        margin-left: 0.5rem;
        text-decoration: none;
      }
    }

    @component search-list {
      overflow: auto;
      padding-top: 2.2rem;
      position: absolute 0 0 0 0;
    }
  }
</style>
