<template>
    <van-dialog v-model:show="show" theme="round-button" show-cancel-button @confirm="changeUrl">
        <div class="dialog-title">
            <img src="@assets/icon-liujuyuanyin.png" alt="" />
            <span>请填写流局原因</span>
        </div>
        <div class="filed">
            <van-field v-model="message" rows="3" autosize label-width="0" type="textarea" placeholder="请输入流局原因">
            </van-field>
        </div>
    </van-dialog>
</template>

<script>
export default {
    props: {
        roomId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            show: false,
            message: ''
        };
    },
    methods: {
        init(url = '') {
            this.show = true;
            this.message = url;
        },
        changeUrl() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/room/changeUrl', {
                    roomId: this.roomId,
                    url: this.message
                })
                .then(res => {
                    this.$toast.success('修改成功');
                })
                .catch(e => {
                    console.log(e);
                    this.$toast(e.error);
                });
        }
    }
};
</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;
    }
}
.filed {
    padding: 0 20px 30px;
}
.van-field {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
}
</style>
