<template>
  <van-dialog v-model="visible" class="bind-phone-dialog" confirm-button-text="前往绑定" @confirm="bindMobile">
    <div slot="title" class="bind-phone-dialog__title">
      <span>提示</span>
      <i class="bind-phone-dialog__close van-icon van-icon-cross" @click="onClose"></i>
    </div>
    <div class="bind-phone-dialog__content">您当前未绑定手机号，为确保联系到您，请绑定手机号</div>
  </van-dialog>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'BindPhoneDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    visible: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    ...mapActions({ jumpToBinding: 'users/jumpToBinding' }),
    onClose() {
      this.visible = false
      this.$toast({
        message: '稍后请点击“我的抽奖记录”界面绑定手机',
        duration: 3500
      })
    },
    bindMobile() {
      this.$toast({
        message: '正在为您转跳，请完成绑定手机操作',
        duration: 1500,
        onClose: () => {
          this.jumpToBinding()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bind-phone-dialog {
  &__title {
    position: relative;
  }
  &__close {
    position: absolute;
    right: 14px;
    top: -12px;
    color: #646566;
    cursor: pointer;
    font-size: 12px;
  }
  &__content {
    padding: 24px;
    padding-top: 12px;
    color: #646566;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
}
</style>
