<template>
  <view class="xd-navbar" :style="{height: getBoxHeight+'rpx'}">
    <view class="xd-navbar-fixed" :style="{background: uiBgColor}">
      <!-- 状态栏 -->
      <view :style="{height:(statusBarHeight) +'rpx'}"></view>
      <!-- 导航栏内容 -->
      <view
        class="xd-navbar-content"
        :style="{
          height:navBarHeight+'rpx',
          width:windowWidth+'px',
          paddingRight: isBack? '30rpx': '20rpx'
        }"
      >
        <view v-if="isBack" class="xd-navbar-content__icons" @click.stop="back">
          <xd-font-icon :size="40*$isIpadCC" icon="iconxiazai6" :color="uiBackIconColor"></xd-font-icon>
        </view>
        <view class="xd-navbar-content__search">
          <input
            :style="{
              borderColor: uiInputBorderColor,
              borderRadius: inputBorderRadius,
              height: navBarHeight * isH5Num + 'rpx',
              lineHeight: navBarHeight * isH5Num + 'rpx',
              fontSize: ($isIpadCC * 30) + 'rpx',
              background: inputBackground,
              paddingRight:  isSearch? ((140*$isIpadCC) + 'rpx'): ((30*$isIpadCC) + 'rpx'),
              paddingLeft:  60*$isIpadCC + 'rpx',
              borderRadius: 20* $isIpadCC + 'rpx'
            }"
            class="app-input"
            :focus="false"
            @confirm="doneInput"
            type="text"
            confirm-type="search"
            :adjust-position="false"
            @input="onInput"
            :placeholder="placeholder"
            v-model="searchValue"/>
          <xd-font-icon color="#9b9b9b" :size="34*$isIpadCC" icon="iconsousuo"></xd-font-icon>
          <button
            :style="{
              height: navBarHeight * isH5Num + 'rpx',
              lineHeight: navBarHeight * isH5Num + 'rpx',
              background: styleMainColor,
              color: '#fff',
              fontSize: ($isIpadCC * 30) + 'rpx',
              borderRadius: 20* $isIpadCC + 'rpx',
              width: 128* $isIpadCC + 'rpx'
            }"
            @click="onSearch"
          >搜索</button>
        </view>
      </view>
    </view>
    <view :style="{height: getBoxHeight+'rpx'}"></view>
  </view>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdButton from "@/components/XdButton/XdButton";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';

  /**
   * XdSearchBar 全局UI
   * @description 自定义header tabbar功能
   * @tutorial
   * @property {Boolean}  isBack            开启返回按钮功能并启动返回操作事件  （可选） 默认：false
   * @property {String}   backIconColor     返回图标显示颜色值                （可选） 默认：使用主色调 $mainColor
   * @property {Boolean}  isSearch          显示搜索按钮                     （可选）  默认：false
   * @property {String}   placeholder       设置placeholder文本              （可选）  默认：搜索
   * @property {String}   bg                设置tabbar背景颜色主             （可选）  默认：为页面主色调 $mainColor
   * @property {String}   inputBorderColor  输入框边框颜色                   （可选）   默认：为页面主色调 $mainColor
   * @property {String}   inputBorderRadius 输入框边框圆角设置                （可选）   默认：30rpx
   * @property {String}   inputBackground   输入框背景颜色                    （可选）   默认 #fff
   *
   * @slot   接受默认插槽
   *
   * @event {Function} click或者tap         按钮点击事件e
   */

  export default {
    name: "XdSearchBar",
    components: {XdFontIcon, XdButton},
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      isBack: {
        type: Boolean,
        default: false
      },
      backIconColor: {
        type: String,
        default: '',
      },
      isSearch: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '搜索',
      },
      bg : {
        type: String,
        default: '',
      },
      inputBorderColor: {
        type: String,
        default: '',
      },
      inputBorderRadius: {
        type: String,
        default: '30rpx',
      },
      inputBackground: {
        type: String,
        default: '#fff',
      }
    },
    data() {
      return {
        statusBarHeight: 20, //rpx
        navBarHeight: 90, //H5的默认值 rpx
        windowWidth: 375, //页面宽度px
        searchValue: '', //搜索值
        uiBgColor: '', //插件背景颜色
        uiColor: '', //插件文本颜色
        uiBackIconColor:'', //返回按钮颜色
        uiInputBorderColor: '', //输入框边框颜色
        inputTimeer: null, //无搜索按钮时候输入事件延时处理
        isH5Num: 0.8,
        styleMainColor: '', //插件主题风格样式
      };
    },
    computed:{
      getBoxHeight() {
        return (this.statusBarHeight + this.navBarHeight);
      },
    },
    watch: {
      value(newVal) {
        this.searchValue = newVal
      }
    },
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
      
      this.uiBgColor = this.styleMainColor;
      this.uiBackIconColor = '#fff';
      this.uiInputBorderColor = this.styleMainColor;
      if(this.bg) {
        this.uiBgColor = this.bg;
      }

      //#ifdef H5
      this.isH5Num = 0.7;
      // #endif

      if(this.backIconColor) {
        this.uiBackIconColor = this.backIconColor;
      }

      if (this.inputBorderColor) {
        this.uiInputBorderColor = this.inputBorderColor;
      }

      this.setNavBar();
      uni.onWindowResize((res) => {
        this.setNavBar();
      });

      this.searchValue = this.value;

    },
    methods: {
      setNavBar(){
        // 获取手机系统信息
        const info = getApp().globalData.$systemInfo
        // 设置状态栏高度
        this.statusBarHeight = info.statusBarHeight * this.$pxNum;
        this.windowWidth = info.windowWidth
        // h5 app mp-alipay
        // #ifndef H5 || APP-PLUS || MP-ALIPAY
        // 获取胶囊的位置
        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
        this.navBarHeight = ((menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)) * this.$pxNum
        this.windowWidth = menuButtonInfo.left
        // #endif
      },
      back() {
        this.$emit('back');
      },


      doneInput() {
        uni.hideKeyboard()
      },

      /**
       * @description 输入事件
       */
      onInput(e) {
        //有搜索按钮不启动输入事件
        if(this.isSearch) return;
        if(this.inputTimeer) {
          clearTimeout(this.inputTimeer);
          this.inputTimeer = null;
        }
        //延时处理逻辑
        this.inputTimeer = setTimeout(()=>{
          this.searchValue = e.target.value.trim();
          this.$emit('onSearch', this.searchValue);
          this.$emit('input', this.searchValue)
          console.log(this.searchValue);
        },700);
      },

      onSearch(){
        console.log(this.searchValue.trim())
        this.$emit('onSearch', this.searchValue.trim());
        this.$emit('input', this.searchValue.trim())
      },
    }
  }
</script>

<style lang="less">
  .xd-navbar {
    &-fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      width: 100%;
      background-color: @xd-base-color;
    }

    &-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 unit(30, rpx) 0 unit(20, rpx);
      height: unit(90, rpx);
      box-sizing: border-box;


      &__icons {
        margin-right: unit(20, rpx);
      }

      &__search {
        position: relative;
        flex: 1;

        /deep/ .xd-iconfont {
          position: absolute;
          left: unit(16, rpx);
          top: 50%;
          transform: translateY(-50%);
        }

        button {
          position: absolute;
          right: unit(0, rpx);
          top: unit(0, rpx);
          padding: 0;

          &:hover {
            opacity: 0.85;
          }
        }

        .app-input {
          background-color: @xd-text-color-inverse;
          border-width: unit(2, rpx);
          border-style: solid;
          box-sizing: border-box;
        }

      }

    }

  }
</style>
