
<template>
    <Modal
        :visible="visible"
        :onCancel="onCancel"
        :afterClose="afterClose"
        :maskClosable="false"
        :keyborad="false"
        width="872px"
        :class="bem('modal')"
    >
        <form :class="bem()" @submit="onSubmit">
            <img src="./assets/slidebar.png" alt="slidebar">
            <div :class="bem('content')">

                <div :class="bem('label')">
                    <span :class="bem('tag')"><div>必填</div></span>
                    请评价本次编辑体验：
                </div>
                <Rate :class="bem('rate')" v-model="vm.rate"/>
                <div :class="bem('label')">
                    <span :class="bem('tag')"><div>必填</div></span>
                    你愿意把“稿定设计”推荐给你的朋友吗？
                </div>
                <nps :class="bem('nps')" v-model="vm.nps"/>
                <div :class="bem('feedback')">
                    <Textarea v-model="vm.feedback" placeholder="你给出这个分数的原因？说说你的建议" />
                    <transition name="gd-fade" >
                        <div v-if="error && vm.feedback.length > 500" :class="bem('error')">输入字数已超出限制  {{vm.feedback.length}}/500</div>
                    </transition>
                </div>
                <div :class="bem('contact')">
                    <GdInput v-model="vm.contact"  placeholder="你的联系方式？" />
                    <transition name="gd-fade" slot="append">
                        <div v-if="error && vm.contact.length > 30" :class="bem('error')">输入字数已超出限制  {{vm.contact.length}}/30</div>
                    </transition>
                </div>
                <div :class="bem('footer')">
                    <Button
                        type="primary"
                        :disabled="!vm.canSubmit"
                        :loading="loading"
                    >{{loading ? '提交评价中...' : '提交评价'}}</Button>
                </div>
            </div>
        </form>
    </Modal>
</template>
<script>
import Modal from '../Modal';
import Rate from '../Rate';
import Button from '../Button';
import Nps from './Nps';
import GdInput from '../Input';
import confim from '../confim';
import { createComponentName, componentMixin } from '../_utils/component';
import ViewModel from './vm';

const Textarea = GdInput.Textarea;

export default {
    name: createComponentName('questionnaire'),
    components: {
        Modal,
        Nps,
        Rate,
        Button,
        Textarea,
        GdInput,
    },
    mixins: [componentMixin],
    props: {
        onCancel: {
            type: Function,
        },
        afterClose: {
            type: Function,
        },
        // 居中
        centered: {
            type: Boolean,
            default: true,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        onOk: {
            type: Function,
        }
    },
    data() {
        return {
            vm: new ViewModel(),
            loading: false,
            error: false,
        };
    },
    methods: {
        getInfo(postion) {
            return this.vm.getInfo(postion, '123489');
        },
        onError(e) {
            const promise = confim.error({
                title: '提交失败',
                subTitle: e.message,
                okText: '重新提交',
                onOk: async() => {
                    promise.vm.update({ okText: '提交中...' });
                    const res = await this.vm.submit(e).then(() => {
                        this.onSuccess();
                        return true;
                    }).catch((e) => {
                        promise.vm.update({ subTitle: e.message });
                        return false;
                    });
                    promise.vm.update({ okText: '重新提交' });
                    return res;
                }
            });
            return promise;
        },
        onSuccess() {
            return confim.success({
                title: '提交成功',
                subTitle: '感谢你的评价',
                time: 1000
            });
        },
        async onSubmit(e) {
            e.preventDefault();
            if (this.vm.feedback.length > 500 || this.vm.contact.length > 30) {
                this.error = true;
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.error = false;
                }, 2000);
                return;
            }

            this.loading = true;
            await this.vm.submit().then(async() => {
                this.loading = false;
                this.visible = false;
                await this.onSuccess();
                this.onOk();
            }).catch(async(e) => {
                this.visible = false;
                this.loading = false;
                await this.onError(e);
                this.onCancel();
            });
        }
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: @questionnaire;

.@{b} {
    display: flex;

    &__content {
        width: 612px;
        padding: 44px 58px 28px 58px;
    }

    &__label {
        font-size:14px;
        color: black;
        line-height: 1;
        margin: 0;
        margin-bottom: @margin-sm;
    }

    &__tag {
        padding: 1px 5px;
        background:rgba(241,241,241,1);
        border-radius:1px;
        width:22px;
        height:16px;
        font-size:12px;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:1;

        div {
            display: inline-block;
            transform: scale(0.91);
        }
    }

    &__nps,
    &__rate {
        margin-bottom: @margin-xxlg;
    }

    &__feedback {
        margin-bottom: @margin-base;
        position: relative;
    }
    &__contact {
        position: relative;
        margin-bottom: @margin-xxxlg;
    }

    &__feedback .@{b}__error {
        padding: 4px 6px;
        bottom: 7px;
    }

    &__footer {
        text-align: right;
    }

    &__error {
        color:rgba(238,68,68,1);
        font-size: 12px;
        padding: 6px;
        position: absolute;
        right: @margin-sm;
        bottom: 7px;
        text-align: right;
        font-size:11px;
        line-height:15px;
        background: #fff;
    }
}

.@{b}__modal {
    .@{modal} {
        padding: 0;

        &__body {
            margin: 0;
        }

        &__close {
            top: 24px;
            right: 24px;
        }
    }
}

</style>
