<template>
  <div
    :class="[
      'widget',
      hasMargin && 'tab-margin',
      tabTitles.length === 2 && !isSlot && type != 'third-group' && !isFlexStart && 'tab-padding-160',
      tabTitles.length === 3 && !isSlot && type != 'third-group' && !isFlexStart && 'tab-padding-40',
      isSlot && 'flex-expand-layout',
      type == 'third-group' && 'thirdTabPanel'
    ]"
    :style="{ backgroundColor: mergeStyleOption.bgColor }"
  >
    <!-- 新增三类固定点击标签 third-group-->
    <div
      :class="['dof-third-panel']"
      v-if="type === 'third-group' && !_isColmo"
      :style="{ 'background-color': mergeStyleOption.bgColor }"
      :accessible="true"
      :aria-label="text"
    >
      <div class="btn-group-wrap" :style="wrapStyle">
        <text
          v-for="(text, index) in tabTitles"
          :key="index"
          :class="[
            'btn-text',
            index == 0 && 'leftRadius',
            index == tabTitles.length - 1 && 'rightRadius',
            !disabled && pattern === 'text' && `dof-text-highlight-${type}`
          ]"
          :data-index="index"
          :style="[
            index < tabTitles.length - 1 ? verticalLineStyle : '',
            textStyle,
            index == tabCheckedIndex ? textBtnStyle(index) : ''
          ]"
          @click="onTextClicked(index)"
          >{{ text }}</text
        >
      </div>
    </div>
    <dof-diamond-tab
      v-if="type === 'third-group' && _isColmo"
      :tabData="tabTitles"
      :bgColor="'#151617'"
      :activeTextColor="'rgb(230, 230, 230)'"
      :touchColor="'rgb(26, 26, 26)'"
      :textFontSize="'28px'"
      :active="tabCheckedIndex"
      @tabActiveChange="tabActiveChange"
    />
    <!-- 三级标签页 third 带了图标 以及文字有背景色和圆角-->
    <scroller
      :class="['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']"
      :show-scrollbar="false"
      scroll-direction="horizontal"
      v-if="type === 'third'"
    >
      <div
        :class="['title-item', tabTitles.length > 5 && 'padding-layout-8']"
        v-for="(v, index) in tabTitles"
        :key="index"
        :ref="'dof-tab-title-' + index"
        @click="onClicked(index, tabTitles.length - 1)"
      >
        <div
          class="tab-text-wrapper thidrd-wrapper"
          :style="{
            backgroundColor:
              currentPage === index
                ? mergeStyleOption.activeBoxBgColor
                : (v.icon || v.activeIcon) && !_isDiablo
                ? 'transparent'
                : mergeStyleOption.boxBgColor,
            borderColor:
              currentPage === index && mergeStyleOption.activeBorderColor
                ? mergeStyleOption.activeBorderColor
                : mergeStyleOption.borderColor
          }"
        >
          <image class="avatar-icon" v-if="v.icon || v.activeIcon" :src="currentPage === index ? v.activeIcon : v.icon">
          </image>
          <text
            class="tab-text third-text"
            :style="{
              fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',
              color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor
            }"
            >{{ v.title }}</text
          >
        </div>
      </div>
    </scroller>
    <!-- 一级和二级标签 else-->
    <!-- :style="{backgroundColor: '#00A4F2'}" -->
    <scroller
      :class="['tab-title-list', tabTitles.length <= 5 && 'space-around-layout', isFlexStart && 'flex-start-layout']"
      :show-scrollbar="false"
      scroll-direction="horizontal"
      v-if="type !== 'third' && type !== 'third-group'"
    >
      <div
        :class="['title-item', tabTitles.length > 5 && 'padding-layout-32', type == 'primary' && 'title-item-primary', isFlexStart && tabTitles.length - 1 !== index && 'flex-start-item']"
        v-for="(v, index) in tabTitles"
        :key="index"
        :ref="'dof-tab-title-' + index"
        @click="onClicked(index, tabTitles.length - 1)"
      >
        <div :class="['tab-text-wrapper', isSlot && 'minibar-inner']">
          <div class="flexDirection" :class="[v.hasDotNum && 'dot-num-tip-right']">
            <text
              :class="['tab-text', 'dot-tab-text']"
              :style="{
                fontSize: isFlexStart && currentPage === index ? '36px' : isFlexStart && currentPage !== index ? '28px' : type === 'primary' ? '32px'  : '28px',
                fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',
                color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor
              }"
              >{{ v.title }}</text
            >
            <div v-if="v.hasDotTip">
              <div class="dot-tip" :style="{ 'background-color': v.badgeColor ? v.badgeColor : '#F56428' }"></div>
            </div>
            <text
              class="dot-num-tip-text"
              :style="{ 'background-color': v.badgeColor ? v.badgeColor : '#F56428' }"
              v-else-if="v.hasDotNum"
              >{{ dotNum(v.hasDotNum, v.badgeMax) }}</text
            >
          </div>
        </div>
        <div
          v-if="type !== 'third' && type !== 'third-group'"
          :class="[
            type == 'primary' ? 'border-bottom-line' : 'border-bottom-line-secondary',
            v.hasDotTip && 'dot-bottom-border',
            v.hasDotNum && 'dotNum-bottom-borderWidth'
          ]"
          :style="{
            backgroundColor: currentPage === index ? mergeStyleOption.activeBottomColor : 'transparent'
          }"
        ></div>
      </div>
    </scroller>
  </div>
