//Vue.config.devtools = true;
Vue.component('v-select', VueSelect.VueSelect);

var chat_modal__bg__file = new Vue({
    el: '#chat-modal__bg__file',
    components: {
        Multiselect: window.VueMultiselect.default
    },
    data: {
        user_id: this.session_user_id,
        agency_id: this.agency_id,
        name: '',
        mes_error: false,
        mes_error_update: false,

        selectedFiles: [],
        progressUoload: [],
        notSelectedFilesMessage: "",
        classTypesFile: {
            'xls': 'far fa-file-excel',
            'xlsx': 'far fa-file-excel',
            'doc': 'far fa-file-word',
            'docx': 'far fa-file-word',
            'img': 'far fa-file-image',
            'png': 'far fa-file-image',
            'pdf': 'far fa-file-pdf',
            'txt': 'far fa-file-alt',
            'xml': 'far fa-file-alt',
            'html': 'far fa-file-code',
            'rar': 'far fa-file-archive',
            'zip': 'far fa-file-archive',
            '7z': 'far fa-file-archive',
            'undefined': 'far fa-file'
        },

        isSelect: 0,
    },
    methods: {
        clearFiles(){
            this.selectedFiles = [];
            this.progressUoload = [];
            this.notSelectedFilesMessage = "";
            this.isSelect = 0;
            $('#chat-modal__file .fileNames').val('');
        },
        onFileSelected(event) {

            var files = Array.from(event.target.files);
            var j = chat_modal__bg__file.selectedFiles.length;
            this.isSelect = event.target.files.length;
            $error = "";
            const notSelectedFiles = []
            for (var i = 0; i < files.length; i++) {
                const file = files[i];
                const MAX_FILE_SIZE = 16 * 1024 * 1024;
                if(file.size > MAX_FILE_SIZE) {
                    const sizeMB = (file.size / 1024 / 1024).toFixed(1);
                    notSelectedFiles.push(`● ${file.name} (${sizeMB} МБ)`);
                    continue;
                }
                files[i].typeFile = chat_modal__bg__file.typeFile(files[i].name).toLowerCase();

                if (files[i].typeFile !== 'doc' && files[i].typeFile !== 'docx' && files[i].typeFile !== 'xls'
                    && files[i].typeFile !== 'xlsx' && files[i].typeFile !== 'pdf' && files[i].typeFile !== 'jpeg' && files[i].typeFile !== 'jpg'
                    && files[i].typeFile !== 'gif' && files[i].typeFile !== 'png' && files[i].typeFile !== 'mp3' && files[i].typeFile !== 'zip' && files[i].typeFile !== 'rar') {
                    $error = "Неверный тип файла";
                    continue;
                }

                files[i].classFile = chat_modal__bg__file.classTypesFile.undefined;
                files[i].guid = '';
                if (chat_modal__bg__file.classTypesFile[files[i].typeFile]) {
                    files[i].classFile = chat_modal__bg__file.classTypesFile[files[i].typeFile];
                }
                var proc = { 'progress': 0, 'isUpload': false, 'uploads': false, 'isEdit': false, 'edit_name': '', 'real_name': files[i].name}
                chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload, j, proc);
                chat_modal__bg__file.$set(chat_modal__bg__file.selectedFiles, j, files[i]);

                chat_modal__bg__file.onUpload(j, files[i]);
                j++;
            }
            if (notSelectedFiles.length > 0) {
                chat_modal__bg__file.notSelectedFilesMessage = [
                    "Следующие файл(ы) не были загружены (превышают 16 МБ):",
                    ...notSelectedFiles
                ];
            }
        },
        onUpload: function(index, file) {

            chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'uploads', true);

            let fd = new FormData();
            let reqId = 0;
            if($('#addFileButtonNew').attr('data-req') > 0){
                reqId = $('#addFileButtonNew').attr('data-req');
            }
            let objectId = 0;
            if($('#addFileButtonNew').attr('data-object') > 0){
                objectId = $('#addFileButtonNew').attr('data-object');
            }
            fd.append('funnel_id', chat_modal__bg__file.funnelId);
            fd.append('client_id', $('#submitClientInfoTextButtonNew').attr('data-id'));
            fd.append('req_id', reqId);
            fd.append('object_id', objectId);
            fd.append('type_file', file.typeFile);
            fd.append('file', chat_modal__bg__file.selectedFiles[index]);

            axios.post('/ajax/vue_upload_clients.php', fd, {
                    onUploadProgress: progressEvent => {
                        var pr = Math.ceil(progressEvent.loaded / progressEvent.total * 100);
                        chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'progress', pr);
                    }
                })
                .then(function(response) {
                    if (response.data.res === 'done') {
                        //console.log(response);
                        chat_modal__bg__file.$set(chat_modal__bg__file.selectedFiles[index], 'guid', response.data.guid);
                        chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'isUpload', true);
                        chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'uploads', false);
                    } else {
                        // alert(response.data.res);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });

        },
        onDeleteFile: function(index, file) {
            chat_modal__bg__file.selectedFiles.splice(index, 1);
            $('.ui-tooltip').remove();
            chat_modal__bg__file.progressUoload.splice(index, 1);
            if (file.guid != '') {
                axios.post('/ajax/ajax_vue_funnel.php', {
                    request: 'deleteFile',
                    funnelId: chat_modal__bg__file.funnelId,
                    guid: file.guid,
                    type_file: file.typeFile

                })
            }
        },
        onEditFile(index, file){

          chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'isEdit', true);
          var name = chat_modal__bg__file.selectedFiles[index].name.replace('.'+chat_modal__bg__file.selectedFiles[index].typeFile, '');
          chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'edit_name', name);
        },
        saveEdit(index){

          chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'isEdit', false);
          if(!this.isEmpty(chat_modal__bg__file.progressUoload[index].edit_name)){
            var real_name = chat_modal__bg__file.progressUoload[index].edit_name+'.'+chat_modal__bg__file.selectedFiles[index].typeFile;
            chat_modal__bg__file.$set(chat_modal__bg__file.progressUoload[index], 'real_name', real_name);

            axios.post('/ajax/ajax_vue_clients.php',
              {
                request: 'edit_file_name',
                name: real_name,
                guid: chat_modal__bg__file.selectedFiles[index].guid,

                })
                .then(function(response) {
                    //console.log(response.data);

                })
                .catch(function(error) {
                    console.log(error);
                });

          }
        },
        typeFile: function(nameFile) {
            var tchk = nameFile.lastIndexOf(".");

            if (tchk != -1) {
                return nameFile.slice(tchk + 1);
            }
            return 'undefined';
        },
        set_mes_error: function(text) {
            chat_modal__bg__file.mes_error = true;
            chat_modal__bg__file.error = text;

        },
        isEmpty: function(data) {
            if (typeof(data) === 'object') {
                if (JSON.stringify(data) === '{}' || JSON.stringify(data) === '[]') {
                    return true;
                } else if (!data) {
                    return true;
                }
                return false;
            } else if (typeof(data) === 'string') {
                if (!data.trim()) {
                    return true;
                }
                return false;
            } else if (typeof(data) === 'undefined') {
                return true;
            } else {
                return false;
            }
        },
    },
    created: function() {
        $('#app').removeClass('hidden');
    }


});

