<template>
    <Modal 
        class-name="vertical-center-modal"
        width="500"
        v-model="model">
        <p slot="header">
            咨询回复
        </p>
        <div style="text-align: center">
            <Input
                type = "textarea"
                :rows = "10"
                placeholder="请输入文字内容"
                :maxlength="250"
                v-model="answer"/>
        </div>
        <div style="text-align: right">
            <span style="color: #999; font-size: 10px; margin-top: 2px;">{{textMsg}}</span>
        </div>
        <div slot="footer" style="text-align: center">
            <Button type="primary" size="large" :loading="modal_loading" @click="submit">回复</Button>
            <Button type="default" size="large"  @click="cancel">取消</Button>
        </div>
    </Modal>
</template>

<script>

import FeedbackService from 'services/product/feedback-service';

export default {
    name: 'modal-answer-edit',
    created() {
        this.feedbackService = new FeedbackService();
    },
    data() {
        return {
            model: false,
            modal_loading: false,
            userId: '',
            id: '',
            answer: ''
        };
    },
    computed: {
        textMsg() {
            if (this.answer) {
                let num = 250 - this.answer.length;

                return `还能输${num >= 0 ? num : 0}个字`;
            }
        }
    },
    methods: {
        show(row) {
            this.reset();
            this.userId = row.userId;
            this.id = row.id;
            this.answer = row.answer;
            this.model = true;
        },
        close() {
            this.reset();
            this.model = false;
        },
        reset() {
            this.userId = null;
            this.id = null;
            this.answer = null;
        },
        submit() {
            this.modal_loading = true;

            this.submitData().then(() => {
                this.modal_loading = false;
                this.$emit('on-success');
                this.close();
            });
        },
        cancel() {
            this.close();
        },
        submitData() {
            return this.feedbackService.consultReply(this.userId, this.id, this.answer);
        }
    }
};
</script>