<template>
  <div>
    <bxs-cell-group>
      <bxs-cell
        title="不满一屏"
        is-link
        @click="toggle(false)"
        />
      <bxs-cell
        title="满一屏（强制fixed）"
        is-link
        @click="toggle(true)"
        />
      <bxs-cell
        v-for="(title, index) in cellList"
        :title="title"
        :key="index"
        />
    </bxs-cell-group>
    <div class="demo-bottom-footer">
      <bxs-cell-group>
        <bxs-cell
          title="动态添加内容"
          is-link
          @click="addCell()"
          />
      </bxs-cell-group>
    </div>
    <bxs-bottom-sheets
      v-model="isShow"
      title="半屏浮层"
      :prevent-scroll-through="preventScrollThrough"
      >
      <p>这是一个半屏浮层</p>
      <p>这是一个半屏浮层</p>
      <p>这是一个半屏浮层</p>
      <p>这是一个半屏浮层</p>
      <p>这是一个半屏浮层</p>
      <p>这是一个半屏浮层</p>
    </bxs-bottom-sheets>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
      preventScrollThrough: false,
      cellList: [],
    }
  },
  mounted() {
    this.$safeAreaPatch.create()
  },
  beforeDestroy() {
    this.$safeAreaPatch.remove()
  },
  methods: {
    toggle(flag) {
      this.preventScrollThrough = flag
      this.isShow = !this.isShow
    },
    addCell() {
      this.cellList.push('动态增加的内容')
      this.$safeAreaPatch.update()
    },
  },
}
</script>

<style lang="postcss">
.demo-bottom-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
