<template>
  <div>
    <group>
      <x-switch
        v-model="show"
        title="Default popup"
      />
      <x-switch
        v-model="show1"
        title="Full popup"
      />
      <x-switch
        v-model="show2"
        title="with a Scroller"
      />
      <x-switch
        v-model="show3"
        title="Multi popup (first)"
      />
      <x-switch
        v-model="show5"
        title="Mask disable"
      />
      <x-switch
        v-model="show6"
        title="Popup address"
      />
    </group>
    <popup
      v-model="show"
      @on-hide="log('hide')"
      @on-show="log('show')"
    >
      <div class="popup0">
        <group>
          <x-switch
            v-model="show"
            title="Another Switcher"
          />
          <x-switch
            v-model="showToast"
            title="Show Toast"
          />
        </group>
      </div>
    </popup>
    <toast v-model="showToast">
      You did it!
    </toast>
    <popup
      v-model="show1"
      height="100%"
    >
      <div class="popup1">
        <group>
          <x-switch
            v-model="show1"
            title="Another Switcher"
          />
        </group>
      </div>
    </popup>
    <popup
      v-model="show2"
      height="200px"
      @on-first-show="resetScroller"
    >
      <scroller
        ref="scroller"
        height="100px"
        lock-x
        style="border:1px solid red;"
      >
        <div>
          <p
            v-for="i of 10"
            :key="i"
          >
            {{ i }}
          </p>
        </div>
      </scroller>
    </popup>
    <popup v-model="show3">
      <div class="popup2">
        <group>
          <x-switch
            v-model="show3"
            title="Multi Popup (first)"
          />
          <x-switch
            v-model="show4"
            title="Multi Popup (second)"
          />
        </group>
        this is the first popup
      </div>
    </popup>
    <popup v-model="show4">
      <div class="popup2">
        <group>
          <x-switch
            v-model="show4"
            title="Multi Popup (second)"
          />
        </group>
        this is the second popup
      </div>
    </popup>
    <popup
      v-model="show5"
      :hide-on-blur="false"
    >
      <div class="popup2">
        <group>
          <x-switch
            v-model="show5"
            title="Mask disable"
          />
        </group>
        The mask cannot be clicked!
      </div>
    </popup>
    <popup v-model="show6">
      <div class="popup1">
        <group>
          <x-switch
            v-model="show6"
            title="Popup address"
          />
        </group>
        <group>
          <x-address
            v-model="value6"
            :title="title6"
            :list="addressData"
            placeholder="请选择地址"
            inline-desc="可以设置placeholder"
          />
        </group>
      </div>
    </popup>
  </div>
</template>
<script>
import {
  Popup,
  Group,
  XSwitch,
  Scroller,
  Toast,
  XAddress
  // AddressChinaData
} from '../components/_index'
import { cvux as AddressChinaData } from 'city-data/lib/mobile'

export default {
  components: {
    Popup,
    Group,
    XSwitch,
    Scroller,
    Toast,
    XAddress
  },
  data() {
    return {
      addressData: AddressChinaData,
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      title6: '默认空的',
      value6: [],
      showToast: false
    }
  },
  methods: {
    resetScroller() {
      this.$refs.scroller.reset()
    },
    log(str) {
      console.log(str)
    }
  }
}
</script>
<style>
.popup0 {
  padding-bottom: 15px;
  height: 200px;
}

.popup1 {
  width: 100%;
  height: 100%;
}

.popup2 {
  padding-bottom: 15px;
  height: 400px;
}
</style>
