<template>
  <div v-if="isShow" class="third-bind-wrapper">
    <div class="bind-dialog">
        <div class="dialog-title">请确认您的支付宝账号</div>
        <div class="dialog-content">
            <div class="input-block">
            <p class="info-title">账号</p>
            <p class="info-text">{{data.account}}</p>
        </div>
        <div class="input-block">
            <p class="info-title">姓名</p>
            <p class="info-text">{{data.name}}</p>
        </div>
        <div class="tip">为了保证您的安全，请再次确认您提供的支付宝账号的正确性！</div>
        </div>
        <div class="dialog-footer">
            <div class="btn-cancel" @click="cancel">返回修改</div>
            <div class="btn-confirm" @click="confirm">我已确认</div>
        </div>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('home/bindAccount');
export default {
    name: 'my-dialog',
     props: {
        isShow: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: {}
        }
    },
    data() {
      return {
      }
    },
    computed:{
    },

    methods: {
        cancel() {
            this.$emit('cancel-click')
        },
        confirm() {
            this.$emit('confirm-click')
        }
    },
    components: {
    }
};
</script>
<style lang="scss" scoped>
.third-bind-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bind-dialog {
  position: relative;
  width: 670px;
  padding: 64px 48px 80px;
  font-size: 28px;
  box-sizing: border-box;
  background-color: #fff;
}
.dialog-title {
    font-size: 28px;
    text-align: center;
}
.dialog-content {
    padding: 60px 0;
}

.input-block {
    margin-bottom: 40px;
    .info-title {
        font-size: 24px;
        color: #999;
    }
    .info-text {
        font-size: 32px;
        margin-top: 5px;
    }
}
.tip {
    color: #D0021B;
    font-size: 24px;
}
.dialog-footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100px;
    border-top: solid 1px #eee;
    font-size: 28px;
    display: flex;
    justify-content: center;

    .btn-cancel {
        flex: 1;
        color: #999;
        border-right: solid 1px #eee;
        text-align: center;
        line-height: 100px;
    }
    .btn-confirm {
        flex: 1;
        text-align: center;
        line-height: 100px;
    }
}
</style>