<template>
  <div class="demo-sheets">
    <bxs-cell-group>
      <bxs-cell
        title="最小高度"
        is-link
        @click="toggle(1)"
        />
      <bxs-cell
        title="最大高度"
        is-link
        @click="toggle(2)"
        />
      <bxs-cell
        title="自适应高度"
        is-link
        @click="toggle(3)"
        />
      <bxs-cell
        title="固定高度"
        is-link
        @click="toggle(7)"
        />
      <bxs-cell
        title="去掉顶部标题栏"
        is-link
        @click="toggle(4)"
        />
      <bxs-cell
        title="扩展底部内容"
        is-link
        @click="toggle(6)"
        />
      <bxs-cell
        title="使用better-scroll滚动"
        is-link
        @click="toggle(8)"
        />
      <bxs-cell
        title="自定义顶部标题栏 + 动态内容"
        is-link
        @click="toggle(5)"
        />
      <bxs-cell
        title="暴露关键dom"
        is-link
        @click="toggle(9)"
        />
      <bxs-cell
        title="暴露transition所有js钩子"
        is-link
        @click="toggle(10)"
        />
    </bxs-cell-group>
    <!-- 最小高度 -->
    <bxs-bottom-sheets
      v-model="show_1"
      title="最小高度浮层"
      >
      <div class="ui-sheets-normal">
        <p>这是一个最小高度的半屏浮层</p>
        <p>浮层的最小高度为屏幕的40%</p>
      </div>
    </bxs-bottom-sheets>
    <!-- 最大高度 -->
    <bxs-bottom-sheets
      v-model="show_2"
      title="最大高度浮层"
      @domReady="domReady"
      >
      <div class="ui-sheets-normal">
        <p>
          这是一个最大高度的半屏浮层
        </p>
        <p>浮层的最大高度为屏幕的70%</p>
        <br>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
      </div>
    </bxs-bottom-sheets>
    <!-- 自适应高度 -->
    <bxs-bottom-sheets
      v-model="show_3"
      title="自适应高度浮层"
      >
      <div class="ui-sheets-normal">
        <p>这是一个普通的半屏浮层</p>
        <p>浮层大于屏幕的40%，小于屏幕的70%时，自适应</p>
        <br>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
        <p>这是一个自适应的半屏浮层</p>
      </div>
    </bxs-bottom-sheets>
    <!-- 去掉顶部标题栏 -->
    <bxs-bottom-sheets
      v-model="show_4"
      :hide-header="!0"
      >
      <div class="ui-sheets-normal">
        <p>这是一个去掉顶部默认标题栏浮层</p>
        <p>也可用组件「popup」替代</p>
      </div>
    </bxs-bottom-sheets>
    <!-- 自定义标题栏 + 动态内容 -->
    <bxs-bottom-sheets
      v-model="show_5"
      :use-b-scroll="!0"
      @bscroll="instance5Scroll = $event"
      >
      <div
        slot="header"
        class="ui-sheets-header bx-hairline--bottom"
        >
        <bxs-tab
          class="ui-sheets-tab"
          :index="instance5TabContentIdx"
          @change="instance5OnTabContentChanged"
          >
          <bxs-tab-item>自定义标题</bxs-tab-item>
          <bxs-tab-item>本 Tab 特长有 20 条</bxs-tab-item>
        </bxs-tab>
        <div
          class="ui-sheets-close"
          @click="toggle(5)"
          >
          <bxs-icon name="close" />
        </div>
      </div>
      <div class="ui-sheets-normal">
        <p>浮层内容根据 Tab 切换</p>
        <p v-if="instance5TabContentIdx === 0">
          这个 Tab 下内容很短很短
        </p>
        <div v-if="instance5TabContentIdx === 1">
          <p
            v-for="n in 20"
            :key="`content${n}`"
            >
            {{ n }}. 这个 Tab 下有超长内容
          </p>
        </div>
      </div>
    </bxs-bottom-sheets>
    <!-- 扩展底部内容 -->
    <bxs-bottom-sheets
      v-model="show_6"
      title="扩展底部内容"
      >
      <div class="ui-sheets-normal">
        <p>这是一个最大高度的半屏浮层</p>
        <p>浮层的最大高度为屏幕的70%</p>
        <br>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
        <p>这是一个最大高度的半屏浮层</p>
      </div>
      <div
        slot="footer"
        class="ui-sheets-footer bx-hairline--top"
        >
        <bxs-tab>
          <bxs-tab-item>这是</bxs-tab-item>
          <bxs-tab-item>底部</bxs-tab-item>
          <bxs-tab-item>内容</bxs-tab-item>
        </bxs-tab>
      </div>
    </bxs-bottom-sheets>
    <!-- 固定高度 -->
    <bxs-bottom-sheets
      v-model="show_7"
      title="固定高度浮层"
      :height="450"
      >
      <div class="ui-sheets-normal">
        <p>这是一个固定高度的半屏浮层</p>
        <p>浮层的最小高度为屏幕的40%</p>
        <p>浮层的最大高度为屏幕的70%</p>
        <br>
        <p>这是一个固定高度的半屏浮层</p>
        <p>这是一个固定高度的半屏浮层</p>
        <p>这是一个固定高度的半屏浮层</p>
        <p>这是一个固定高度的半屏浮层</p>
        <p>这是一个固定高度的半屏浮层</p>
        <p>这是一个固定高度的半屏浮层</p>
      </div>
    </bxs-bottom-sheets>
    <!-- 使用BScroll滚动 -->
    <bxs-bottom-sheets
      v-model="show_8"
      title="使用BScroll滚动"
      use-b-scroll
      prevent-scroll-through
      @bscroll="bscroll"
      >
      <div class="ui-sheets-normal">
        <p>这是一个开启better-scroll的半屏浮层</p>
        <br>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
      </div>
    </bxs-bottom-sheets>
    <!-- 暴露transition所有js钩子 -->
    <bxs-bottom-sheets
      v-model="show_9"
      title="暴露关键dom元素"
      @domReady="domReady"
      >
      <div class="ui-sheets-normal">
        <p>这是一个暴露关键dom元素的半屏浮层</p>
        <br>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
      </div>
    </bxs-bottom-sheets>
    <!-- 暴露transition所有js钩子 -->
    <bxs-bottom-sheets
      v-model="show_10"
      title="暴露transition所有js钩子"
      @appear="transitionHook('appear', $event)"
      @before-enter="transitionHook('before-enter', $event)"
      @enter="transitionHook('enter', $event)"
      @after-enter="transitionHook('after-enter', $event)"
      @leave="transitionHook('leave', $event)"
      @after-leave="transitionHook('after-leave', $event)"
      >
      <div class="ui-sheets-normal">
        <p>这是一个调用transition所有js钩子的半屏浮层</p>
        <p>调用方式与vue transition内置组件提供的js钩子一样</p>
        <br>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
        <p>这是一个半屏浮层</p>
      </div>
    </bxs-bottom-sheets>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show_1: false,
      show_2: false,
      show_3: false,
      show_4: false,
      show_5: false,
      show_6: false,
      show_7: false,
      show_8: false,
      show_9: false,
      show_10: false,
      instance5TabContentIdx: 0,
      instance5Scroll: null,
    }
  },
  methods: {
    toggle(type) {
      const key = `show_${type}`
      this[key] = !this[key]
    },
    domReady($dom) {
      const layerHeight = $dom.layer.clientHeight
      const contentHeight = $dom.content.clientHeight
      const scrollHeight = $dom.scroll.clientHeight
      const headerHeight = $dom.header.clientHeight
      const footerHeight = $dom.footer.clientHeight
      const div = document.createElement('div')
      let html = ''
      html += `<br /><div>半屏浮层调用后获取：</div>`
      html += `<div>layerHeight: ${layerHeight}</div>`
      html += `<div>contentHeight: ${contentHeight}</div>`
      html += `<div>scrollHeight: ${scrollHeight}</div>`
      html += `<div>headerHeight: ${headerHeight}</div>`
      html += `<div>footerHeight: ${footerHeight}</div>`
      div.innerHTML = html
      $dom.scroll.querySelector('.ui-sheets-normal').append(div)
    },
    instance5OnTabContentChanged(tabIdx) {
      this.instance5TabContentIdx = tabIdx
      if (this.instance5Scroll) {
        this.$nextTick(() => this.instance5Scroll.refresh())
      }
    },
    bscroll(instance) {
      // 此处通过instance可以操作better-scroll参数，具体看better-scroll文档
      console.log(instance)
    },
    transitionHook(name, el) {
      console.log(name, el)
    },
  },
}
</script>

<style lang="postcss">
.demo-sheets {
  font-size: 30px;
}
.ui-sheets-normal {
  padding: 15px 15px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
.ui-sheets-footer {
  position: relative;
  & .bx-tab {
    background: transparent;
  }
}
.ui-sheets-header {
  position: relative;
  & .ui-sheets-tab {
    margin-right: 50px;
    &::after {
      height: 0;
    }
  }
  & .ui-sheets-close {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0 15px;
    font-size: 0;
    line-height: 1;
    & .bx-icon {
      display: inline-block;
      margin-top: 13px;
      font-size: 18px;
      color: #ccc;
    }
  }
}
</style>
