<template>
  <modal type="modal-load-program" :title="'modal_load_program_lbl_title_window' | localize('Selezione programma')">
    <button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
            <div class="modal-load-program-header">
                <!-- <div class="title">
                        <i class="fa fa-chevron-left"></i>
                    Selezione programma da aggiungere in coda
                </div> -->
                <div class="box-search">
                    <div class="path">

                        <div class="child" v-for="(bread,key) in this.breadcrumbs" :key="key">
                            <div v-if="bread.name && key!=0"><i class="fa fa-chevron-right"></i></div>
                            <a href="#" @click="navigateTo(bread.path,bread.absolutePath,isLocalNavigation, 1,1)">{{bread.name}}</a>
                        </div>
                        <!-- <div class="root">PC</div>
                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
                        <div class="child">Cliente A</div>
                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
                        <div class="child">Part Program 01</div> -->
                    </div>
                </div>
            </div>
            <div class="modal-load-program-body">
                <div class="first-column">
                    <card-folder-path name="CNC" :iconType="'DATABASE'"
                                      :selected="'' == currentDrive"
                                      :disabled="!isCnReady()"
                                      @click="navigateTo('\\\\','\\\\', false, 1,0)"></card-folder-path>
                    <hr />
                    <card-folder-path v-for="(val, key) in this.driveList" :key="key" :name="val.Name" :iconType="val.Type"
                                      :selected="val.Path == currentDrive"  @click="navigateTo(val.Path,val.Path, true, 1,0)" ></card-folder-path>
                </div>
                <div class="second-column" v-if="navigationDepth <1"></div>
                <div class="second-column" v-if="navigationDepth >=1">
                    <div class="group-btn">
                        <input type="text" v-model="currentFilterFirst" :placeholder="'modal_load_program_search_placeholder' | localize('Cerca un programma per nome')">
                        <i class="fa fa-2x fa-search"></i>
                    </div>
                    <div class="content scrollable">
                        <card-folder-path v-for="(val,key) in this.firstColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterFirst.toLowerCase()) >=0)"
                            :key="key"
                            :name="val.Name"
                            :disabled="!isCnReady() && !isLocalNavigation"
                            :class="{dark: val.AbsolutePath == lastClickPath}"
                            :selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath"
                            :withArrow="val.IsDirectory == true"
                            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
                            @click="val.IsDirectory ? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,1): fileInfo(val.AbsolutePath,1)"></card-folder-path>
                    </div>
                </div>
                <div class="third-column" v-if="navigationDepth <2"></div>
                <div class="third-column" v-if="navigationDepth >=2">
                    <!-- !(this.arrayViewList[1] ? this.arrayViewList[1].length < 1 : false) -->
                    <div class="group-btn">
                        <input type="text" v-model="currentFilterSecond" :placeholder="'modal_load_program_search_placeholder' | localize('Cerca un programma per nome')">
                        <i class="fa fa-2x fa-search"></i>
                    </div>
                    <div class="label-folder-empty" v-if="secondColumnData.length ==0">
                        <label>{{'modal_load_program_empty_folder' | localize("Cartella vuota")}}</label>
                    </div>
                    <div class="content scrollable" v-if="secondColumnData.length >0">
                        <card-folder-path v-for="val in (this.secondColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterSecond.toLowerCase()) >=0))"
                            :key="val.Name"
                            :name="val.Name"
                            :disabled="!isCnReady() && !isLocalNavigation"
                            :class="{dark: val.AbsolutePath == lastClickPath}"
                            :selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath"
                            :withArrow="val.IsDirectory == true"
                            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
                            @click="val.IsDirectory? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,2):fileInfo(val.AbsolutePath,2) "></card-folder-path>
                        <!-- <card-folder-path name="Cliente A" @click="selectItem()" :with-arrow="false"></card-folder-path>-->
                    </div>
                </div>
                <div class="selected-item" v-if="selectedFile">
                    <div class="selected-item-header">
                        <div>
                            <label class="selected-item-title">{{selectedFile.Name}}</label>

                            <div class="subtitle">
                                <label class="title">{{'modal_load_program_creation_date' | localize("Creation Date:")}}</label>
                                <label class="text">{{getDate(selectedFile.CreationDate)}}</label>
                            <label class="title">{{'modal_load_program_last_change_date' | localize("Last Change Date:")}}</label>
                            <label class="text">{{getDate(selectedFile.LastModDate)}}</label>
                            </div>
                        </div>
                        <div class="group-button">
                            <button class="btn" v-if="false"><i class="fa fa-clone"></i></button>
                            <button class="btn" disabled><i class="fa fa-pencil-square-o"></i></button>
                        </div>
                    </div>
                    <div class="selected-item-body">
                        <div class="selected-item-body-image">
                            <img v-if="selectedFile.PreviewBase64" :src="selectedFile.PreviewBase64">
                            <div v-if="!selectedFile.PreviewBase64" class="noimage">
                                {{'modal_load_program_lbl_img_not_found' | localize('Preview non disponibile')}}
                            </div>
                        </div>
                        <div class="selected-item-body-description scrollable">
                            <div class="row" v-for="(item,index) in selectedFile.Content" :key="'line' + index">
                               <label>{{item}}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="selected-item" v-if="!selectedFile">
                    <div class="notselecteditem">
                        <label>{{'modal_load_program_lbl_box_select_program' | localize('Seleziona programma')}}</label>
                    </div>
                </div>
            </div>
            <div class="modal-load-program-footer">
                <button class="btn btn-success"
                        :disabled="!selectedFile || !isCnReady()"
                        v-if="!this.isLocalNavigation"
                        @click="load(selectedFile)">
                        {{'modal_load_program_btn_load_program' | localize('Attiva programma')}}
                </button>
                <button class="btn btn-success"
                        :disabled="!selectedFile || !isCnReady()"
                        v-if="this.isLocalNavigation"
                        @click="load(selectedFile)">
                        {{'modal_load_program_btn_upload_program' | localize('Carica e attiva programma')}}
                </button>
            </div>
  </modal>
</template>
<script src="./modal-load-program.ts" lang="ts"></script>
<!--<script src="./create-maintenance.ts" lang="ts"></script>-->
