<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>

        <div class="form-group">
            <input type="hidden" v-model="formData.file">
            <el-upload :action="api_url + '/supportDocument?contract_id='+formData.id+'&api_token=' + api_token" :on-success="updateSupportDocument" :multiple="false" :show-file-list="false">
                <el-button type="primary" icon="el-icon-plus">Click to add support document</el-button>
            </el-upload>
            <div class="error-feedback" v-if="formErrors.file">{{formErrors.file[0]}}</div>
        </div>

        <el-table :data="supportDocuments" stripe>
            <el-table-column prop="name" label="Document"></el-table-column>
            <el-table-column prop="user" label="Uploaded By" width="120px"></el-table-column>
            <el-table-column prop="created_at" label="Upload Time" width="150px">
                <template slot-scope="scope">
                    {{scope.row.created_at | readableDateTime}}
                </template>
            </el-table-column>
            <el-table-column align="right" width="70px">
                <template slot-scope="scope">
                    <a :href="base_url + '/' + scope.row.path" target="_blank"><i class="el-icon-document"></i></a>
                    <a href="#" @click.prevent="deleteData(scope.row)"><i class="el-icon-delete"></i></a>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    props: ['data'],
    computed: {
        supportDocuments() {
            return this.$store.state.supportDocuments
        },
        formData() {
            return this.data
        }
    },
    data: function() {
        return {
            api_url: API_URL,
            base_url: BASE_URL,
            api_token: USER.api_token,
            error: {},
            formErrors: []
        }
    },
    methods: {
        deleteData: function(support_document) {
            if (!confirm('Are you sure you want to delete this document?')) {
                return;
            }

            let _this = this;
            let params = { api_token: USER.api_token }
            axios.delete(API_URL + '/supportDocument/' + support_document.id, { params: params })
            .then(function(r) {
                _this.$message({
                    message: 'Document has been deleted.',
                    type: 'success'
                });
                _this.$store.commit('getSupportDocuments', { contract_id: _this.formData.id })
            })
            .catch(function(e) {
                console.log(e);
                _this.$message({
                    message: 'Failed to delete document.',
                    type: 'error'
                });
            });
        },
        updateSupportDocument: function(response, file, fileList) {
            if (response.success) {
                this.formData.file = response.file;
                this.formErrors.file = null;
                this.$store.state.loading = false;
                this.$store.commit('getSupportDocuments', { contract_id: response.contract_id });
            } else {
                this.formErrors.file = [response.message];
            }

            this.$forceUpdate();
        },
    },
    filters: {
        readableDateTime: function(v) {
            return v ? moment(v).format('DD-MMM-YYYY HH:mm') : '';
        }
    }
}
</script>

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