Vue.component("template-password", {
    template: `<div class="password-box">
                    <div class="password-top-box">
                        <div class="password-top">
                            <img class="password-close" @click="cancelPay" src="/Public/vip/images/close.png"/>
                            <div class="password-top-title">请输入会员支付密码</div>
                            <div class="password-top-tag">即将支付</div>
                            <div class="password-top-price" v-if="details.price>0">
                                <span>¥</span>
                                <span v-text="details.price"></span>
                            </div>
                            <div class="password-top-integral" v-if="details.integral>0">
                                <span v-text="details.integral"></span>
                                <span>积分</span>
                            </div>
                            <div class="password-show">
                                <div class="password-list" v-for="item in passwordList" :class="item?'password-md':''"></div>
                            </div>
                        </div>
                    </div>
                    <div class="password-bottom">
                        <div class="password-btn" v-for="item in btnList" v-text="item" @click="inputPassword(item)"></div>
                        <div class="password-btn password-disabled"></div>
                        <div class="password-btn" @click="inputPassword(0)">0</div>
                        <div class="password-btn password-del" :class="password?'':'password-disabled'" @click="delPassword"></div>
                    </div>
                </div>`,
    props: {
        'details': {
            type: Object
        },
    },
    data: function () {
        return {
            password: '',
            passwordList: [false, false, false, false, false, false],
            btnList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        }
    },
    methods: {
        //输入支付密码
        inputPassword: function (num) {
            if (String(this.password).length < 5) {
                this.password += '' + num;
            } else {
                this.password += '' + num;
                this.$nextTick(function () {
                    setTimeout(function () {
                        this.$emit('to-pay', this.password);
                    }.bind(this),300)
                }.bind(this))
            }
        },
        //取消会员支付
        cancelPay: function () {
            this.passwordList = [false, false, false, false, false, false];
            this.password = '';
            this.$nextTick(function () {
                this.$emit('cancel-pay');
            }.bind(this))
        },
        //删除支付密码
        delPassword: function () {
            var len = String(this.password).length;
            if (len > 0) {
                this.password = String(this.password).slice(0, len - 1);
            }
        },
    },
    watch: {
        password: function (n) {
            var len = String(n).length;
            var passwordList = [false, false, false, false, false, false];
            for (var i = 0; i < len; i++) {
                passwordList[i] = true;
            }
            this.passwordList = [];
            this.passwordList = passwordList;
        }
    },
    created:function () {
        // console.log(this.details);
    }
});