<template>
  <view>
    <view class="cu-custom" :style="'height:' + CustomBar + 'px; '">
      <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'']">
        <!-- 左侧 图标/文字 -->
        <view class="action" v-if="isLeftIcon" @tap="leftBtn" style="height: 50rpx;">
          <u-icon :name="iconLeft" size="23" color="#ffffff"></u-icon>
        </view>
        <view v-if="!isLeftIcon" @tap="leftBtn" style="width: 70rpx;">
          <slot name="left"></slot>
        </view>
        <!-- 中间搜索 -->
        <!-- #ifdef APP-PLUS -->
        <view v-if="isSeach" :style="[{top:StatusBar + 'px'}]" >
          <u-search placeholder="请输入搜索内容" :showAction="false" height="30" v-model="keyword"
            @search="searchText" clearabled @clear="clearKeyword"></u-search>
        </view>
        <!--#endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view v-if="isSeach" :style="[{top:StatusBar + 'px'}]" style="margin-left: 50rpx;">
          <u-search placeholder="请输入搜索内容" :showAction="false" height="30" v-model="keyword"
            @search="searchText" clearabled @clear="clearKeyword"></u-search>
        </view>
        <!--#endif -->
        <view v-if="!isSeach" @tap="leftBtn">
          <slot name="center"></slot>
        </view>
        <!-- 右侧 图标/文字 -->
        <view v-if="isRightIcon" class="action" @tap="rightBtn" style="height: 50rpx;">>
          <u-icon :name="iconRightIcon" size="23" color="#ffffff"></u-icon>
        </view>
        <view v-if="!isRightIcon" @tap="rightBtn" style="width: 70rpx;" class="float-right margin-right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        StatusBar: this.StatusBar,
        CustomBar: this.CustomBar,
        keyword: ""
      };
    },
    name: 'cu-custom',
    computed: {
      style() {
        var StatusBar = this.StatusBar;
        var CustomBar = this.CustomBar;
        var bgImage = this.bgImage;
        var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
        if (this.bgImage) {
          style = `${style}background-image:url(${bgImage});`;
        } else if (!!this.bgColor) {
          style += 'background-color:' + this.bgColor
        }
        if (!!this.color) {
          style += ';color:' + this.color
        }
        return style
      }
    },
    props: {
      color: {
        type: String,
        default: ''
      },
      bgColor: {
        type: String,
        default: ''
      },
      isLeftIcon: {
        type: [Boolean, String],
        default: false
      },
      isSeach: {
        type: [Boolean, String],
        default: false
      },
      isRightIcon: {
        type: [Boolean, String],
        default: false
      },
      bgImage: {
        type: String,
        default: ''
      },
      iconLeft: {
        type: String,
        default: 'arrow-left'
      },
      iconRight: {
        type: String,
        default: ''
      },
    },
    watch: {},
    methods: {
      leftBtn() {
        this.$emit("leftBtn")
      },
      rightBtn() {
        this.$emit("rightBtn")
      },
      searchText() {
        this.$emit("searchText", this.keyword)
      },
      clearKeyword(){
        this.keyword = null;
      },
    },

  }
</script>

<style>
  .action {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 7rpx;
    border-radius: 10rpx;
    color: white;
  }
</style>
