var funnelchecklist = new Vue({
        el: '#funnel_check_list',
        components: {

            vuejsDatepicker: window.vuejsDatepicker
        },
        data(){

            return {
                ru: vdp_translation_ru.js,
                isShow: false,
                errorText: '',
                errorMes: false,
                isPreloader: 1,
                steps: [],
                typePole: {"Строка": "input", 
                    "Текст": "textarea", 
                    "Ветвление этапов": "select", 
                    "Дата":"date", 
                    "Файл":"file", 
                    "Задача на выбор":"checkbox", 
                    "Задаток":"deposit",
                    "Ожидаемая комиссия":"commission",
                    "Расходы":"expenses"
                },
                format: "dd.MM.yyyy",
                mondayfirst: true,
                selectFile: {'file':{}, 'typeFile': '', 'classFile': '', 'guid': '', 'progress': 0, 'isUpload':  false, 'uploads':  false, 'is': false},
                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'},
                selectFiles:[],
                updateWhoWork: false,
                doers: [],
                listDoers:[],
                stepDoers:[],
                tasks: [],
                objects: [],
                client_id: 0,
                req_id: 0,
                stepId: 0,
                funnelId: 0,
                id: 0,
            }
        },
        methods:{

            //Открытие
            open(funnel_id, id, type){
                this.isShow = true;
                this.isPreloader = 1;
                this.steps = [];
                this.client_id = 0;
                this.req_id = 0;
                this.funnelId = funnel_id;
                if(type == 'req'){
                    this.req_id = id;
                }
                if(type == 'client'){
                   this.client_id = id
                }

                axios.post('/ajax/ajax_vue_funnel.php',{
                    request: 'get_steps_order',
                    funnel_id: funnel_id,

                },
                )
                .then((response)=> {
                   // console.log(response.data);
                    this.isPreloader = 0;
                    this.steps = this.getSteps(response.data);
                    $("body").addClass("lock");
                    $('.jw__add-popup').removeClass('is__show');
                })
                .catch(function (error) {
                  console.log(error);
                });

            },

            //Получение этапов
            getSteps(steps){

                for(var id in steps){

                    var temp_list = [];
                    temp_list = JSON.parse(steps[id].pole_end_list);
                    steps[id].pole_end_list = temp_list;
                    steps[id].count = steps[id].pole_end_list.length;

                    if(steps[id].pole_end_list.length > 0){
                        for(var i=0; i < steps[id].pole_end_list.length; i++){
                            steps[id].pole_end_list[i].isSave=false;
                            if(steps[id].pole_end_list[i].dopSettings.select){
                                steps[id].pole_end_list[i].isHide=true;
                                steps[id].count--;
                            }
                        }
                    }
                    //console.log(steps[id].pole_end_list);
                    steps[id].vidPole = [];
                    steps[id].values = [];
                    if(this.isEmpty(steps[id].color_step)){
                        steps[id].color_step  = '#000';
                    }

                }
                return steps;
            },

            openStep: function(id){

                this.options = [];
                this.nextStepSelect = '';
                this.selectFiles = [];

                this.id = "step_"+this.steps[id].id;
                this.stepId = this.steps[id].id;
                //console.log(this.steps[id].id);
                for(var i in this.steps[id].pole_end_list){

                    this.selectFiles.push({'file':{}, 'typeFile': '', 'classFile': '', 'guid': '', 'progress': 0, 'name': '', 'isUpload':  false, 'uploads':  false, 'is': false});
                }
                this.$set(this.steps[id], 'vidPole',  []);
                this.$set(this.steps[id], 'values',  []);
                this.$set(this.steps[id], 'tasks',  []);

                axios.post('/ajax/ajax_vue_clients.php',{
                    request: 'openDetailsStep',
                    client_id: this.client_id,
                    req_id: this.req_id,
                    step_id: this.steps[id].id,
                },
                )
                .then((response)=> {

                    //console.log(response.data);
                    var res = response.data;
                    if(res != 0){
                      for(var i in res){

                        if(res[i]){
                            if(res[i].type == 'checkbox'){
                                if(res[i].value != ''){
                                    this.tasks = res[i].value;
                                    this.$set(this.steps[id].values[i], 'value',  res[i].value);
                                }
                            } else
                            if(res[i].type == 'file'){
                              this.$set(this.steps[id].values[i], 'value',  res[i].value);
                              if(res[i].value.file){
                                for(var f in res[i].value){
                                    this.$set(this.selectFiles[i], f,  res[i].value[f]);
                                }

                              }
                            } else if (res[i].type == 'textarea' || res[i].type == 'input' || res[i].type == 'date' || res[i].type == 'deposit') {
                              this.$set(this.steps[id].values[i], 'value',  res[i].value);
                              //this.step.values[] = res;
                            }
                        }
                      }
                    }
                  })
                  .catch(function (error) {
                    console.log(error);
                  });

                  var vala = [];
                    if(this.steps[id].pole_end_list.length > 0){
                        for(var i=0; i<this.steps[id].pole_end_list.length; i++){
                         this.steps[id].vidPole.push(this.typePole[this.steps[id].pole_end_list[i].type]);
                         var val = {'name': this.steps[id].pole_end_list[i].name,'type':this.steps[id].vidPole[i], 'value': ''};
                            this.$set(this.steps[id].values, i,  {});
                            this.$set(this.steps[id].values[i], 'name', this.steps[id].pole_end_list[i].name);
                            this.$set(this.steps[id].values[i], 'type', this.steps[id].vidPole[i]);
                            this.$set(this.steps[id].values[i], 'value',  '');
                      /*   if(this.step.vidPole[i] == 'checkbox'){
                            val = {'name': this.step.pole_end_list[i].name,'type':this.step.vidPole[i], 'value': false};
                         }*/
                        // vala.push(val);

                         if(this.steps[id].vidPole[i] == 'date'){
                             $('#datepickerApp').datepicker({
                                 autoClose: 'true'
                             });
                         }
                      }
                    }
                    //this.steps[id].values = vala
                    //console.log(this.step.values);
                    for(var i in this.steps[id].files){
                        this.steps[id].files[i].typeFile = this.typeFile(this.steps[id].files[i].name);
                        this.steps[id].files[i].classFile = this.classTypesFile[this.steps[id].step.files[i].typeFile];
                    }
            },

            onFileSelected(event){

                var id = $(event.target).data("id");
                this.$set(this.selectFiles[id], 'uploads', false);
                this.$set(this.selectFiles[id], 'isUpload',  false);
                this.$set(this.selectFiles[id], 'progress',  0);
                 var file = event.target.files[0];
                 //console.log(id);
                 if(file.name){
                     this.selectFiles[id].file = file;
                     this.selectFiles[id].typeFile = this.typeFile(file.name).toLowerCase();

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

                     this.selectFiles[id].classFile = this.classTypesFile[this.selectFiles[id].typeFile];
                     this.selectFiles[id].guid = '';
                     this.selectFiles[id].is = true;
                     this.selectFiles[id].name = file.name;
                 }
                // console.log(this.selectFiles);
                this.onUpload(id, file);
             },
             onUpload: function(index, file){
               //console.log();
               this.$set(this.selectFiles[index], 'uploads', true);
               this.$set(this.selectFiles[index], 'isUpload',  false);
               this.$set(this.selectFiles[index], 'progress',  0);
               let fd = new FormData();
               fd.append('client_id', this.client_id);
               fd.append('req_id', this.req_id);
               fd.append('type_file', this.selectFiles[index].typeFile);
               fd.append('etap_id', this.stepId);
               fd.append('file', file);

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

                   console.log(error);
                 });

             },
             onDeleteFile: function(index, guid) {
                 $('.ui-tooltip').remove();
                 this.$set(this.selectFiles, index, {'file':{}, 'typeFile': '', 'classFile': '', 'guid': '', 'progress': 0, 'name': '', 'isUpload':  false, 'uploads':  false, 'is': false});
                 this.steps[this.id].values[index].value = '';

             },

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

                if(tchk != -1){
                    return nameFile.slice(tchk+1);
                }
                return 'undefined';
            },

            //Закрытие
            closes(){
                this.isShow = false;

                $("body").removeClass("lock");
                $('.jw__add-popup').removeClass('is__show');
            },

            //Сохранение изменений
            save(pole){
               axios.post('/ajax/ajax_vue_clients.php', {
                   request: 'save_check_list',
                   client_id: this.client_id,
                   req_id: this.req_id,
                   step_id: this.stepId,
                   funnel_id: this.funnelId,
                   values: JSON.stringify(this.steps[this.id].values),
                   pole: pole,
                 })
                 .then((response)=> {
                     console.log(response.data);
                     if(response.data == 1){
                         this.steps[this.id].pole_end_list[pole].isSave = true;
                     }
                  })
                 .catch(function (error) {

                   console.log(error);
                 });
            },

            toggleStep(id){
                for(var stepId in this.steps){
                    if(stepId == id){
                        if(this.steps[stepId].isHide){
                            this.steps[stepId].isHide = false;
                            this.openStep(stepId);
                        } else {
                            this.steps[stepId].isHide = true;
                        }
                    } else {
                        this.steps[stepId].isHide = true;
                    }
                }
            },

            //Проверка на пустоту
            isEmpty(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() {

        },
        created: function() {

            $("#funnel_check_list").removeClass("hidden");

        }
    })