<template>
  <div class="dof-demo">
    <dof-minibar
      title="Overlay"
      background-color="#267aff"
      text-color="#ffffff"
      :isImage="true"
      :left-button="leftButton"
      @dofMinibarLeftButtonClicked="back"
    ></dof-minibar>
    <scroller class="scroller">
      <title title="dof-overlay"></title>
      <category title="使用案例"></category>
      <div class="btnWrap">
        <dof-button text="点击打开蒙层" @dofButtonClicked="openOverlay"></dof-button>
      </div>
      <dof-overlay :show="show" opacity="0.3" @dofOverlayBodyClicked="dofOverlayBodyClicked"></dof-overlay>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.scroller {
  flex: 1;
  background-color: #ffffff;
}

.btnWrap{
  flex-direction: row;
  justify-content: center;
  margin-top: 120px;
}
</style>
<script>
import { DofMinibar, dofOverlay, DofButton } from 'dolphin-weex-ui'
import Title from 'src/_mods/title.vue'
import Category from 'src/_mods/catalog'
import { setTitle } from 'src/_mods/set-nav'

export default {
  components: { Title, Category, DofMinibar, dofOverlay, DofButton },
  data: () => ({
    show: false,
  }),
  methods: {
    openOverlay() {
      this.show = true
    },
    dofOverlayBodyClicked() {
      this.show = false
    }
  }
}
</script>