</template>

<script>
const dom = weex.requireModule('dom')
import { THEME_COLOR_SET } from '../../theme/config'
import ColmoMixin from '../../mixins/colmo'
import DofDiamondTab from '../dof-diamond-tab'
import DiabloMixin from '../../mixins/diablo'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofDiamondTab },
  props: {
    type: {
      type: String,
      default: 'secondary'
    },
    theme: {
      type: String,
      default: 'default'
    },
    isSlot: {
      type: Boolean,
      default: false
    },
    tabTitles: {
      type: Array,
      default: () => []
    },
    tabCheckedIndex: {
      type: [Number, String],
      default: 0
    },
    tabStyles: {
      type: Object,
      default: () => ({})
    },
    hasMargin: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: String,
      default: ''
    },
    isFlexStart: {
      type: Boolean,
      default: false
    },
  },
  data: () => ({
    currentPage: 0
  }),
  computed: {
    defaultStyleOption() {
      const base = {
        isActiveTitleBold: true,
        iconWidth: 70,
        iconHeight: 70,
        height: 88,
        fontSize: 24,
        hasActiveBottom: true,
        activeBottomColor: '#1E2E37',
        hasRightIcon: false
      }
      const defaultStyle = {
        ...base,
        bgColor: '#ffffff',
        titleColor: '#8E969B',
        activeTitleColor: '#1E2E37',
        boxBgColor: '#F6F7F9',
        activeBoxBgColor: '#232323'
      }
      const colmoStyle = {
        ...base,
        isActiveTitleBold: false,
        bgColor: '#151617',
        titleColor: 'rgba(255,255,255,0.4)',
        activeTitleColor: 'rgba(255,255,255,0.8)',
        boxBgColor: '#151617',
        activeBoxBgColor: '#151617',
        activeBottomColor: '#B35336',
        borderColor: 'rgba(51, 51, 51, 1)',
        activeBorderColor: '#B35336'
      }
      const diabloStyle = {
        ...base,
        bgColor: '#101315',
        titleColor: '#8E969B',
        activeTitleColor: '#cfcfd0',
        activeBottomColor: '#cfcfd0',
        boxBgColor: '#171c1f',
        activeBoxBgColor: '#cfcfd0'
      }
      return this._isColmo ? colmoStyle : (this._isDiablo ? diabloStyle : defaultStyle)
    },
    mergeStyleOption() {
      let { type, theme, tabStyles, defaultStyleOption } = this
      if (type === 'third') {
        if (this._isColmo) {
          let res = { ...defaultStyleOption, ...tabStyles }
          if (this.bgColor) res.bgColor = this.bgColor
          return res
        }
        if (theme === 'default') {
          return {
            ...defaultStyleOption,
            ...{
              activeTitleColor: this._isDiablo ? '#1e2e37' : '#fff',
              titleColor: this._isDiablo ? 'rgba(255,255,255,0.4)' : '#1e2e37'
            },
            ...tabStyles
          }
        } else if (theme === 'primary') {
          return {
            ...defaultStyleOption,
            ...tabStyles,
            ...{
              bgColor: THEME_COLOR_SET[theme],
              // boxBgColor: '#5088ff',
              boxBgColor: THEME_BOX_BGCOLOR_SET[theme],
              activeBoxBgColor: '#ffffff',
              titleColor: '#ffffff',
              activeTitleColor: THEME_COLOR_SET[theme]
            }
          }
        } else {
          return { ...defaultStyleOption, ...tabStyles, ...{ boxBgColor: THEME_BOX_BGCOLOR_SET[theme] } }
        }
      } else if (type === 'third-group') {
        if (this._isColmo) return { bgColor: '#151617' }
        return { bgColor: this._isDiablo ? '#101315' : THEME_COLOR_SET[theme] }
      } else {
        if (theme === 'default') {
          let res = this.bgColor ? { bgColor: this.bgColor } : {}
          return { ...defaultStyleOption, ...tabStyles, ...res }
        } else {
          return {
            ...defaultStyleOption,
            ...tabStyles,
            ...{
              bgColor: THEME_COLOR_SET[theme],
              titleColor: 'rgba(255,255,255, 0.6)',
              activeTitleColor: '#ffffff',
              activeBottomColor: '#ffffff'
            }
          }
        }
      }
    },

    // 新增三类固定标签
    wrapStyle() {
      const { theme } = this
      if (theme == 'default') {
        return {
          borderWidth: '2px',
          borderStyle: 'solid',
          borderColor: this._isDiablo ? '#1E2123' : '#f3f4f4'
        }
      } else {
        return {
          borderWidth: '2px',
          borderStyle: 'solid',
          borderColor: 'rgba(255, 255, 255, 0.3)'
        }
      }
    },

    textStyle() {
      const { theme } = this
      if (theme == 'default') {
        return {
          color: this._isDiablo ? '#797c7e' : '#8E969B'
        }
      } else {
        return {
          color: '#ffffff'
        }
      }
    },
    verticalLineStyle() {
      const { theme } = this
      if (theme == 'default') {
        return {
          borderRightWidth: '2px',
          borderRightStyle: 'solid',
          borderRightColor: this._isDiablo ? '#1E2123' : '#f3f4f4'
        }
      } else {
        return {
          borderRightWidth: '2px',
          borderRightStyle: 'solid',
          borderRightColor: 'rgba(255, 255, 255, 0.3)'
        }
      }
    },
    hackMarginTop() {
      // const platform = weex.config.env.platform
      // if (platform === 'iOS') return -1
      // if (platform === 'harmony') return 0
      // return 2
      return 0
    },
    textBtnStyle() {
      const { theme } = this
      let hackH = this.hackMarginTop
      return function(i) {
        if (theme == 'default') {
          return {
            color: this._isDiablo ? '#cfcfd0' : '#1E2E37',
            backgroundColor: this._isDiablo ? '#1E2123' : '#f3f4f4',
            marginTop: `${hackH}px`
          }
        } else {
          return {
            color: THEME_COLOR_SET[theme],
            backgroundColor: '#FFFFFF',
            marginTop: `${hackH}px`
          }
        }
      }
    }
  },
  methods: {
    onClicked(index, len) {
      this.currentPage = index
      this.$emit('dofTabSelected', { index: index })
      len > 4 && this._scrollToCurrentTab(index)
    },
    tabActiveChange(index) {
      this.onClicked(index)
    },
    _scrollToCurrentTab(index) {
      const currentTabEl = this.$refs[`dof-tab-title-${index}`][0]
      const firstTabEl = this.$refs['dof-tab-title-0'][0]
      const SAFE_DISTANCE = 16.3

      dom.getComponentRect(currentTabEl, res => {
        let {
          size: { height, width = 110, left }
        } = res
        const appearNum = Math.floor(750 / (width + SAFE_DISTANCE))
        let offset = (-(750 - width) / 2) | 0

        if (index + 1 < appearNum) {
          dom.scrollToElement(firstTabEl, {
            offset: -16.3
          })
        } else {
          dom.scrollToElement(currentTabEl, {
            offset,
            animated: true
          })
        }
      })
    },
    // 三类固定
    onTextClicked(index) {
      // weex下不能完成事件委托
      this.tabCheckedIndex = index
      this.$emit('dofTabSelected', { index: index })
    },
    dotNum(content, max) {
      let value = ''
      let curContent = Number(content)
      if (max && curContent >= max) {
        value = `${max}+`
      } else {
        value = content
      }
      return value
    }
  },
  watch: {
    tabCheckedIndex: {
      handler(n, o) {
        let len = this.tabTitles.length - 1
        len >= +n ? (this.currentPage = +n) : (this.currentPage = len)
        if (len > 4) {
          this.$nextTick(() => {
            this._scrollToCurrentTab(n)
          })
        }
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.widget {
  /* background-color: #ffffff; */
  height: 88px;
}

.tab-margin {
  margin-bottom: 16px;
}

.tab-padding-160 {
  padding: 0 160px;
}

.tab-padding-40 {
  padding: 0 40px;
}

.flex-expand-layout {
  flex: 1;
}

.tab-title-list {
  flex-direction: row;
  justify-content: space-between;
  padding: 0 16px;
}

.space-around-layout {
  justify-content: space-around;
}
.flex-start-layout {
  justify-content: flex-start;
  flex: 1;
}
.flex-start-item {
  margin-right: 32px;
}

.padding-layout-32 {
  padding: 0 32px;
}

.padding-layout-8 {
  padding: 0 8px;
}

.title-item {
  height: 88px;
  justify-content: center;
  align-items: stretch;
  border-bottom-style: solid;
  /* border-width: 1px; */
}

.title-item-primary {
  align-items: center;
}

.tab-text-wrapper {
  height: 82px;
  justify-content: center;
}

/* tabpage 在dof-minibar内部 */
.minibar-inner {
  height: 76px;
}

.thidrd-wrapper {
  flex-direction: row;
  height: 52px;
  padding: 0 30px;
  border-radius: 26px;
  /* background-color: #232323; */
  justify-content: center;
  align-items: center;
}

.avatar-icon {
  width: 36px;
  height: 36px;
  margin-right: 8px;
}

.tab-text {
  lines: 1;
  text-overflow: ellipsis;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  /* color: #8E969B; */
}

.third-text {
  font-size: 24px;
  /* color: #1E2E37; */
}

.border-bottom-line {
  width: 40px;
  height: 6px;
  border-radius: 3px;
  margin-top: -10px;
  /* margin-left: 10px; */
  /* background-color: transparent; */
}

.border-bottom-line-secondary {
  height: 4px;
  border-radius: 3px;
  margin-top: -2px;
  /* background-color: transparent; */
}

.dot-bottom-border {
  /* margin-right: 20px; */
}

/* 新增三类固定标签 */

.thirdTabPanel {
  height: 128px;
}

.dof-third-panel {
  /* width: 750px; */
  height: 128px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.btn-group-wrap {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  border-radius: 64px;
  /* overflow: hidden; */
}

.btn-text {
  font-family: PingFangSC-Regular;
  color: #ffffff;
  font-size: 28px;
  line-height: 64px;
  padding-left: 32px;
  padding-right: 32px;
}

.leftRadius {
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}

.rightRadius {
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
}

.dot-tip {
  /* position: absolute; */
  /* top: 34px;
  right: 0px; */
  margin-top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: #f56428;
}

/* 小红点 */
.dot-tab-text {
  /* margin-top:8px; */
  padding-top: 10px;
  padding-bottom: 8px;
}

.flexDirection {
  position: relative;
  flex-direction: row;
  align-items: center;
  align-items: flex-start;
}

.flexCoulmn {
}

.dot-num-tip-text {
  /* position:absolute;
  right: 0px;
  top:0; */
  font-size: 24px;
  color: #ffffff;
  border-radius: 100px;
  /* border-width: 1px;
  border-color: #ffffff; */
  background-color: #f56428;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
  /* transform: translate(100%, 0); */
  margin-left: -16px;
  /* padding-top: 8px;
  padding-bottom: 8px; */
}

.dot-num-tip-right {
  /* padding-right: 60px; */
}

/* 数字小红点下面的选中宽度 */
.dotNum-bottom-borderWidth {
  /* margin-right: 60px; */
}
</style>
<style scoped src="./colmo.css"></style>
