<template>
    <van-dialog v-model:show="show" theme="round-button" show-cancel-button @confirm="confirm">
        <div class="dialog-title">
            <span>上传比赛截图</span>
        </div>
        <div class="dialog-tips">
            <van-uploader
                :max-count="1"
                v-model="pic"
                preview-size="132px"
                upload-text="点击上传"
                upload-icon=" "
                :after-read="afterRead"
            />
        </div>
    </van-dialog>
</template>

<script>
export default {
    props: {
        roomId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            show: false,
            pic: []
        };
    },
    methods: {
        init(url = '') {
            this.show = true;
        },
        confirm() {
            if (this.pic.length === 0) {
                this.$toast('请上传比赛截图');
                return;
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/room/uploadResult', {
                    roomId: this.roomId,
                    screenShot: this.pic[0].url
                })
                .then(res => {
                    this.$toast.success('上传成功');
                    setTimeout(() => {
                        this.$emit('update');
                    }, 1000);
                })
                .catch(e => {
                    this.$toast.clear();
                    this.$dialog.alert({
                        title: '温馨提示',
                        message: e.error,
                        confirmButtonText: '知道了'
                    });
                });
        },
        cancel() {
            this.$router.back();
        },
        afterRead(file, e) {
            file.status = 'uploading';
            this.updateFile(file, 'id', 1000).then(img => {
                console.log(img);
                file.url = img;
                file.status = 'done';
            });
        }
    }
};
</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 {
    .flex();
    justify-content: center;
    padding-bottom: 30px;
}
/deep/.van-uploader {
    .van-uploader__upload {
        border: 1px dashed #6a6d83;
        background: rgba(255, 255, 255, 0.1);
        height: 100px !important;
        margin: 0 0;
    }
    .van-uploader__upload-text {
        margin-top: 0;
        color: #6a6d83;
        font-size: 14px;
    }
    .van-uploader__preview-image {
        height: 100px !important;
    }
}
</style>
