<template>
    <van-dialog
        v-model:show="show"
        theme="round-button"
        show-cancel-button
        confirm-button-text="立即报名"
        cancel-button-text="退出房间"
        @confirm="confirm"
        @cancel="cancel"
    >
        <div class="dialog-title">
            <img src="@assets/icon-lijibaoming.png" alt="" />
            <span>是否立即报名？</span>
        </div>
        <div class="dialog-tips">
            <div>1. 立即报名，将扣除您的赛事门票，然后等待房主开始比赛</div>
            <div>2. 退出房间，您将离开此赛事房间</div>
        </div>
    </van-dialog>

    <van-dialog
        v-model:show="showPsd"
        theme="round-button"
        show-cancel-button
        confirm-button-text="确认"
        cancel-button-text="退出房间"
        @confirm="confirm"
        @cancel="cancel"
    >
        <div class="dialog-title">
            <img src="@assets/icon-fangjianmima.png" alt="" />
            <span>请输入房间密码</span>
        </div>
        <div class="input">
            <van-field v-model="password" label-width="0" input-align="center" placeholder="请输入"> </van-field>
        </div>
    </van-dialog>
</template>

<script>
import room from '../../mixins/room.js';
export default {
    mixins: [room],
    props: {
        roomInfo: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    computed: {
        requireTicketInfo() {
            let info = [...this.requireTicketOptions].find(item => {
                return item.value === this.roomInfo.requireTicket;
            });
            return info ? info : {};
        }
    },
    data() {
        return {
            show: false,
            message: '',
            showPsd: false,
            password: ''
        };
    },
    methods: {
        init(url = '') {
            this.show = true;
        },
        confirm() {
            if (this.roomInfo.password && !this.password) {
                this.$nextTick(() => {
                    this.showPsd = true;
                });
                return;
            }
            this.checkTicket()
                .then(ticketId => {
                    this.$toast.loading({
                        message: '加载中...',
                        forbidClick: true
                    });
                    this.$http
                        .post('/room/joinRoom', {
                            roomId: this.roomInfo.id,
                            ticketId: ticketId,
                            password: this.password
                        })
                        .then(res => {
                            this.$toast.success('加入成功');
                            setTimeout(() => {
                                this.$emit('update');
                            }, 1000);
                        })
                        .catch(e => {
                            console.log(e);
                            this.$toast(e.error);
                        });
                })
                .catch(() => {
                    this.show = true;
                });
        },

        checkTicket() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            return this.$http
                .post(
                    '/userTicket/my',
                    {
                        query: {
                            type: this.roomInfo.requireTicket,
                            used: false,
                            expired: false
                        },
                        sort: 'id,asc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    let info = res;
                    this.$toast.clear();
                    if (res.empty) {
                        return this.$dialog
                            .confirm({
                                title: '提示',
                                message: '您没有可用的' + this.requireTicketInfo.label,
                                confirmButtonText: '立即购买'
                            })
                            .then(res => {
                                this.$router.push('/shop');
                                return Promise.reject();
                            });
                    } else {
                        return this.$dialog
                            .confirm({
                                title: '门票确认',
                                message: '此操作将扣除您【' + this.requireTicketInfo.label + '】门票一张'
                            })
                            .then(() => {
                                return Promise.resolve(info.content[0].id);
                            });
                    }
                });
        },
        cancel() {
            this.$router.back();
        }
    }
};
</script>

<style lang="less" scoped>
.dialog-title {
    .flex-col();
    align-items: center;
    padding: 20px 0 24px;
    img {
        width: 48px;
        height: 48px;
    }
    span {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        margin-top: 12px;
    }
}

.dialog-tips {
    font-size: 14px;
    color: #6a6d83;
    line-height: 20px;
    padding: 0 20px 30px;
}
.input {
    padding: 0 20px 30px;
    .van-field {
        background: rgba(255, 255, 255, 0.1);
    }
}
</style>
