<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->
<!-- Created by Tw93 on 16/10/25. -->
<!--A Search bar for city Search-->

<template>
  <div>
    <div :class="['wxc-search-bar','wxc-search-bar-'+theme]"
         :style="barStyle"
         v-if="mod==='default'">
      <input @blur="onBlur"
             @focus="onFocus"
             @input="onInput"
             @return="onSubmit"
             :return-key-type="returnKeyType"
             :autofocus="autofocus"
             :disabled="disabled"
             :value="value"
             ref="search-input"
             :type="inputType"
             :placeholder="placeholder"
             :style="{ width: needShowCancel ? '624px' : '710px' }"
             :class="['search-bar-input','search-bar-input-'+theme]" />
      <div v-if="disabled"
           @click="inputDisabledClicked"
           class="disabled-input"></div>
      <image class="search-bar-icon"
             :aria-hidden="true"
             :src="inputIcon"></image>
      <image class="search-bar-close"
             v-if="showClose"
             :aria-hidden="true"
             @click="closeClicked"
             :src="closeIcon"></image>
      <text :class="['search-bar-button','search-bar-button-'+theme]"
            :style="buttonStyle"
            v-if="needShowCancel"
            @click="cancelClicked">{{cancelLabel}}</text>
    </div>
    <div :class="['wxc-search-bar','wxc-search-bar-'+theme]"
         :style="barStyle"
         v-if="mod==='hasDep'">
      <input @blur="onBlur"
             @focus="onFocus"
             @input="onInput"
             @return="onSubmit"
             :disabled="disabled"
             :autofocus="autofocus"
             :return-key-type="returnKeyType"
             :value="value"
             :type="inputType"
             :placeholder="placeholder"
             :class="['search-bar-input','input-has-dep','search-bar-input-'+theme]" />
      <div v-if="disabled"
           @click="inputDisabledClicked"
           class="disabled-input has-dep-disabled"></div>
      <div :class="['bar-dep','.bar-dep-'+theme]"
           @click="depClicked">
        <text class="dep-text">{{depName}}</text>
        <image :src="arrowIcon"
               :aria-hidden="true"
               class="dep-arrow"></image>
      </div>
      <image class="search-bar-icon icon-has-dep"
             :aria-hidden="true"
             :src="inputIcon"></image>
    </div>
  </div>
</template>

<style scoped>
  .wxc-search-bar {
    padding-left: 20px;
    padding-right: 20px;
    background-color: #ffffff;
    width: 750px;
    height: 84px;
    flex-direction: row;
  }

  .wxc-search-bar-yellow {
    background-color: #ffc900;
  }

  .search-bar-input {
    position: absolute;
    top: 10px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 40px;
    padding-left: 60px;
    font-size: 26px;
    width: 624px;
    height: 64px;
    line-height: 64px;
    background-color: #E5E5E5;
    border-radius: 6px;
  }

  .search-bar-input-yellow {
    background-color: #fff6d6;
  }

  .search-bar-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 34px;
    top: 28px;
  }

  .search-bar-close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 120px;
    top: 28px;
  }

  .search-bar-button {
    width: 94px;
    height: 36px;
    font-size: 30px;
    text-align: center;
    background-color: #ffffff;
    margin-top: 16px;
    margin-right: 0;
    color: #333333;
    position: absolute;
    right: 8px;
    top: 9px;
  }

  .search-bar-button-yellow {
    background-color: #FFC900;
  }

  .input-has-dep {
    padding-left: 240px;
    width: 710px;
  }

  .bar-dep {
    width: 170px;
    padding-right: 12px;
    padding-left: 12px;
    height: 42px;
    align-items: center;
    flex-direction: row;
    position: absolute;
    left: 24px;
    top: 22px;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #C7C7C7;
  }

  .bar-dep-yellow {
    border-right-color: #C7C7C7;
  }

  .dep-text {
    flex: 1;
    text-align: center;
    font-size: 26px;
    color: #666666;
    margin-right: 6px;
    lines: 1;
    text-overflow: ellipsis;
  }

  .dep-arrow {
    width: 24px;
    height: 24px;
  }

  .icon-has-dep {
    left: 214px;
  }

  .disabled-input {
    width: 750px;
    height: 64px;
    position: absolute;
    left: 0;
    background-color: transparent;
  }

  .has-dep-disabled {
    width: 550px;
    left: 200px;
  }
</style>

<script>
  import { INPUT_ICON, ARROW_ICON, CLOSE_ICON } from './type';

  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      alwaysShowCancel: {
        type: Boolean,
        default: false
      },
      inputType: {
        type: String,
        default: 'text'
      },
      returnKeyType: {
        type: String,
        default: 'default'
      },
      mod: {
        type: String,
        default: 'default'
      },
      autofocus: {
        type: Boolean,
        default: false
      },
      theme: {
        type: String,
        default: 'gray'
      },
      barStyle: {
        type: Object,
        default: () => ({})
      },
      defaultValue: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '搜索'
      },
      cancelLabel: {
        type: String,
        default: '取消 '
      },
      depName: {
        type: String,
        default: '杭州'
      }
    },
    computed: {
      needShowCancel() {
        return this.alwaysShowCancel || this.showCancel;
      },
      buttonStyle() {
        const { barStyle } = this;
        if (barStyle.backgroundColor) {
          return { backgroundColor: barStyle.backgroundColor }
        }
        return {}
      }
    },
    data: () => ({
      inputIcon: INPUT_ICON,
      closeIcon: CLOSE_ICON,
      arrowIcon: ARROW_ICON,
      showCancel: false,
      showClose: false,
      value: ''

    }),
    created() {
      this.defaultValue && (this.value = this.defaultValue);
      if (this.disabled) {
        this.showCancel = false;
        this.showClose = false;
      }
    },
    methods: {
      onBlur() {
        const self = this;
        setTimeout(() => {
          self.showCancel = false;
          self.detectShowClose();
          self.$emit('wxcSearchbarInputOnBlur', { value: self.value });
        }, 10);
      },
      autoBlur() {
        this.$refs['search-input'].blur();
      },
      onFocus() {
        if (this.isDisabled) {
          return;
        }
        this.showCancel = true;
        this.detectShowClose();
        this.$emit('wxcSearchbarInputOnFocus', { value: this.value });
      },
      closeClicked() {
        this.value = '';
        this.showCancel && (this.showCancel = false);
        this.showClose && (this.showClose = false);
        this.$emit('wxcSearchbarCloseClicked', { value: this.value });
        this.$emit('wxcSearchbarInputOnInput', { value: this.value });
      },
      onInput(e) {
        this.value = e.value;
        this.showCancel = true;
        this.detectShowClose();
        this.$emit('wxcSearchbarInputOnInput', { value: this.value });
      },
      onSubmit(e) {
        this.onBlur();
        this.value = e.value;
        this.showCancel = true;
        this.detectShowClose();
        this.$emit('wxcSearchbarInputReturned', { value: this.value });
      },
      cancelClicked() {
        this.showCancel && (this.showCancel = false);
        this.showClose && (this.showClose = false);
        this.$emit('wxcSearchbarCancelClicked', { value: this.value });
      },
      detectShowClose() {
        this.showClose = (this.value.length > 0) && this.showCancel;
      },
      depClicked() {
        this.$emit('wxcSearchbarDepChooseClicked', {});
      },
      inputDisabledClicked() {
        this.$emit('wxcSearchbarInputDisabledClicked', {});
      },
      setValue(value) {
        this.value = value;
      }
    }
  };
</script>