<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/07/28. -->
<!-- Updated by Tw93 on 17/11/16.-->

<template>
  <div
    class="lc-tab-page"
    :style="{ height: tabPageHeight + 'px', backgroundColor: wrapBgColor }"
  >
    <div
      class="tab-page-wrap"
      ref="tab-page-wrap"
      :style="{ height: tabPageHeight - tabStyles.height + 'px' }"
    >
      <scroller ref="tab-container" class="tab-container">
        <slot></slot>
      </scroller>
    </div>
    <div
      class="tab-title-list"
      :style="{
        backgroundColor: tabStyles.bgColor,
        height: tabStyles.height + 'px',
      }"
    >
      <div
        class="title-item"
        v-for="(v, index) in tabTitles"
        :key="index"
        :ref="'wxc-tab-title-' + index"
        @click="setPage(index, v.url)"
        :style="{
          width: tabStyles.width + 'px',
          height: tabStyles.height + 'px',
          backgroundColor:
            currentPage == index ? tabStyles.activeBgColor : tabStyles.bgColor,
        }"
        :accessible="true"
        :aria-label="`${v.title ? v.title : '标签' + index}`"
      >
        <image
          :src="currentPage == index ? v.activeIcon : v.icon"
          v-if="titleType === 'icon'"
          :style="{
            width: tabStyles.iconWidth + 'px',
            height: tabStyles.iconHeight + 'px',
          }"
        ></image>
        <text
          :style="{
            fontSize: tabStyles.fontSize + 'px',
            fontWeight:
              currentPage == index && tabStyles.isActiveTitleBold
                ? 'bold'
                : 'normal',
            color:
              currentPage == index
                ? tabStyles.activeTitleColor
                : tabStyles.titleColor,
            paddingLeft: tabStyles.textPaddingLeft + 'px',
            paddingRight: tabStyles.textPaddingRight + 'px',
          }"
          class="tab-text"
          >{{ v.title }}</text
        >
        <div class="desc-tag" v-if="v.badge">
          <text class="desc-text">{{ v.badge }}</text>
        </div>
        <div v-if="v.dot && !v.badge" class="dot"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.lc-tab-page {
  width: 750px;
  flex-direction: column;
}

.tab-title-list {
  width: 750px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.title-item {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom-style: solid;
  position: relative;
}

.tab-page-wrap {
  width: 750px;
  overflow: hidden;
  position: relative;
}

.tab-container {
  flex: 1;
  flex-direction: row;
  position: absolute;
}

.tab-text {
  lines: 1;
  text-overflow: ellipsis;
}

.desc-tag {
  position: absolute;
  top: 10px;
  right: 20px;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background-color: #ff5e00;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  padding-right: 6px;
}

.dot {
  width: 12px;
  height: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: absolute;
  top: 10px;
  right: 40px;
  background-color: #ff5e00;
}
.desc-text {
  font-size: 18px;
  color: #ffffff;
}
</style>

<script>
const dom = weex.requireModule("dom");
const animation = weex.requireModule("animation");

export default {
  props: {
    tabTitles: {
      type: Array,
      default: () => [],
    },
    tabStyles: {
      type: Object,
      default: () => ({
        bgColor: "#FFFFFF",
        titleColor: "#666666",
        activeTitleColor: "#3D3D3D",
        activeBgColor: "#FFFFFF",
        isActiveTitleBold: true,
        iconWidth: 70,
        iconHeight: 70,
        width: 160,
        height: 120,
        fontSize: 24,
        activeBottomColor: "#FFC900",
        activeBottomWidth: 120,
        activeBottomHeight: 6,
        textPaddingLeft: 10,
        textPaddingRight: 10,
      }),
    },
    titleType: {
      type: String,
      default: "icon",
    },
    tabPageHeight: {
      type: [String, Number],
      default: 1334,
    },
    isTabView: {
      type: Boolean,
      default: true,
    },
    duration: {
      type: [Number, String],
      default: 300,
    },
    timingFunction: {
      type: String,
      default: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
    },
    wrapBgColor: {
      type: String,
      default: "#f2f3f4",
    },
  },
  data: () => ({
    currentPage: 0,
    translateX: 0,
    screenWidth: 750,
  }),
  mounted() {
    this.$light.on("screenWidthChange", (res) => {
      console.log("res: " + res);
      console.log("this.screenWidth: " + this.screenWidth);
      const rate = res / this.screenWidth;
      this.screenWidth = res;
      this.$nextTick(() => {
        this.setPage(this.currentPage, null, false);
        this.$emit("screenChange", { rate });
      });
    });
  },

  methods: {
    next() {
      let page = this.currentPage;
      if (page < this.tabTitles.length - 1) {
        page++;
      }
      this.setPage(page);
    },
    prev() {
      let page = this.currentPage;
      if (page > 0) {
        page--;
      }
      this.setPage(page);
    },
    setPage(page, url = null, animated = true) {
      if (!this.isTabView) {
        this.jumpOut(url);
        return;
      }
      const previousPage = this.currentPage;
      const currentTabEl = this.$refs[`wxc-tab-title-${page}`][0];
      const { width } = this.tabStyles;
      const appearNum = parseInt(750 / width);
      const tabsNum = this.tabTitles.length;
      const offset = page > appearNum ? -(750 - width) / 2 : -width * 2;

      if (appearNum < tabsNum) {
        (previousPage > appearNum || page > 1) &&
          dom.scrollToElement(currentTabEl, {
            offset,
            animated,
          });

        page <= 1 &&
          previousPage > page &&
          dom.scrollToElement(currentTabEl, {
            offset: -width * page,
            animated,
          });
      }

      this.currentPage = page;
      this._animateTransformX(page, animated);
      this.$emit("LcTabBarCurrentTabSelected", { page });
    },
    jumpOut(url) {
      url && Utils.goToH5Page(url);
    },
    _animateTransformX(page, animated) {
      const { duration, timingFunction } = this;
      // 134033 【TS:201904160183-财富业委会-彭泉善-【需求内容】 1、UI组件缺陷：lc】
      const computedDur = animated ? duration : 0;
      const containerEl = this.$refs[`tab-container`];
      const dist = page * 750;
      animation.transition(
        containerEl,
        {
          styles: {
            transform: `translateX(${-dist}px)`,
          },
          duration: computedDur,
          timingFunction,
          delay: 0,
        },
        () => {}
      );
    },
  },
};
</script>
