<template>
  <div
    :class="['minibar-wrapper', hasBottomBorder && 'bottom-border', isFixed && 'isFixed']"
    :style="{ 'background-color': backgroundColor_ }"
    :key="_isColmo + 'minibar'"
  >
    <div class="dof-minibar" :style="newBarStyle">
      <div class="left" @click="leftButtonClicked" :aria-label="leftButtonBlindHelp" :accessible="true">
        <slot name="left">
          <image :src="leftButton_" v-if="leftButton_ && !leftText" class="left-button"></image>
          <dof-iconfont
            style="width: 58px;"
            v-if="!leftButton_ && !leftText && _isColmo"
            :code="'\u4717'"
            :size="64"
            :color="'rgba(255,255,255,0.80)'"
            @dofIconFontClicked="leftButtonClicked"
          ></dof-iconfont>
          <text v-if="leftText" class="icon-text" :style="newTextStyle">{{ leftText }}</text>
        </slot>
      </div>
      <slot name="middle">
        <div class="middle-title-wrapper">
          <text class="middle-title" :style="newTextWrapStyle" :aria-label="title ? title + '。文本。' : ''">{{
            title
          }}</text>
          <text
            v-if="subTitle"
            class="middle-sub-title"
            :aria-label="subTitle ? subTitle + '。文本。' : ''"
            :style="newTextWrapStyleSubTitle"
            >{{ subTitle }}</text
          >
        </div>
      </slot>
      <div class="right" @click="rightButtonClicked">
        <slot name="right">
          <image
            v-if="rightButton_ && rightButton_ !== 'default' && !rightText"
            class="right-button"
            :src="rightButton_"
            :aria-hidden="true"
          ></image>
          <dof-iconfont
            class="right-button"
            v-if="rightButton_ === 'default' && _isColmo && !rightText"
            :code="'\u4807'"
            :size="64"
            @dofIconFontClicked="rightButtonClicked"
          ></dof-iconfont>
          <text
            v-if="rightText"
            class="icon-text"
            :aria-label="rightText ? rightText + '。按钮。' : ''"
            :style="newTextStyle"
            >{{ rightText }}</text
          >
        </slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bottom-border {
  border-bottom-width: 1px;
  border-color: #e5e5e8;
}
.dof-minibar {
  width: 750px;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}
.isFixed {
  position: fixed;
  top: 0;
  left: 0;
}

.left {
  width: 160px;
  /* width: 64px; */
  height: 88px;
  padding-left: 32px;
  justify-content: center;
  /* margin-right: 12px; */
}

