<template>
  <div :class="['wrapper', hasTopBorder && 'top-border']" :style="newTabBarStyle">
    <div v-if="mutilTabGroups.length > 0">
      <slot>
        <div class="mutil-tab-bar-container" :style="mutilTabBarContainerStyle">
          <div
            v-for="(item, index) in mutilTabGroups"
            :class="['mutil-tab-bar-item', item.disabled && 'tab-bar-item-disabled']"
            :key="index"
          >
            <div class="mutil-icon-wrapper" v-if="!item.launchText">
              <div v-if="item.hasDot === true" class="dot-triangle" :style="{ backgroundColor: item.iconColor }"></div>
              <div class="icon-container">
                <div class="animate-circle" :ref="`animate-circle-${index}`"></div>

                <div
                  class="icon-inner-container"
                  :ref="`animate-circle-bg-${index}`"
                  :style="{ backgroundColor: item.iconColor }"
                  @click="tabBarItemClicked(item, index, tabGroups)"
                  @touchstart="shrinkCircleFn(item, index, tabGroups)"
                  @touchend="expandCircleFn(item, index, tabGroups)"
                >
                  <dof-spinner
                    v-if="item.loading"
                    class="tab-bar-item-loading"
                    :type="resolveLoadingIcon(item.iconColor)"
                  />
                  <image v-else-if="item.icon" class="tab-bar-item-icon" :src="item.icon"></image>
                  <dof-iconfont
                    v-else-if="item.iconfont"
                    :code="item.iconfont"
                    :size="item.iconfontSize || 96"
                    :color="item.iconfontColor || 'rgba(255,255,255, 0.4)'"
                  ></dof-iconfont>
                  <text
                    v-else-if="item.iconText"
                    class="tab-bar-item-icon-text"
                    :style="{
                      color: !!item.iconTextColor ? item.iconTextColor : _iconTextColor
                    }"
                    >{{ item.iconText }}</text
                  >
                </div>
              </div>
            </div>
            <div
              class="is-launch"
              v-if="item.launchText"
              :style="{ backgroundColor: item.launchBg, width: item.launchWidth }"
            >
              <text class="is-launch-text" :style="{ color: item.launchColor }">{{ item.launchText }}</text>
            </div>
          </div>
        </div>
      </slot>
    </div>
    <div class="tab-bar-container" v-else>
      <div class="tab-bar-list">
        <slot>
          <div
            v-for="(item, index) in tabGroups"
            :class="['tab-bar-item', item.disabled && 'tab-bar-item-disabled']"
            :key="index"
          >
            <div class="icon-wrapper">
              <div
                v-if="item.hasDot === true"
                class="dot-triangle"
                :style="{
                  backgroundColor: item.borderColor ? item.borderColor : item.iconColor ? item.iconColor : _iconColor
                }"
              ></div>
              <div class="icon-container" :style="{ width: widthCalcBig(item) }">
                <div class="animate-circle" :ref="`animate-circle-${index}`" :style="{ width: widthCalcSmall(item) }"></div>
                <div
                  class="icon-inner-container"
                  :ref="`animate-circle-bg-${index}`"
                  :style="{
                    width: widthCalc(item),
                    backgroundColor: handleBg(item),
                    borderWidth: '2px',
                    borderColor: item.borderColor ? item.borderColor : item.iconColor ? item.iconColor : _iconColor
                  }"
                  @click="tabBarItemClicked(item, index, tabGroups)"
                  @touchstart="shrinkCircleFn(item, index, tabGroups)"
                  @touchend="expandCircleFn(item, index, tabGroups)"
                >
                  <dof-spinner
                    v-if="item.loading"
                    class="tab-bar-item-loading"
                    :type="resolveLoadingIcon(item.iconColor)"
                  />
                  <image v-else-if="item.icon" class="tab-bar-item-icon" :src="item.icon"></image>
                  <dof-iconfont
                    v-else-if="item.iconfont"
                    :code="item.iconfont"
                    :size="item.iconfontSize || 96"
                    :color="item.iconfontColor || 'rgb(102,102,102)'"
                  ></dof-iconfont>
                  <text
                    v-else-if="item.iconText"
                    class="tab-bar-item-icon-text"
                    :style="{
                      color: item.textColor ? item.textColor : handleIconTextColor(item)
                    }"
                    >{{ item.iconText }}</text
                  >
                </div>
                <!-- mask -->
                <div
                  v-if="_isColmo && !item.disabled && !item.loading"
                  class="mask"
                  :style="{
                    width: widthCalc(item)
                  }"
                  @click="tabBarItemClicked(item, index, tabGroups)"
                ></div>
              </div>
            </div>
            <div class="tab-bar-item-title">
              <text class="tab-bar-item-title-text">{{ item.text }}</text>
            </div>
          </div>
        </slot>
      </div>
    </div>
    <div class="line-wrapper" v-if="isIPhoneX">
      <!-- <div class="line"></div> -->
    </div>
  </div>
