<template>
    <modal
        :visible="visible"
        @update:visible="v => $emit('update:visible', v)"
        width="614px"
        :title="title"
        :class="bem()"
        v-bind="$attrs"
        :onCancel="onCancel"
        maskClosable
        v-on="$listeners"
    >
        <div :class="bem('field-wrapper')">
            <label for="feedback-content">{{contentModule.label}}</label>
            <textarea
                :class="bem('field')"
                cols="30"
                v-model="content"
                rows="7"
                maxlength="1000"
                :placeholder="contentModule.placeholder"
                autofocus
            />
        </div>
        <div :class="bem('field-wrapper')">
            <label for="feedback-contact">{{contactModule.label}}</label>
            <input
                type="text"
                v-model="contact"
                :class="bem('field')"
                maxlength="100"
                :placeholder="contactModule.placeholder"
            >
        </div>
        <upload
            type="card"
            :autoUpload="false"
            multiple
            :limit="4"
            ref="upload"
            @exceed="onExceed" />
        <div :class="bem('btn-wrapper')">
            <Button type="primary" :class="bem('btn')" @click="submit">提交反馈</Button>
        </div>
    </modal>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import Modal from '../Modal';
import Button from '../Button';
import Upload from '../Upload';
import tips from '../Tips';
import request from '../request';

export default {
    name: createComponentName('feedback-modal'),
    components: {
        Modal,
        Button,
        Upload,
    },
    mixins: [componentMixin],
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        // 自定义校验
        customCheck: {
            type: Function,
            default() {},
        },
        title: {
            type: String,
            default: '反馈&建议',
        },
        // 表单提交前钩子
        beforeSubmit: {
            type: [Function, undefined],

        },
        contentModule: {
            type: Object,
            default() {
                return {
                    label: '您的反馈&建议：',
                    placeholder: '您在使用中遇到了什么问题？有什么建议，欢迎和我们说说。',
                };
            },
        },
        contactModule: {
            type: Object,
            default() {
                return {
                    label: '联系方式：',
                    placeholder: '填写联系方式我们才方便给你回答哦',
                };
            },
        },
    },
    data() {
        return {
            content: '',
            contact: '',
        };
    },
    methods: {
        async submit() {
            try {
                const content = this.content.trim();
                const contact = this.contact.trim();
                if (this.customCheck) {
                    await this.customCheck({ content, contact });
                }
                else {
                    if (!content) {
                        throw new Error('反馈内容不能为空！');
                    }
                    else if (content.length < 8) {
                        throw new Error('反馈内容不能少于8个字哦～');
                    }
                    else if (content.length > 1000) {
                        throw new Error('反馈内容请控制在1000字以内哦～');
                    }

                    if (!contact) {
                        throw new Error('联系方式不能为空！');
                    }
                }

                if (this.beforeSubmit) await this.beforeSubmit({ content, contact });

                tips.loading('提交中，请稍后...');
                this.feedbackPending = true;
                await this.$refs.upload.uploadFiles();
                const fileList = this.$refs.upload.fileList;
                await request.post('/api/feedbacks', {
                    content,
                    contact: contact,
                    images: fileList.map(file => ({
                        width: file.width,
                        height: file.height,
                        url: file.src,
                    })),
                    origin_url: document.URL,
                    referrer: document.referrer,
                });
                tips('您的反馈我们已收到~');
                this.content = '';
                this.contact = '';
                this.$emit('update:visible');
            }
            catch (error) {
                tips(error.message);
            }
        },
        onCancel() {
            this.content = '';
            this.contact = '';
        },
        onExceed() {
            tips('最多允许上传4张图片');
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';
@b: ~'@{prefix}-feedback-modal';

.@{b} {
    &__field-wrapper {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #d6d8df;
        border-radius: 1px;
        padding: 12px;
        margin-bottom: 18px;
    }

    &__field {
        flex: 1 1 auto;
        border: none;
        box-sizing: border-box;
        background: none;
        border: 0;
        resize: none;
        outline: 0;

        &::placeholder {
            color: #CCC;
        }
    }

    textarea.@{b}__field {
        flex: 0 0 100%;
    }

    &__btn-wrapper {
        text-align: center;
        margin-top: 36px;
    }

    &__btn {
        font-size: 1.14em;
        height: 50px;
        padding: 0 154px;
    }
}
</style>
