<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':'',bgColor]">
        <view class="padding-left">
          <image class="margin-right-xs" v-for="(item, index) in leftImage" @click="btn('left', index)" :src="item"
            mode="widthFix" style="width: 55rpx;"></image>
        </view>
        <view :style="[{top:StatusBar + 'px'}]">
          <u-search placeholder="请输入课程名称..." :showAction="false" v-model="keyword" @search="searchWorking"></u-search>
        </view>
        <!-- 中间搜索 -->
        <!-- #ifdef APP-PLUS || H5 -->
        <view class="padding-right">
          <image class="margin-left-xs" v-for="(item, index) in rightImage" @click="btn('right', index)" :src="item"
            mode="widthFix" style="width: 55rpx;"></image>
        </view>
        <!--#endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view>
          <image class="margin-left-xs" v-for="(item, index) in rightImage" @click="btn('right', index)" :src="item" mode="widthFix"
            style="width: 55rpx;"></image>
        </view>
        <!--#endif -->
      </view>
    </view>
  </view>
</template>

<script>
  import list from '../../uni_modules/uview-ui/libs/config/props/list';
  export default {
    data() {
      return {
        StatusBar: this.StatusBar,
        CustomBar: this.CustomBar,
        keyword: null,
      };
    },
    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});`;
        }
        return style
      }
    },
    props: {
      bgImage: {
        type: String,
        default: ''
      },
      // 默认背景色
      bgColor: {
        type: String,
        default: ''
      },
      // 左侧图标
      leftImage: {
        type: Array,
        default: []
      },
      // 右侧图标
      rightImage: {
        type: Array,
        default: []
      },
      // 搜索默认值
      searchParam: {
        type: String,
        default: ""
      },
    },
    methods: {
      btn(flay, index) {
        this.$emit("customBtn", {
          flay: flay,
          index: index
        })
      },
      searchWorking() {
        this.$emit("searchWorking", this.keyword)
      },
    }
  }
</script>

<style>
  .center {
    position: absolute;
    left: 146upx;
    width: calc(100% - 96upx - 60upx - 120upx - 20upx);
    line-height: 1.6em;
  }
</style>
