<template lang="html">
    <div>
        <el-alert type="error" title="ERROR"
            :description="error.message + '\n' + error.file + ':' + error.line"
            v-show="error.message"
            style="margin-bottom:15px;">
        </el-alert>

        <form @submit.prevent="sendMessage">
            <div class="form-group row">
                <label class="col-form-label col-md-3">Recipients</label>
                <div class="col-md-9">
                    <el-select placeholder="Recipients" v-model="formData.to" style="width:100%;" multiple filterable allow-create default-first-option>
                        <el-option :value="c.email" :label="c.email" v-for="c in contacts" :key="c.id"></el-option>
                    </el-select>
                    <div class="error-feedback" v-if="formErrors.to">{{formErrors.to[0]}}</div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-md-3">Subject</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" placeholder="Subject" v-model="formData.subject">
                    <div class="error-feedback" v-if="formErrors.subject">{{formErrors.subject[0]}}</div>
                </div>
            </div>
            <div class="form-group">
                <textarea rows="8" class="form-control" placeholder="Message" v-model="formData.body"></textarea>
                <div class="error-feedback" v-if="formErrors.body">{{formErrors.body[0]}}</div>
            </div>
            <div class="form-group">
                <br>
                <strong>Attach File Revision</strong>
                <br>
                <table class="table table-sm table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>#</th>
                            <th>Upload Time</th>
                            <th>Comment</th>
                            <th class="text-center">File</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="r in revisions">
                            <td><input type="checkbox" :value="r.id" v-model="formData.attachment"></td>
                            <td>{{r.revision_number}}</td>
                            <td>{{r.created_at | readableDateTime}}</td>
                            <td>{{r.comment}}</td>
                            <td class="text-center">
                                <a :href="base_url + '/contractRevision/viewFile/' + r.id" target="_blank">
                                    <i class="el-icon-document"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="form-group text-right">
                <button class="btn btn-primary" @click.prevent="sendMessage"><i class="el-icon-message"></i> SEND</button>
                <button class="btn btn-secondary" @click.prevent="closeDialog"><i class="el-icon-close"></i> CANCEL</button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    props: ['data'],
    filters: {
        readableDateTime: function(v) {
            return v ? moment(v).format('DD-MMM-YYYY HH:mm') : '';
        }
    },
    computed: {
        formData() {
            return this.data
        },
        contacts() {
            return this.$store.state.contacts
        },
        revisions() {
            return this.$store.state.revisions
        }
    },
    data: function() {
        return {
            error: {},
            formErrors: [],
            base_url: BASE_URL
        }
    },
    methods: {
        closeDialog: function() {
            this.error = {};
            this.formErrors = [];
            this.$emit('close-dialog')
        },
        sendMessage: function() {
            let _this = this;
            _this.$store.state.loading = true;
            axios.post(BASE_URL + '/message', _this.formData).then(function(r) {
                _this.$store.state.loading = false;
                _this.closeDialog();
                _this.$message({
                    message: r.data.message,
                    type: r.data.status
                });
                _this.$emit('refresh-data');
            }).catch(function(e) {
                _this.$store.state.loading = false;

                if (e.response.status == 422) {
                    _this.error = {};
                    _this.formErrors = e.response.data.errors;
                }

                if (e.response.status == 500) {
                    _this.formErrors = {};
                    _this.error = e.response.data;
                }

                console.log(e);
            });
        }
    }
}
</script>

<style lang="css">
</style>
