<template>
  <div class="container" ref="container" :style="containerStyle">
    <div :class="{'tab-list__header' : showSearchBar}" ref="header">
      <van-tabs
        v-model="activeTab"
        line-width="0.96rem"
        class="tab-item__wrap"
        @change="onTabChange"
      >
        <van-tab v-for="item in tabsOption" :key="item.name" :title="item.title" :name="item.value"></van-tab>
      </van-tabs>
      <div class="list-search__bar">
        <span class="list-filter__btn" v-if="showToolBar" @click="onFilterIconClick">
          <icon name="tab_filter" width="0.4rem" height="0.4rem"></icon>
        </span>
        <span class="list-filter__btn" v-else @click="tips">
          <icon name="tab_filter" width="0.4rem" height="0.4rem"></icon>
        </span>
      </div>
    </div>
    <div class="tab-list__content">
      <scroller
        ref="scroller"
        :on-refresh="onRefresh"
        :on-infinite="onInfinite"
        v-if="enablePullUpRefresh"
      >
        <van-cell-group :border="false">
          <slot v-if="isSameContent" name="content"></slot>
          <slot v-else :name="activeTab"></slot>
        </van-cell-group>
        <div class="loading">
          <van-loading v-if="loding" type="spinner" />
        </div>

      </scroller>
      <scroller ref="scroller" v-else :on-refresh="onRefresh">
        <van-cell-group :border="false">
          <slot v-if="isSameContent" name="content"></slot>
          <slot v-else :name="activeTab"></slot>
        </van-cell-group>
        <van-loading v-if="loding" type="spinner" />
      </scroller>
    </div>
    <div
      ref="popupContainer"
      class="popup-container"
      :style="popupContainerStyle"
      v-show="showPopupContainer"
    >
      <van-popup
        v-model="popupSearchBar"
        :get-container="getContainer"
        position="top"
        @closed="showPopupContainer = false"
        :overlay-style="{position: 'absolute', 'animation-duration': '0.2s'}"
      >
        <slot name="filter"></slot>
        <!-- 父组件传入block时隐藏按钮，不影响其他组件 -->
        <div class="date-picker__toolbar" v-if="showToolBar" v-show="cancel_buttons!=='block'">
          <van-button
            class="reset-button"
            block
            square
            color="rgba(38,162,255,0.2)"
            @click="onCancel"
          >{{ cancelText }}</van-button>
          <van-button
            class="button-border-none"
            block
            square
            type="info"
            @click="onConfirm"
          >{{ comfirmText }}</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Tabs, Tab, Icon, CellGroup, Loading } from 'vant'

Vue.use(CellGroup).use(Tabs).use(Tab).use(Icon).use(Loading)