.middle-title-wrapper {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.middle-title {
  font-family: PingFangSC-Medium;
  /* width: 390px; */
  lines: 1;
  text-overflow: ellipsis;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  font-weight: 600;
}
.middle-sub-title {
  font-family: PingFangSC-Medium;
  width: 390px;
  lines: 1;
  text-overflow: ellipsis;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
}

.right {
  width: 160px;
  /* width: 84px; */
  min-width: 84px;
  height: 88px;
  padding-right: 32px;
  align-items: flex-end;
  justify-content: center;
}

.left-button {
  width: 58px;
  height: 58px;
}

.right-button {
  width: 58px;
  height: 58px;
}

.icon-text {
  font-size: 28px;
  color: #1e2e37;
}
</style>
<style src="./diablo.css"></style>
<style src="./colmo.css"></style>

<script>
const Navigator = weex.requireModule('navigator')
const platform = weex.config.env.platform.toLowerCase()
import Utils from '../utils'
import { back_black as backBlack, back_white as backWhite, back_diablo, icon_more as iconMore, icon_more_diablo } from '../setting/icon.base64'
import { STYLE_MAP } from './style'
import DofIconfont from '../dof-iconfont'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

export default {
  components: { DofIconfont },
  mixins: [ColmoMixin, DiabloMixin],
  props: {
    isFixed: {
      type: Boolean,
      default: false
    },
    isImmersion: {
      type: Boolean,
      default: true
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    hasBottomBorder: {
      type: Boolean,
      default: false
    },
    leftButton: {
      type: String,
      default: ''
    },
    textColor: {
      type: String,
      default: ''
    },
    rightButton: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '标题'
    },
    subTitle: {
      type: String,
      default: ''
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    useDefaultReturn: {
      type: Boolean,
      default: true
    },
    show: {
      type: Boolean,
      default: true
    },
    barStyle: {
      type: Object
    },
    middleTextStyle: {
      type: Object
    }
  },
  created() {
    this.isIPhoneX = Utils.env.isIPhoneX()
  },
  computed: {
    themeStyle() {
      const _theme = this._theme || (this._isDiablo ? 'diablo' : 'default')
      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    backgroundColor_() {
      return this.backgroundColor ? this.backgroundColor : this.themeStyle.backgroundColor
    },
    leftButton_() {
      return this.leftButton ? this.leftButton : !this._isColmo ? (this._isDiablo ? back_diablo : backBlack) : ''
    },
    rightButton_() {
      if (this.rightButton === 'default') {
        return this._isColmo ? 'default' : iconMore
      }
      return this.rightButton ? this.rightButton : ''
    },
    leftButtonBlindHelp() {
      return `${this.leftText || '返回'}。按钮。`
    },
    statusBarHeight: function() {
      let result = '20'
      if (weex.config.env.statusBarHeight) {
        if (weex.config.env.platform === 'iOS' || weex.config.env.platform == 'harmony') {
          // iOS使用pt为单位
          result = weex.config.env.statusBarHeight
        } else {
          // 安卓使用px为单位
          result = weex.config.env.statusBarHeight / weex.config.env.scale
        }
      }
      return result
    },
    newBarStyle() {
      let result
      const { barStyle, backgroundColor_ } = this
      const backgroundColor = backgroundColor_
      let isIPhoneSE = weex.config.env.deviceModel.substr(6) === '12,8'
      // harmony
      if (Utils.env.isHarmony())
        return {
          backgroundColor,
          height: +this.statusBarHeight + 44 + 'wx',
          'padding-top': this.statusBarHeight + 'wx',
          ...barStyle
        }

      if (this.isImmersion) {
        // 全屏显示，weex自行处理状态栏高度
        result = {
          backgroundColor,
          paddingTop: (isIPhoneSE ? 20 : this.statusBarHeight) + 'wx',
          //   height: +this.statusBarHeight + 44 + 'wx',
          ...barStyle
        }
      } else {
        // 非全屏显示，app已处理状态栏高度
        result = {
          backgroundColor,
          height: '44wx',
          ...barStyle
        }
      }
      return result
    },
    newTextWrapStyle() {
      if (this.textColor) {
        return {
          color: this.textColor,
          ...this.middleTextStyle
        }
      } else {
        return {
          color: this.themeStyle.middleTitleColor,
          ...this.middleTextStyle
        }
      }
    },
    newTextWrapStyleSubTitle() {
      if (this.textColor) {
        return {
          color: this.textColor
        }
      } else {
        return {
          color: this.themeStyle.middleSubTitleColor,
          ...this.middleTextStyle
        }
      }
    },
    newTextStyle() {
      if (this.textColor) {
        return {
          color: this.textColor,
          marginLeft: '0px'
        }
      }
      return {}
    }
  },
  methods: {
    leftButtonClicked() {
      if (this.useDefaultReturn) {
        Navigator.pop({}, e => {})
      }
      this.$emit('dofMinibarLeftButtonClicked', {})
    },
    rightButtonClicked() {
      const hasRightContent = this.rightText || this.rightButton || (this.$slots && this.$slots.right)
      hasRightContent && this.$emit('dofMinibarRightButtonClicked', {})
    }
  }
}
</script>