var partner = new Vue({
    el: '#chat-modal__bg__partner',
    data: {
        employe: [{code: '', date_employe: ''}],
        selectedEmploye: null,
        req_id: 0,
    },
    methods: {
        change_employe: function () {
            var clientId = $('#client_history .client').attr("id").replace("client__", "");
            var userId = $('#userIdPartner').val();

            axios.post('/ajax/ajax_vue_clients.php',
                {
                    request: 'savePartnerUser',
                    client_id: clientId,
                    user_id: userId,
                    doers: partner.selectedEmploye,
                    req_id: partner.req_id,
                })
                .then(function (response) {
                    console.log(response.data);
                    close_partner_modal(clientId, partner.req_id);

                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        get__employe: function () {
            var clientId = $('#client_history .client').attr("id").replace("client__", "");
            axios.post('/ajax/list_employe.php', { client_id: clientId, req_id: this.req_id })
                .then(function (response) {
                    console.log(response.data);
                    partner.employe = response.data.emp;

                    //for ()
                    partner.selectedEmploye = response.data.doers;

                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    mounted() {
        //this.get__employe();
    },
    created: function() {
        //$('#app').removeClass('hidden');

    }


});
if($('#chat-modal__bg__adjacent').length > 0){
    var adjacent = new Vue({
        el: '#chat-modal__bg__adjacent',
        data: {
            userId: $('#session_user_id').val(),
            agencyId: $('#session_agency_id').val(),
            funnels_adjacent: [],
            employe: [],
            selectedEmploye: 0,
            selected_adjacent: null,
            req_id: 0,
            funnel_id: 0,
            OpenIndicator: {
                render: createElement => createElement('span', { class: { 'vueToggleSpan': true } }),
            },
        },
        methods: {
            change_adjacent: function () {
               /* var clientId = $('#client_history .client').attr("id").replace("client__", "");
                var userId = $('#userIdPartner').val();*/

                axios.post('/ajax/vue_ajax/funnel_axios_vue.php',
                    {
                        request: 'save_adjacent_funnels',
                        who_work: this.selectedEmploye,
                        funnel_id: this.selected_adjacent,
                        req_id: this.req_id,
                        user_id: this.userId
                    })
                    .then(function (response) {
                        console.log(response.data);
                        close_adjacent_modal(0, adjacent.req_id);

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            get_adjacent_funnels() {
                axios.post('/ajax/vue_ajax/funnel_axios_vue.php', {
                    request: 'get_adjacent_funnels',
                    agency_id: this.agencyId,
                    funnel_id: this.funnel_id,
                    req_id: this.req_id,
                })
                .then((response) => {
                    console.log(response.data);
                    if(response.data.error){
                        console.log(response.data.error);
                    } else {
                        if(response.data.funnels){
                            this.funnels_adjacent = response.data.funnels;
                        }
                    }
    
                    
                })
                .catch(function(error) {
                    console.log(error);
                });
            },
            change_funnel(){
                this.selectedEmploye = 0;
                if(this.selected_adjacent > 0){
                    var temp_a = this.funnels_adjacent.find(x => x.code === this.selected_adjacent);
                    console.log(temp_a);
                    this.employe = temp_a.users;
                }
            },
            isEmpty: function(data) {
                if (typeof(data) === 'object') {
                    if (JSON.stringify(data) === '{}' || JSON.stringify(data) === '[]') {
                        return true;
                    } else if (!data) {
                        return true;
                    }
                    return false;
                } else if (typeof(data) === 'string') {
                    if (!data.trim()) {
                        return true;
                    }
                    return false;
                } else if (typeof(data) === 'undefined') {
                    return true;
                } else {
                    return false;
                }
            },
        },
        mounted() {
            //this.get__employe();
        },
        created: function() {
            //$('#app').removeClass('hidden');

        }


    });
}