export default {
  props: {
    top: { type: Number, default: 0.92 },
    onMounted: { type: Function },
    cancelText: { type: String, default: '恢复默认' },
    comfirmText: { type: String, default: '确定' },
    enablePullUpRefresh: { type: Boolean, default: false },
    enablePullDownRefresh: { type: Boolean, default: true },
    showSearchBar: { type: Boolean, default: true },
    showToolBar: { type: Boolean, default: true },
    selectedTabIndex: { type: Number, default: -1 },
    tabsOption: { type: Array, default: null },
    isSameContent: { type: Boolean, default: false },
    cancel_buttons: { type: String},//传入一个参数，判断等于这个参数的时候隐藏按钮，不影响其他组件
    list: { type: Array},//传入一个参数，判断等于这个参数的时候隐藏按钮，不影响其他组件
  },
  data() {
    let activeTab = null;
    let activeTabName = null
    const activeTabSatus = {};
    const tabIndex = this.selectedTabIndex > -1 ? this.selectedTabIndex : 0
    if (Array.isArray(this.tabsOption) && this.tabsOption.length >= tabIndex + 1) {
      activeTab = this.tabsOption[tabIndex].value
      activeTabName = this.tabsOption[tabIndex].title
      this.tabsOption.forEach(o => activeTabSatus[o.value] = 1)
    }

    return {
      loding: false,
      activeTab: activeTab,
      activeTabName: activeTabName,
      activeTabSatus: activeTabSatus,
      popupSearchBar: false,
      showPopupContainer: false,
      popupContainerTop: 1.8,
      containerTop: 0
    }
  },
  computed: {
    popupContainerStyle() {
      return { top: `${(this.popupContainerTop)}px` }
    },
    containerStyle() {
      return { height: `calc(100% - ${this.top}rem)` }
    }
  },
  methods: {
    // 不能点击的提示
    tips(){
      this.$toast(this.activeTabName + '暂不支持筛选')
    },
    onFilterIconClick() {
      this.showPopupContainer = true;
      this.popupSearchBar = !this.popupSearchBar
    },
    onTabChange(value,title) {
      this.activeTabName = title
      this.activeTabSatus[this.activeTab] = 1;
      this.popupSearchBar = false
      this.$emit('onTabChange', { activeTab: this.activeTab, pageIndex: this.activeTabSatus[this.activeTab] })
    },
    onConfirm() {
      this.$emit('onConfirm')
      this.popupSearchBar = false;
    },
    onCancel() {
      this.$emit('onCancel')
      this.popupSearchBar = false;
      // this.popupSearchBar = false;
    },
    onRefresh(done) {
      this.activeTabSatus[this.activeTab] = 1;
      this.$emit('onRefresh', { done: done, pageIndex: this.activeTabSatus[this.activeTab], isRefresh: true })
    },

    triggerPullToRefresh() {
      //if (!this.enablePullUpRefresh) {
        setTimeout(() => {
          this.$refs.scroller.triggerPullToRefresh()
        }, 50)
      //}
    },
    onInfinite() {
      if (!this.loding) {
        this.loding = true;
        this.activeTabSatus[this.activeTab]++
        const isRefresh = this.activeTabSatus[this.activeTab] === 1
        this.$emit('onInfinite', { pageIndex: this.activeTabSatus[this.activeTab], isRefresh: isRefresh, done: hasMore => this.onFinish(hasMore) })
      }
    },
    onFinish(hasMore) {
      this.$refs.scroller.finishInfinite(hasMore)
      this.loding = false
    },
    getContainer() {
      return this.$refs.popupContainer
    },
    hideSearchBar(){
      this.popupSearchBar = false
    }
  },
  mounted() {
    setTimeout(() => {
      const style = this.$refs.header.getBoundingClientRect()
      this.popupContainerTop = style.top + style.height;
    }, 200)

    this.triggerPullToRefresh()
  }
}
</script>
<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
}
.loading{text-align: center; padding-bottom:0.5rem; padding-top:0.24rem;}
.tab-list__header:before{content: " "; height:1px; background-color: #eee; position: absolute; bottom:0; left:0; right:0; z-index:2;}
.tab-list__header {
  position: relative;
  display: flex;

  & .tab-item__wrap {
    display: flex;
    flex: 1;

    & /deep/ .van-tabs__wrap {
      position: relative;
      width: 100%;
    }
  }

  & .list-search__bar {
    position: relative;
    display: flex;
    width: 1.12rem;
    background: #fff;
    align-items: center;
    justify-content: center;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      height: 0.46rem;
      width: 0.02rem;
      border-radius: 0.04rem;
      background: rgba(235, 238, 245, 1);
      transform: translateY(-50%);
    }

    & .list-filter__btn {
      display: flex;
      width: 0.6rem;
      height: 0.6rem;
      align-items: center;
      justify-content: center;
      touch-action: none;
    }
  }
}

& .tab-list__content {
  position: relative;
  height: calc(100% + 0.32rem);
  background: transparent;

  & /deep/ .van-hairline--top-bottom:after {
     //border: none;
  }
}
/deep/ .tab-list__header .van-hairline--top-bottom:after{border:none !important;}
.popup-container {
  position: fixed;
  top: 1.80rem;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  overflow: hidden;

  & /deep/ .van-popup--top {
    position: absolute;
  }

  .date-picker__toolbar {
    display: flex;
    flex-direction: row;
    & .reset-button {
      color: #26a2ff !important;
      border: transparent !important;
    }
    & .button-border-none {
      border: transparent !important;
    }
  }
}
</style>
