<template>
  <div style="height: 1000px">
    <group>
      <x-switch
        v-model="show"
        title="Toggle"
      />
    </group>
    <group style="padding-top: 300px">
      <x-switch
        v-model="showNoScroll"
        title="背景不可滚动"
      />
    </group>
    <x-dialog
      v-model="show"
      class="dialog-demo"
      @on-hide="onHide"
    >
      <p class="dialog-title">
        I'm a bg scroll Dialog.
      </p>
      <div class="img-box">
        <img
          src="../assets/demo/dialog/01.jpg"
          style="max-width:100%"
        >
      </div>
      <span
        class="vux-close"
        @click="show=false"
      />
    </x-dialog>
    <x-dialog
      v-model="showNoScroll"
      class="dialog-demo"
      :scroll="false"
      @on-hide="onHide"
    >
      <p class="dialog-title">
        I'm a no scroll Dialog.
      </p>
      <div class="img-box">
        <img
          src="../assets/demo/dialog/01.jpg"
          style="max-width:100%"
        >
      </div>
      <span
        class="vux-close"
        @click="showNoScroll=false"
      />
    </x-dialog>
  </div>
</template>

<script>
import { XDialog, Group, XSwitch } from '../components/_index'

export default {
  components: {
    XDialog,
    Group,
    XSwitch
  },
  data () {
    return {
      show: false,
      showNoScroll: false
    }
  },
  created () {
    setTimeout(() => {
      this.show = true
    }, 10)
  },
  methods: {
    onHide() {
      console.log(111111111111)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../styles/close';
@import '../styles/cui/widget/cui_cell/cui_cell_global';
.dialog-demo {
  .weui_dialog{
    border-radius: 8px;
    padding-bottom: 8/@w;
  }
  .dialog-title {
    line-height: 30/@w;
    color: #666;
  }
  .img-box {
    height: 350/@w;
    overflow: hidden;
  }
  .vux-close {
    margin: 8/@w 0;
  }
}
</style>
