<template>
    <div>
        <van-form @submit="submit">
            <van-field
                class="textarea"
                name="问题描述"
                label="问题描述"
                placeholder="请详细说明，以便于我们解决问题，您最多可填300字。"
                v-model="form.content"
                clearable
                rows="4"
                autosize
                required
                type="textarea"
                maxlength="300"
                show-word-limit
                :rules="[{ required: true, message: '请输入问题描述' }]"
            />
            <van-field name="uploader" required label="上传凭证" :rules="[{ required: true, message: '请上传凭证' }]">
                <template #label>
                    <div class="title">
                        <span>上传凭证</span>
                        <span>最多上传3张</span>
                    </div>
                </template>
                <template #input>
                    <van-uploader :max-count="3" v-model="form.pic" :after-read="afterRead" />
                </template>
            </van-field>
            <div class="bottom">
                <van-button round block type="primary" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import Compressor from 'compressorjs';
export default {
    setup() {
        const beforeRead = file =>
            new Promise(resolve => {
                // compressorjs 默认开启 checkOrientation 选项
                // 会将图片修正为正确方向
                new Compressor(file, {
                    success: resolve,
                    error(err) {
                        console.log(err.message);
                    }
                });
            });

        return {
            beforeRead
        };
    },
    data() {
        return {
            form: {
                content: '',
                pic: []
            },
            show: false,
            roomId: 0
        };
    },
    mounted() {
        if (this.$route.query.roomId) {
            this.roomId = this.$route.query.roomId;
        }
    },
    methods: {
        submit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            let form = { ...this.form };
            form.roomId = this.roomId;

            form.pic = form.pic.map(item => {
                return item.url;
            });
            this.$http
                .post('/report/create', form)
                .then(res => {
                    this.$toast.clear();
                    this.$dialog
                        .alert({
                            title: '提交成功',
                            message:
                                '感谢您的宝贵意见与建议，我们将于24小时内给您相关答案，感谢您的耐心，愿您有美好的一天！'
                        })
                        .then(e => {
                            this.$router.back();
                        });
                })
                .catch(e => {
                    this.$toast(e.error);
                });
        },
        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>
/deep/.van-cell {
    flex-direction: column;

    .van-field__label {
        color: #ffffff;
        line-height: 24px;
        margin-bottom: 10px;
    }
}
/deep/.textarea {
    .van-field__body {
        background: @bg2;
        border-radius: 8px 8px 0 0;
        padding: 10px;
    }
    .van-field__control {
        font-size: 12px;
    }

    .van-field__word-limit {
        font-size: 12px;
        color: #c8c9cc;
        line-height: 17px;
        background: @bg2;
        margin-top: 0;
        padding: 10px;
        border-radius: 0 0 8px 8px;
    }
}

/deep/ .van-uploader__upload {
    border: 1px dashed #c8c9cc;
    border-radius: 8px;
    width: 100px;
    height: 100px;
}

/deep/.van-uploader__preview-image {
    border-radius: 8px;
    width: 100px;
    height: 100px;
}

.bottom {
    padding: 9px 28px;
    .bottom(9px);
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: @bg2;
}

/deep/.van-cell__title {
    width: auto;
}
.title {
    display: inline-block;
    span {
        font-size: 14px;
        font-weight: normal;
        color: #ffffff;
        line-height: 24px;

        &:nth-child(2) {
            font-size: 12px;
            color: #aaabad;
            margin-left: 2px;
        }
    }
}

.dialog-box {
    background: linear-gradient(180deg, #ffeddd 0%, #fff9f4 100%);
    .flex-col();
    align-items: center;
    padding: 24px 16px;
    position: relative;
    img {
        width: 128px;
        display: block;
    }
    .dialog-title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 22px;
        padding: 12px;
    }
    .dialog-text {
        font-size: 14px;
        color: #939599;
        line-height: 20px;
        text-align: center;
    }

    .close {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 16px;
        top: 16px;
    }
}

/deep/.van-dialog {
    width: 260px;
}
</style>