</template>

<script>
import Utils from '../utils/index.js'
import Color from 'color'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
const animation = weex.requireModule('animation')
let timer = null
import DofIconfont from '../dof-iconfont'
import DofSpinner from '../dof-spinner'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofIconfont, DofSpinner },
  props: {
    mutilTabGroups: { type: Array, default: () => [] },
    mutilTabBarContainerStyle: {
      type: Object,
      default: () => ({
        justifyContent: 'space-around',
        paddingLeft: '64px',
        paddingRight: '64px'
      })
    },
    tabGroups: { type: Array, default: () => [] },
    iconColor: { type: String, default: '' },
    iconTextColor: { type: String, default: '' },
    tabBarPosition: { type: Object, default: () => ({ position: 'fixed' }) },
    hasTopBorder: { type: Boolean, default: false },
    supportXBar: { type: Boolean, default: true },
    bottomLine: { type: Boolean, default: true },
    warpStyle: { type: Object, default: () => ({}) },
    showAnimate: { type: Boolean, default: true }
  },
  data: () => ({}),
  created() {
    const { supportXBar } = this
    this.isIPhoneX = Utils.env.isIPhoneX() && supportXBar
  },
  computed: {
    _iconTextColor() {
      return this.iconTextColor ? this.iconTextColor : this._theme === 'colmo' ? 'rgba(255,255,255,0.80)' : '#ffffff'
    },
    _iconColor() {
      return this.iconColor ? this.iconColor : this._theme === 'colmo' ? '#B35336' : (this._isDiablo ? '#0490D3' : '#00A4F2')
    },
    newTabBarStyle() {
      const { tabBarPosition } = this
      if (tabBarPosition.position === 'fixed') {
        return { position: 'fixed', left: 0, right: 0, bottom: 0, ...this.warpStyle }
      } else {
        return { left: 0, right: 0, ...this.warpStyle, ...tabBarPosition }
      }
    }
  },
  methods: {
    widthMap(item) {
      return item.width ? Number(item.width) : item.size === 'big' ? 304 : 96
    },
    widthCalc(item) {
      return this.widthMap(item) + 'px'
    },
    widthCalcSmall(item) {
      return this.widthMap(item) - 2 + 'px'
    },
    widthCalcBig(item) {
      return this.widthMap(item) + 14 + 'px'
    },
    handleBg(item) {
      let bg = item.iconColor ? item.iconColor : this._iconColor
      if (bg === 'transparent') bg = this._isColmo ? '#151617' : (this._isDiablo ? '#171C1F' : '#ffffff')
      return bg
    },
    handleIconTextColor(item) {
      if (item.iconTextColor) return item.iconTextColor
      let isDark = new Color(this.handleBg(item)).isDark()
      let color = isDark ? '#ffffff' : '#1E2E37'
      return color
    },
    resolveLoadingIcon(backgroudColor) {
      if (this._isColmo) return 'colmo'
      if (backgroudColor === 'transparent') return 'black'

      var color = new Color(backgroudColor)
      return color.isDark() ? 'white' : 'black'
    },
    tabBarItemClicked(target, index, source) {
      if (target && !target.disabled) {
        this.$emit('dofTabItemClicked', { target, index })
      }
    },

    _animationFn(el, styles, options, callback) {
      let { timing = 'linear', duration = 500, delay = 0 } = options
      // Core.alert(timing)
      animation.transition(
        el,
        {
          styles: styles,
          timingFunction: timing,
          duration: duration,
          delay
        },
        () => {
          callback && callback()
        }
      )
    },
    shrinkCircleFn(target, index, source) {
      if (this._isColmo || !this.showAnimate) return
      if (target && !target.disabled) {
        let elCircle = this.$refs[`animate-circle-${index}`][0]
        let elImg = this.$refs[`animate-circle-bg-${index}`][0]
        let scale = target.width && target.width > 500 ? 'scale(0.98,0.98)' : 'scale(0.95,0.95)'
        this._animationFn(
          elCircle,
          {
            transform: scale,
            transformOrigin: 'center center'
          },
          { duration: 100 },
          () => {}
        )
        this._animationFn(elImg, { transform: scale, transformOrigin: 'center center' }, { duration: 100 }, () => {})
      }
    },
    expandCircleFn(target, index, source) {
      if (this._isColmo || !this.showAnimate) return
      if (target && !target.disabled) {
        let elCircle = this.$refs[`animate-circle-${index}`][0]
        let elImg = this.$refs[`animate-circle-bg-${index}`][0]
        timer = setTimeout(() => {
          this._animationFn(
            elImg,
            { transform: 'scale(1,1)', transformOrigin: 'center center' },
            { duration: 100 },
            () => {}
          )
          this._animationFn(
            elCircle,
            {
              transform: 'scale(1.2,1.2)',
              opacity: 0,
              transformOrigin: 'center center'
            },
            {},
            () => {
              animation.transition(elCircle, {
                styles: {
                  transform: 'scale(1,1)',
                  opacity: 1,
                  transformOrigin: 'center center'
                },
                duration: 0,
                timingFunction: 'linear',
                delay: 0
              })
            }
          )
        }, 100)
      }
    }
  },
  beforeDestroy() {
    clearTimeout(timer)
  }
}
</script>

