<template>
  <demo-section class="main">
    <drip-button class="main-button" @click="showPopup" type="orange">{{ $t('open') }}</drip-button>
    <drip-button class="main-button" @click="showPopup('slot')" type="orange">slot</drip-button>
    <drip-popup
      v-model="popup.show"
      :title="popup.title"
      :subtitle="popup.subtitle"
      position="bottom"
      :submit="popupSelect"
      :submitBtn="popup.submitBtn">
      <div class="content" slot="content">
        <drip-button
        @click="showNotify"
        type="orange">{{ $t('close') }}</drip-button>
      </div>
      <drip-button
        slot="button"
        @click="popup.show = false"
        size="large"
        type="orange">{{ $t('close') }}</drip-button>
    </drip-popup>
    <drip-popup
      v-model="popupSlot"
      :title="popup.title"
      :subtitle="popup.subtitle"
      position="bottom"
      :submit="popupSelect"
      :submitBtn="popup.submitBtn">
      <template slot="header">
        <div class="my_slot">我是slot</div>
      </template>
      <div class="content" slot="content">
        <drip-button
        @click="showNotify"
        type="orange">{{ $t('close') }}</drip-button>
      </div>
      <drip-button
        slot="button"
        @click="popup.show = false"
        size="large"
        type="orange">{{ $t('close') }}</drip-button>
    </drip-popup>
  </demo-section>
</template>

<script>
export default {
  data() {
    return {
      popup: {
        show: false,
        title: 'haha',
        subtitle: 'lalala',
        submitBtn: true
      },
      popupSlot: false
    }
  },
  i18n: {
    "zh-CN": {
      open: '点开弹框',
      close: '关闭弹框'
    },
    "en-US": {
      open: 'Open',
      close: 'Close'
    }
  },
  methods: {
    showNotify () {
      this.$notify({
        content: '哈哈哈'
      })
    },
    popupSelect() {
      this.popup.show = false
      this.popupSlot = false
    },
    showPopup (showPopup) {
      console.log(showPopup)
      if (showPopup === 'slot') {
        this.popupSlot = true
        return
      }
      this.popup.show = true
    }
  }
}
</script>

<style lang="postcss">
.main {
  height: 200vh;
  &-button {
    margin-top: 50vh;
  }
}
.my_slot{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.content {
  height: 50vh;
}
</style>
