<template>
  <div>
    <transition name="bounce">
      <div class="alert-wrap">
        <div class="text">{{alertMsg}}</div>
        <div class="hairline--top">
          <button class="button--large" @click="onClose"><span>确认</span></button>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="overlay"></div>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: mapState({
    alertMsg: state => state.com.alertMsg
  }),
  methods: {
    onClose () {
      this.$store.dispatch('showAlert', false)
    }
  }
}
</script>

<style lang="stylus" scoped>
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.bounce-enter {
  opacity 0
  transform translate3d(-50%, -50%, 0) scale(0.7)
}
.bounce-leave-active {
  opacity 0
  transform translate3d(-50%, -50%, 0) scale(0.9)
}
.fade-enter-active
  animation 0.3s fade-in
.fade-leave-active
  animation 0.3s fade-out
.overlay
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, 0.7)
  z-index 2012
.alert-wrap
  position fixed
  top 50%
  left 50%
  width 40%
  transition .3s
  transform translate3d(-50%, -50%, 0)
  overflow hidden
  border-radius 4px
  border 1px solid #ebeef5
  background-color #fff
  box-shadow 0 2px 12px 0 rgba(0,0,0,.3)
  font-size .28rem
  line-height .42rem
  color #929292
  z-index 2018
.text
  padding 20px 50px
  max-height 60%
  min-height 80px
  overflow-y auto
  text-align center
  -webkit-overflow-scrolling touch
  white-space pre-wrap
  font-size 30px
  line-height 40px
  color #606266
[class*='hairline']
  position relative
  padding 5px 0 0
[class*='hairline']::after
  content ' '
  position absolute
  pointer-events none
  box-sizing border-box
  top -50%
  left -50%
  right -50%
  bottom -50%
  transform scale(0.5)
  border 0 solid #ebedf0
.hairline--top::after
  border-top-width 1px
.button--large
  width 100%
  height 80px
  line-height 80px
  font-size 30px
  color #e74f1a
  background-color #dadee2
</style>