<style scoped>
.wrapper {
  /* width: 750px; */
  background-color: #ffffff;
  box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);
}
.top-border {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #e5e5e8;
}
.tab-bar-list {
  flex-direction: row;
  justify-content: space-around;
  /* background-color: #ffffff; */
  padding: 12px 10px 16px;
}
.mutil-tab-bar-container {
  flex-direction: row;
  align-items: center;
}
.mutil-tab-bar-item {
  align-items: center;
  opacity: 1;
}
.is-launch {
  height: 96px;
  border-radius: 48px;
  background-color: #ffffff;
  /* flex: 1; */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* width: 306px; */
}
.is-launch-text {
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: #ffffff;
}
.tab-bar-item {
  /* flex: 1; */
  align-items: center;
  opacity: 1;
}
.tab-bar-item-disabled {
  opacity: 0.3;
}
.icon-wrapper {
  flex: 1;
  /* border-width:
1px; */
}
.mutil-icon-wrapper {
  width: 110px;
}
.icon-container {
  /* width: 110px; */
  height: 110px;
  border-radius: 55px;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
}
.dot-triangle {
  position: absolute;
  right: 7px;
  top: 83px;
  width: 20px;
  height: 18px;
  /* background-color: #00A4F2; */
  /* opacity: 0.5; */
}
.icon-inner-container {
  /* width: 96px; */
  height: 96px;
  border-radius: 48px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.mask {
  position: absolute;
  top: 7px;
  left: 7px;
  height: 96px;
  border-radius: 48px;
}
.mask:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.animate-circle {
  position: absolute;
  /* width: 96px; */
  /* 比icon-inner-container少两个像素，解决安卓毛边 */
  height: 94px;
  border-radius: 47px;
  background-color: #e5e5e8;
}
.tab-bar-item-icon {
  width: 96px;
  height: 96px;
}
.tab-bar-item-loading {
  width: 48px;
  height: 48px;
}
.tab-bar-item-icon-text {
  font-family: PingFangSC-Medium;
  font-size: 28px; /* color: #ffffff; */
  letter-spacing: 0;
  text-align: center;
  line-height: 28px;
}
.tab-bar-item-title {
  padding-top: 9px;
}
.tab-bar-item-title-text {
  font-family: PingFangSC-Regular;
  color: #1e2e37;
  letter-spacing: 0;
  text-align: center;
  font-size: 24px;
  /* height: 24px; */
  /* line-height: 24px; */
}
.line-wrapper {
  height: 68px;
  flex-direction: row;
  justify-content: center;
  background-color: #ffffff;
}
.line {
  width: 268px;
  height: 10px;
  background-color: #1e2e37;
  opacity: 0.1;
  border-radius: 5px;
  margin-top: 42px;
}
</style>
<style scoped src="./diablo.css"></style>
<style scoped src="./colmo.css"></style>
