<template>
    <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="store">
            <div class="form-group row">
                <label class="col-md-4 col-form-label col-form-label-md">Contract Number</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" v-model="formData.contract_number" disabled>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-4 col-form-label col-form-label-md">Previous Revision</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" v-model="formData.previous_revision" readonly>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-4 col-form-label col-form-label-md">Current Revision</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" v-model="formData.revision_number" readonly>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-4 col-form-label col-form-label-md">Comment</label>
                <div class="col-md-8">
                    <textarea rows="3" class="form-control" placeholder="Comment" v-model="formData.comment"></textarea>
                    <div class="error-feedback" v-if="formErrors.comment">{{formErrors.comment[0]}}</div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-4 col-form-label col-form-label-md">Template</label>
                <div class="col-md-8">
                    <input type="hidden" v-model="formData.template">
                    <el-upload :action="api_url + '/contractRevision/upload?api_token=' + api_token"
                        ref="upload"
                        :on-success="updateTemplate"
                        :multiple="false" :limit="1">
                        <el-button size="small" type="primary">Click to upload file</el-button>
                    </el-upload>
                    <div class="error-feedback" v-if="formErrors.template">{{formErrors.template[0]}}</div>
                </div>
            </div>
            <br>
            <div class="form-group text-right">
                <button class="btn btn-primary" type="submit" @click.prevent="store"><i class="el-icon-check"></i> SAVE</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'],
    computed: {
        formData() {
            return this.data
        }
    },
    data: function() {
        return {
            api_url: API_URL,
            api_token: USER.api_token,
            formErrors: [],
            error: {},
        }
    },
    methods: {
        closeDialog: function() {
            this.error = {};
            this.formErrors = [];
            if (this.$refs.upload) {
                this.$refs.upload.clearFiles();
            }
            this.$emit('close-dialog')
        },
        updateTemplate: function(response, file, fileList) {
            if (response.success) {
                this.formData.template = response.file;
                this.formErrors.template = null;
            } else {
                this.formErrors.template = [response.message];
            }

            this.$forceUpdate();
        },
        store: function() {
            let _this = this;
            _this.formData.api_token = USER.api_token
            axios.post(API_URL + '/contractRevision', _this.formData)
                .then(function(r) {
                    _this.closeDialog()
                    _this.$message({
                        message: 'Data BERHASIL disimpan.',
                        type: 'success'
                    });
                    _this.$emit('refresh-data');
                })
                .catch(function(e) {
                    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;
                    }
                })
        },
    }
}
</script>

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