<template>
  <v-container>
    <v-app-bar app clipped-right clipped-left>
      <div class="d-flex align-center">
        <a href="/Catalogo">
          <v-img :src="require('../assets/Prysmian_Group_Logo.png')" width="100">
          </v-img>
        </a>
      </div>

      <div style="padding-left: 20px">
        <v-toolbar-title style="padding-left:10px; margin-top:15px" @click="openEditTitleDialog"
          >Editor de Templates <span v-if="getTitle.length > 0">- {{ getTitle }}</span></v-toolbar-title
        >
        <v-toolbar-items v-if="bar" class="my-3">
          <v-menu offset-y>
            <template v-slot:activator="{ on }">
              <v-btn text small v-on="on">
                Arquivo
              </v-btn>
            </template>
            <v-list>
              <v-list-item
                v-for="(item, index) in arquivoList"
                :key="index"
                @click="arquivoClicked(item)"
              >
                <v-list-item-title>{{ item }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>

          <v-menu offset-y>
            <template v-slot:activator="{ on }">
              <v-btn text small v-on="on">
                Editar
              </v-btn>
            </template>
          </v-menu>

          <v-menu offset-y>
            <template v-slot:activator="{ on }">
              <v-btn text small v-on="on">
                Exibir
              </v-btn>
            </template>
            <v-list>
              <v-list-item
                v-for="(item, index) in exibirList"
                :key="index"
                @click="exibirFullScreen(item)"
              >
                <v-list-item-title>{{ item }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>

          <v-menu offset-y>
            <template v-slot:activator="{ on }">
              <v-btn text small v-on="on">
                Inserir
              </v-btn>
            </template>
            <v-list>
              <v-list-item
                v-for="(item, index) in insertList"
                :key="index"
                @click="inserirChange(index)"
              >
                <v-list-item-title>{{ item }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>

          <v-dialog v-model="editNameDialog" width="500px">
            <v-card>
              <v-card-title class="headline grey lighten-2">
                Renomear
              </v-card-title>
              <v-card min-height="200px">
                <v-container>
                  <v-row>
                    <v-col>
                      <v-text-field
                              class="mt-4"
                              v-model="editName"
                              label="Título"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card>
              <v-footer absolute>
                <v-spacer></v-spacer>
                <v-btn class="ma-2" tile @click="updateTitle">Confirmar</v-btn>
                <v-btn class="ma-2" tile @click="closeEditTitleDialog()">
                  Cancelar
                </v-btn>
              </v-footer>
            </v-card>
          </v-dialog>

          <v-dialog v-model="tableDialog" width="1500">
            <v-card>
              <v-card-title class="headline grey lighten-2">
                Adicionar tabela
              </v-card-title>
              <v-card min-height="500px">
                <v-navigation-drawer
                  v-model="vShowTableNavigation"
                  absolute
                  clipped
                  left
                >
                  <v-list>
                    <v-list-group>
                      <template v-slot:activator>
                        <v-list-item-content>
                          <v-list-item-title>Atributos</v-list-item-title>
                        </v-list-item-content>
                      </template>
                      <v-list-item
                        v-for="(key, i) in availableData.keys()"
                        :key="i"
                      >
                        <v-checkbox
                          v-model="availableData.get(key).value"
                          :label="key"
                          @change="checkTransposed($event, key)"
                        ></v-checkbox>
                      </v-list-item>
                    </v-list-group>
                  </v-list>
                </v-navigation-drawer>
                <div class="d-block pa-6" style="float: right" v-if="analysis != null > 0">
                  <v-switch
                    v-model="switchTranspose"
                    label="Transpor"
                    @change="transpose"
                  ></v-switch>
                  <v-switch
                    v-model="switch2"
                    label="Destacar"
                    @change="tableChangeHighlight"
                  ></v-switch>
                </div>
                <p v-if="analysis != null > 0"
                  class="text-center font-weight-medium"
                  style="margin-left: 200px"
                >
                  Selecione os atributos da tabela
                </p>
                <p v-else class="text-center">No data available</p>
                <vue-table-dynamic
                  v-show="showTable"
                  style="width: 1000px"
                  class="mx-auto pa-4"
                  :params="params"
                ></vue-table-dynamic>
              </v-card>
              <v-footer absolute>
                <v-spacer></v-spacer>
                <v-btn class="ma-2" tile @click="teste()" v-if="analysis != null > 0">Confirmar</v-btn>
                <v-btn class="ma-2" tile @click="closeTableDialog()">
                  Cancelar
                </v-btn>
              </v-footer>
            </v-card>
          </v-dialog>
          <v-dialog v-model="imageDialog" width="1200">
            <v-card>
              <v-card-title class="headline grey lighten-2">
                Adicionar imagens
                <div class="cursor align-right" @click="closeImageDialog()">
                  <v-icon left>mdi-close</v-icon>
                </div>
              </v-card-title>
              <v-card min-height="500px">
                <v-tabs vertical>
                  <v-tab>
                    <v-icon left>mdi-image-multiple</v-icon>
                    <div @click="getImages()">
                      Banco de imagens
                    </div>
                  </v-tab>
                  <v-tab>
                    <v-icon left>mdi-image-multiple</v-icon>
                    Upload de fotos
                  </v-tab>
                  <v-tab-item>
                    <v-autocomplete
                      v-model="select"
                      :items="imgDataName"
                      :search-input.sync="search"
                      cache-items
                      class="searchingImage"
                      flat
                      hide-no-data
                      hide-details
                      label="Pesquisar imagem"
                      solo
                      outlined
                    ></v-autocomplete>
                    <v-container
                      style="max-height: 400px"
                      class="overflow-y-auto"
                      fluid
                    >
                      <v-row dense>
                        <v-col
                          v-for="img in tempImgData"
                          :key="img.src"
                          :cols="3"
                        >
                          <div class="cursor" @click="addImage($event, img)">
                            <v-img
                              :src="img.src"
                              class="white--text align-end"
                              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                              height="200px"
                              width="200px"
                            >
                            </v-img>
                          </div>
                        </v-col>
                      </v-row>
                    </v-container>
                  </v-tab-item>
                  <v-tab-item centered>
                    <input
                      type="file"
                      ref="file"
                      style="display: none;"
                      @change="addImage($event)"
                    />
                    <div class="cursor" @click="$refs.file.click()">
                      <v-content>
                        <v-container class="fill-height" fluid>
                          <v-row align="center" justify="center">
                            <v-col align="center">
                              <v-icon size="100">mdi-cloud-upload</v-icon>
                              <p>
                                Clique nesta região para fazer upload de imagem.
                              </p>
                            </v-col>
                          </v-row>
                        </v-container>
                      </v-content>
                    </div>
                  </v-tab-item>
                </v-tabs>
              </v-card>

              <v-footer absolute>
                <v-spacer></v-spacer>
                <v-btn class="ma-2" tile @click="closeImageDialog()">
                  Fechar
                </v-btn>
              </v-footer>
            </v-card>
          </v-dialog>
          <v-menu offset-y>
            <template v-slot:activator="{ on }">
              <v-btn text small v-on="on">
                Página
              </v-btn>
            </template>
          </v-menu>

          <v-menu offset-y>
            <template v-slot:activator="{ on }">
              <v-btn text small v-on="on">
                Organizar
              </v-btn>
            </template>
          </v-menu>
        </v-toolbar-items>
      </div>
      <v-spacer></v-spacer>
      <div>
        <v-btn
          small
          dark
          color="blue"
          @click="viewPdf()"
          style="margin-right: 10px;"
        >
          {{ this.viewDocLabel }}
          <v-btn small icon>
            <v-icon>{{ this.iconLabel }}</v-icon>
          </v-btn>
        </v-btn>
        <v-btn
          small
          dark
          color="blue"
          @click="openReportDialog()"
          style="margin-right: 10px;"
        >
          Visualizar em PDF
        </v-btn>
        <v-btn
          small
          dark
          color="blue"
          @click="save"
          style="margin-right: 10px;"
        >
          Salvar
        </v-btn>
        <v-btn small icon @click="getPDF()">
          <v-icon>mdi-download</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-account</v-icon>
        </v-btn>
      </div>
      <template v-if="bar" v-slot:extension>
        <div id="toolbar" class="d-flex align-center">
          <v-row>
            <ToolBar
              @addPage="addPage"
              @nextPage="nextPage"
              @previousPage="previousPage"
              @addTable="addTableModal"
              @addImage="modalAddImage"
              @contextmenu.prevent="$refs.menu.open"
              @addText="addText('Texto')"
              @addSquare="addSquare"
              @addLine="addLine"
              :currentPage="selectedPage"
              :maxPage="allObjects.length"
            ></ToolBar>
          </v-row>
        </div>
      </template>
    </v-app-bar>
    <v-container style="margin: 0; min-width: 100%; padding: 0">
      <TemplateEditor
        :selected-page="this.selectedPage"
        style="margin-top: 100px"
        ref="template"
        :divideTable="dividir"
        :editTable="editar"
      ></TemplateEditor>
    </v-container>
    <!-- <vue-table-dynamic
      style="width: 1000px"
      id="tabela"
      v-if="vShowTable"
      :params="params"
    ></vue-table-dynamic> -->
    <v-dialog v-model="dataSource" persistent max-width="1000px">
      <v-card min-height="500px">
        <v-card-title class="headline grey lighten-2"
          >Adicionar fonte de dados:</v-card-title
        >
        <v-progress-linear
          indeterminate
          :active="loadingSourceData"
        ></v-progress-linear>
        <v-card-text>
          <div class="my-12">
            <v-row>
              <v-col class="my-auto">
                <p class="font-weight-medium">Escolher Fonte de Dados:</p>
                <v-select
                  class="mr-12"
                  :items="sourceList"
                  v-model="dataSourceFont"
                ></v-select>
              </v-col>
              <v-col>
                <p class="font-weight-medium">Código: {{ dataSourceError }}</p>
                <v-text-field
                  class="mt-4"
                  v-model="dataSourceCode"
                ></v-text-field>
              </v-col>
            </v-row>
          </div>
        </v-card-text>
        <v-footer absolute>
          <v-spacer></v-spacer>
          <v-btn class="ma-2" @click="getData()">Confirmar</v-btn>
          <v-btn class="ma-2" @click="dataSourceCancelButton()">Cancelar</v-btn>
        </v-footer>
      </v-card>
    </v-dialog>
    <v-row justify="center">
      <v-dialog
        v-model="dialogPdf"
        fullscreen
        hide-overlay
        transition="dialog-bottom-transition"
      >
        <v-app-bar dark fixed>
          <v-btn icon dark @click="closeReportDialog()">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>Visualizar relatório</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn small class="mr-4" text icon @click="getPDF()">
              <v-icon>mdi-download</v-icon>
            </v-btn>
          </v-toolbar-items>
        </v-app-bar>
        <v-card color="#fafafa">
          <ReportViewer
            style="margin-top: 70px"
            :reportMode="true"
            :objects="this.allObjects"
          ></ReportViewer>
        </v-card>
      </v-dialog>
    </v-row>
  </v-container>
</template>

<script>
import Vue from "vue";
import TemplateEditor from "../components/TemplateEditor.vue";
import ReportViewer from "../components/ReportViewer.vue";
import PdfService from "../services/PdfService";
import ToolBar from "../components/ToolBar.vue";
import VueTableDynamic from "vue-table-dynamic";
//import html2canvas from "html2canvas";
import { eventBus } from "../main";
import HTTP from "../services/HttpService";
import { mapGetters, mapMutations, mapActions } from "vuex";
import Konva from "konva";

export default Vue.extend({
  name: "AppBar",
  components: {
    ToolBar,
    TemplateEditor,
    ReportViewer,
    VueTableDynamic
  },
  computed: {
    ...mapGetters([
      "allObjects",
      "selectedPage",
      "analysis",
      "getId",
      "getTitle",
      "stage",
      "layer"
    ])
  },
  data: () => ({
    // objects: [],
    //selectedPage: 0,
    select: null,
    bar: true,
    dataSource: false,
    loadingSourceData: false,
    dataSourceFont: 'Código da Família',
    dataSourceError: "",
    dataSourceCode: "",
    sourceList: ['Código da Família', 'Número de análise'],
    arquivoList: ["Novo", "Salvar", "Exportar para PDF"],
    imageDialog: false,
    exibirList: ["Tela cheia"],
    tableDialog: false,
    insertList: ["Fonte de dados"],
    params: {
      data: [],
      stripe: true,
      border: true,
      header: "column"
    },
    dialogPdf: false,
    isTransposed: false,
    imgData: [],
    viewDocLabel: "Visualizar",
    iconLabel: "mdi-eye-outline",
    imgDataName: [],
    tempImgData: [],
    viewDoc: false,
    search: null,
    showTable: false,
    printView: false,
    availableData: new Map(),
    vShowTableNavigation: false,
    vShowTable: false,
    switchTranspose: false,
    switch2: false,
    tableSliceLine: null,
    tableId: null,
    tableEditing: false,
    tableEditPositionX: null,
    tableEditPositionY: null,
    editNameDialog: false,
    editName: ""
  }),
  watch: {
    search(val) {
      if (!val) {
        this.getImages();
      } else {
        this.tempImgData = this.imgData.filter(img => img.name.includes(val));
      }
    }
  },
  methods: {
    ...mapMutations(["addObject", "addElement", "addAnalyse", "setTitle"]),
    ...mapActions(["addPage", "nextPage", "previousPage"]),

    addElementTable(group){
      var ss = this;
      var groupMousedown = function(){
        ss.tableId = this.id();
      }
      var datap = this.params.data;
      var colors = datap;
      this.addElement({
          type: "TABLE",
          item: group,
          data: colors,
          mousedown: groupMousedown,
          transposed: this.isTransposed,
      });
    },

    async teste(){
      console.log('funcao teste');
      var stage = this.stage;
      var name = 'TABLE' + Math.random() * 1561564;
      console.log(name);
      var group = {
        x: this.tableEditPositionX == null ? 0 : this.tableEditPositionX,
        y: this.tableEditPositionY == null ? 500 : this.tableEditPositionY,
        draggable: true,
        dragBoundFunc: this.dragFunction,
        name: name,
      }
      await this.addElementTable(group);

      var node = stage.findOne('.' + name);
      console.log('NODE', node);
      var box = Konva.Text({
          x: 0,
          y: 300,
          width: 100,
          height: 20,//text.height(),
          fill: '#f0f5f5',
      })
      node.children.push(box);

      // var stageChildremSize = stage.children.length;
      // for(var i = 0; i < stageChildremSize; i++){
      //   var layer = stage.children[i];
      //   var layerChildremSize = layer.children.length;
      //   console.log(layer);
      //   for(var j = 0; j < layerChildremSize; j++)
      //   {
      //     if(i > 0)console.log(layer.children[j]);
      //   }
      // }
    },


    teste1(){
     var stage = this.stage;
     var layer = this.layer;
     var name = 'TABLE' + Math.random() * 1561564;
     console.log('name', name);
      var group = {
        x: this.tableEditPositionX == null ? 0 : this.tableEditPositionX,
        y: this.tableEditPositionY == null ? 500 : this.tableEditPositionY,
        draggable: true,
        dragBoundFunc: this.dragFunction,
        id: 'TABLE' + Math.random() * 1561564
      }
      var children = [];
      var datap = this.params.data;
      console.log(datap)
      console.log(datap[0].length);
      var colors = datap;
      var initialPosX = 30;
      var initialPosY = 18;
      var x = initialPosX;
      var y = initialPosY;
      var txtHeight;
      var konvaRectSize = 739/colors[0].length;

      for(var j = 0; j < colors.length; j++)
      {
      //  var groupItens = new Konva.Group();
      //  groupItens.name = j;//`${j}`
        var child = {
          name: j,  //mudar para idx
          list: [],
          mousedown: ''
        };
        var list = colors[j]
        for (var i = 0; i < list.length; i++) {
          var text = {
            x: x += konvaRectSize,
            y: y,
            width: konvaRectSize,
            height: 30,
            text: colors[j][i],
            fontSize: 12,
            padding: 10,
            align: 'center'
          };
          // if(this.switch2 && j == 0)text.fontStyle('bold');
          // else if(this.switch2 == false && i == 0)text.fontStyle('bold');
          txtHeight = 20//= text.height();
          var box = {
            x: x,
            y: y,
            width: konvaRectSize,
            height: 20,//text.height(),
            fill: j%2 == 0 ? '#f0f5f5' : '#ffffff',
            stroke: 'black',
            strokeWidth: 0
          };
          // groupItens.add(box);
          // groupItens.add(text);
          child.list.push(box);
          child.list.push(text);
        }
        const s = this;
        // groupItens.on('mousedown', function(){
        //   console.log('mousedown', this.name);
        //   s.tableSliceLine = this.name;
        // });
        child.mousedown = function(){
          console.log('mousedown', this.name);
          s.tableSliceLine = this.name;
        };
        //group.add(groupItens);
        children.push(child);
        x = initialPosX;
        y += txtHeight;
      }
      var ss = this;
      // group.on('mousedown', function(){
      //   console.log(this.id());
      //   ss.tableId = this.id();
      // });
      var groupMousedown = function(){
        ss.tableId = this.id();
      }
      if(this.tableEditing)
      {
        var idx;
        var obj = this.allObjects[0];
        for(var k = 0; k < obj.length; k++)
        {
          var item = obj[k];
          if(item.type === 'TABLE'){
            console.log('id: ', item.item.id())  //mudar isso
            if(this.tableId !== item.item.id())continue;
            idx = k;
            break;
          }
        }
        layer.add(group);
      //  stage.add(layer);
        this.allObjects[0][idx] = {
          type: "TABLE",
          item: group,
          data: colors,
        //  layer: layer,
          transposed: this.isTransposed
        }
        var len = stage.children.length;
        var removeThis = null;
        console.log('antes de td')
        for(k = 0; k < len; k++)
        {
          if(stage.children[k] instanceof Konva.Layer)
          {
            console.log('instance de layer')
            var lay = stage.children[k].children;
            var l = lay.length;
            for(var ks = 0; ks < l; ks++)
            {
              if(lay[ks] instanceof Konva.Group)
              {
                console.log('instance de group')
                console.log(lay[ks]);
                var gp = lay[ks];
                console.log(gp.id());
                if(gp.id() === this.tableId)
                {
                  //remover layer
                //  removeThis = k;
                  gp.remove();
                //  console.log('no q eu quero destruir', gp.id());
                //  console.log('id', removeThis);
                  break;
                }
              }
            }
            if(removeThis != null)break;
          }
        }
      //  if(removeThis != null)stage.children[removeThis].remove();  //to removendo o layer inteiro
        layer.draw();
      }
      else{
        // layer.add(group)
        // layer.draw();
      //  stage.add(layer)
        console.log('dentro do else')
        this.addElement({
          type: "TABLE",
          item: {
            x: this.tableEditPositionX == null ? 0 : this.tableEditPositionX,
            y: this.tableEditPositionY == null ? 500 : this.tableEditPositionY,
            draggable: true,
            dragBoundFunc: this.dragFunction,
            name: name //name-id
          },
          data: colors,
          mousedown: groupMousedown,
          transposed: this.isTransposed,
        });
      }

      len = stage.children.length;
      var node;
      for(k = 0; k < len; k++){
        console.log('nome atual', name)
        var stagecl = stage.children[k];
        console.log(stagecl);
        var len2 = stagecl.children.length
        for(i = 0; i < len2; i++)
        {
        //  console.log('no', l.children[i]);
          if(stagecl.children[i] instanceof Konva.Group)
          {
            console.log('idx', i)
            console.log('É GRUPO')
            console.log(stagecl.children[i])
          }
          if(stagecl.children[i].name() == name)
          {
            console.log('achei');
            node = stagecl.children[i];
          }
        }
      }

      console.log(node);
      this.closeTableDialog();
    },

    dividir(){
      if(this.tableSliceLine == null){
        console.log('tableSliceLine == null');
        return;
      }
      var idx = parseInt(this.tableSliceLine, 10);
      console.log('indice', this.tableSliceLine)
      var obj = this.allObjects[0];   //USAR SELECTED PAGE
      console.log(obj);
    //  var stage = this.stage;
      var layer = this.layer;
      for(var i = 0; i < obj.length; i++)
      {
        var item = obj[i];
        if(item.type === 'TABLE'){
          console.log('id: ', item.item.id());
          if(this.tableId !== item.item.id())continue;
          console.log('is table')
          var group = new Konva.Group({
            x: 0,
            y: 500,
            draggable: true,
            dragBoundFunc: this.dragFunction,
            id: 'TABLE' + Math.random() * 1561564
          });
          var ss = this;
          group.on('mousedown', function(){
            console.log(this.id());
            ss.tableId = this.id();
          });
          var child = item.item;
        //  console.log(child.children);
        //  group.add(child.children[2]);
        //  child.children[2].remove();
        //  group.add(child.children[1]);
        //  child.children[1].remove();

          var list1 = []
          var list2 = []
          // list1.push(item.data[0]);
          // list2.push(item.data[1]);
          // list2.push(item.data[2]);
          //var indiceName = 0;
          console.log('idx', idx)
          var indiceName = 0;
          var len = child.children.length;
          console.log('tamanho da lista inteira', len);
          for(var j = idx; j < len; j++)
          {
            console.log(j)
              child.children[idx].name = indiceName;
              group.add(child.children[idx]);
              list2.push(item.data[j]);
              indiceName++;
          }
          // for(var j = child.children.length - 1; j >= idx; j--){
          //   child.children[j].name = j - idx;
          //   group.add(child.children[j]);
          //   list2.push(item.data[j]);
          // }
        //  group.draw();
          for(j = 0; j < idx; j++)
          {
            list1.push(item.data[j]);
          }
          item.data = list1;
          this.addElement({
            type: "TABLE",
            item: group,
            data: list2,
            // layer: layer,
            transposed: item.transposed,
          });
          layer.add(group)
        //  stage.add(layer)
          layer.draw();
        //  item.layer.draw();
          break;
        }
      }
    },
    editar(){
      var obj = this.allObjects[0];   //OBJETOS DA PAGINA 0
      for(var i = 0; i < obj.length; i++)
      {
        var item = obj[i];
        if(item.type === 'TABLE')
        {
          console.log('id: ', item.item.id())
          if(this.tableId !== item.item.id())continue;
          this.tableEditing = true;
          console.log('position: ', 'x ',item.item.x(), 'y ', item.item.y());
          this.tableEditPositionX = item.item.x();
          this.tableEditPositionY = item.item.y();
        //  this.params.data = item.data;
        //  console.log('params', this.params.data);
          this.isTransposed = item.transposed;
          this.addTableModal();
          console.log(' ITEM DATA ', item.data);
          var len = item.data.length;
          console.log(len);
          for(var j = 0; j < len; j++)
          {
            console.log(item.data[j][0]);
            // console.log(this.params.data[j][0]);
            this.checkTransposed(true, item.data[j][0]);

          }
        //  this.showTable = true;

        }
      }
    },
    openEditTitleDialog() {
      this.editName = this.getTitle;
      this.editNameDialog = true;
    },
    closeEditTitleDialog() {
      this.editNameDialog = false;
    },
    updateTitle() {
      let id = this.getId;
      HTTP.patch(`Catalogos/${id}`,  [{ "op": "replace", "path": "/Nome", "value": this.editName }]).then(() => {
        this.setTitle(this.editName);
        this.editNameDialog = false;
      });
    },
    dragFunction(pos) {
      return {
        x: Math.round(pos.x / 10) * 10,
        y: Math.round(pos.y / 10) * 10
      };
    },
    addText(txt) {
      this.addElement({
        type: "TEXT",
        item: {
          text: txt != "[object MouseEvent]" ? txt : "Texto",
          x: 270,
          y: 80,
          width: 250,
          height: 20,
          fill: "#000000",
          name: "text" + Math.random() * 1561564,
          fontSize: 14,
          fontStyle: "normal",
          draggable: true,
          dragBoundFunc: this.dragFunction
        }
      });
    },
    addSquare() {
      this.addElement({
        type: "RECT",
        item: {
          x: 10,
          y: 10,
          width: 100,
          height: 100,
          fill: "#7E7E7E",
          name: "rect" + Math.random() * 1561564,
          draggable: true,
          dragBoundFunc: this.dragFunction
        }
      });
    },
    addLine() {
      this.addElement({
        type: "LINE",
        item: {
          points: [250, 70, 250, 23],
          stroke: "#DCDCDC",
          strokeWidth: 2,
          name: "line" + Math.random() * 1561564
        }
      });
    },
    getImages() {
      this.imgData = [];
      HTTP.get("http://localhost:64285/api/Imagens/").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          const imgName = response.data[i].Nome;
          HTTP.get(
            "http://localhost:64285/api/Imagens/" +
              response.data[i].Id +
              "/file",
            {
              responseType: "blob"
            }
          ).then(response => {
            const image = new window.Image();
            image.src = URL.createObjectURL(response.data);
            this.imgData.push({
              name: imgName,
              src: image.src
            });
            this.imgDataName.push(imgName);
          });
        }
      });

      this.tempImgData = this.imgData;
    },
    addImage(event, img) {
      const image = new window.Image();
      let imgName = "";
      let file = "";
      if (img) {
        image.src = img.src;
      } else {
        file = event.target.files[0];
        imgName = file.name;
        image.src = URL.createObjectURL(file);
      }
      image.onload = () => {
        // set image only when it is loaded
        this.addElement({
          type: "IMAGE",
          item: {
            x: 200,
            y: 50,
            image: image,
            name: imgName || img.name,
            width: image.width || 250,
            height: image.height || 100,
            draggable: true,
            dragBoundFunc: this.dragFunction,
            type: "image"
          }
        });
      };

      if (file) {
        let fd = new FormData();
        fd.append("image", file);

        HTTP.post("http://localhost:64285/api/Imagens", fd).then(response =>
          console.log(response)
        );
      }
      this.closeImageDialog();
    },
    addTableElementAsImage(img, w, h) {
      const image = new window.Image();
      image.src = img;
      image.onload = () => {
        // set image only when it is loaded
        this.addElement({
          type: "IMAGE",
          item: {
            x: 200,
            y: 50,
            image: image,
            name: "table" + Math.random() * 1561564,
            width: w,
            height: h,
            draggable: true,
            dragBoundFunc: this.dragFunction,
            type: "image"
          }
        });
      };
    },
    getPDF() {
      let a = new PdfService();
      a.createPDF(this.allObjects);
    },
    viewPdf() {
      this.viewDoc ^= true;
      this.bar = !this.viewDoc;
      this.viewDocLabel = this.viewDoc ? "Editar" : "Visualizar";
      this.iconLabel = this.viewDoc ? "mdi-pencil" : "mdi-eye-outline";
      eventBus.$emit("viewPdf", this.viewDoc);
    },
    openReportDialog() {
      this.dialogPdf = true;
      eventBus.$emit("viewPdf", this.dialogPdf);
    },
    closeReportDialog() {
      this.dialogPdf = false;
      eventBus.$emit("viewPdf", this.dialogPdf);
    },
    exibirChange(index) {
      console.log("Exibir idx = " + index);
    },
    inserirChange(index) {
      if (this.insertList[index] === "Fonte de dados") {
        this.dataSource = true;
      }
    },
    modalAddImage() {
      this.imageDialog = true;
      this.getImages();
    },
    addTableModal(){
      this.tableDialog = true;
      if(this.analysis != null > 0)
      {
        this.createTable();
      }
    },
    createTable() {       //marcar os objetos no map que ja tiverem na tabela de EDIT
      var data = this.analysis;
      var arr = Object.entries(data[0]);
      for (var i = 1; i < data.length; i++) {
        var j = Object.entries(data[i]);
        for (var k = 0; k < j.length; k++) {
          arr[k].push(j[k][1]);
        }
      }
      for (var idx = 0; idx < arr.length; idx++) {
        this.availableData.set(
          arr[idx][0],
          {
            data: arr[idx],
            value: false,
          });
      }
      console.log(this.availableData);
      this.vShowTableNavigation = true;
    },
    checkTransposed(isChecked, item) {
    //  console.log('aqui', isChecked, item);
      if (this.isTransposed) {
        if (this.params.data.length === 0) {
          this.onSelect(isChecked, item);
          this.transpose(true);
        } else {
          this.transpose(false);
          this.onSelect(isChecked, item);
          if (this.params.data.length != 0) {
            this.transpose(true);
          }
        }
      } else {
        this.onSelect(isChecked, item);
      }
    },
    onSelect(isChecked, item){
      if (isChecked) {
        this.params.data.push(this.availableData.get(item).data);  //retorna a linha da tabela
        this.availableData.get(item).value = true;
        this.showTable = true;
      } else {
        if (this.params.data.length === 1) {
          this.params.data = [];
          this.showTable = false;
        } else {
          var arr1, arr2;
          for (var i = 0; i < this.params.data.length; i++) {
            if (this.params.data[i][0] === item) {
              arr1 = this.params.data.slice(i + 1); //checar indice 0
              arr2 = this.params.data.slice(0, i);
              break;
            }
          }
          this.params.data = arr1.concat(arr2);
        }
        this.availableData.get(item).value = false;
      }
    },
    closeTableDialog() {
      this.params.header = "column";
      this.vShowTableNavigation = false;
      this.vShowTable = false;
      this.tableDialog = false;
      this.params.data = [];
      this.isTransposed = false;
      this.showTable = false;
      this.availableData = new Map();
      this.switchTranspose = false;
      this.switch2 = false;
      this.tableEditPositionX = null,
      this.tableEditPositionY = null,
      this.tableEditing = false
    },
    closeImageDialog() {
      this.imageDialog = false;
    },
    arquivoClicked(item) {
      switch (item) {
        case "Exportar para PDF":
          this.getPDF();
          break;
        default:
          break;
      }
    },
    transpose(event){
      this.isTransposed = event
      if(this.params.data == null)return
      var matrix = this.params.data
      var arr = []
      for(var i = 0; i < matrix[0].length; i++)
      {
        var list = []
        for(var j = 0; j < matrix.length; j++)
        {
      //    console.log(matrix[j][i])
          list.push(matrix[j][i]);
          //  console.log(arr)
        }
        arr.push(list);
      }
      //  console.log(arr)
      this.params.data = arr;
    },
    showTableAsync() {
      return (this.vShowTable = true);
    },
    // async addTable() {        //COLOCAR AQUI para criar tabela com params.data
    //   window.scrollTo(0, 0);
    //   await this.showTableAsync();
    //   this.printTable();
    //   this.closeTableDialog();
    // },
    tableChangeHighlight(event) {
      this.params.header = event == true ? "row" : "column";
    },
    // printTable() {
    //   html2canvas(document.querySelector("#tabela")).then(canvas => {
    //     //    console.log(canvas.toDataURL("image/png"))
    //     var image = canvas.toDataURL("image/png");
    //     //    console.log(canvas)
    //     //    console.log(canvas.width)
    //     //    console.log(canvas.height)
    //     this.addTableElementAsImage(
    //       image,
    //       canvas.width * 0.75,
    //       canvas.height * 0.75
    //     );
    //   });
    // },
    dataSourceCancelButton() {
      this.dataSource = false;
      this.dataSourceFont = "Código da Família";
      this.dataSourceCode = "";
    },
    checkDataSource(dataSrc, type) {
      if (dataSrc[0] != null) {
        this.addAnalyse(dataSrc);
      //  var id = this.getId;
      //  var link = `catalogos/${id}`;
        var link = "catalogos/1";
        var value = "{" + '"' + type + '":' + '"' + this.dataSourceCode + '"' + "}";
        //console.log(value, link);
        HTTP.patch(link,
          [
            { "op": "replace", "path": "/JsonFonteDados", "value": value},
          ]
        );
        this.dataSourceCancelButton();
      } else {
        this.dataSourceError = "Não encontrado";
        setTimeout(
          function() {
            this.dataSourceError = "";
          }.bind(this),
          3000
        );
      }
    },
    getData() {
      this.dataSourceError = "";
      this.loadingSourceData = true;
      var link = "";
      if (this.dataSourceFont === this.sourceList[0]) {
        link = "Analises?codigoFamilia=" + this.dataSourceCode;
        HTTP.get(link).then(response => {
          var type = "codigoFamilia";
          this.checkDataSource(response.data, type); //CHECKDATASRC
          this.loadingSourceData = false;
        });
      } else {
        link = "Analises?numeroAnalise=" + this.dataSourceCode;
        HTTP.get(link).then(response => {
          var type = "numeroAnalise";
          this.checkDataSource(response.data, type);
          this.loadingSourceData = false;
        });
      }
    },
    save() {
      let id = this.getId;
      let json = JSON.stringify(this.allObjects);
      HTTP.get(`Catalogos/${id}`).then(response => {
        let objectToSave = response.data;
        objectToSave.JsonCanvas = json;
        HTTP.put(`Catalogos/${id}`, objectToSave).then(resp => {
          console.log(resp);
        });
      });
    }
  },
  // mounted(){
  //   let currentShape;
  //   var menuNode = document.getElementById('tableMenu');
  //   document.getElementById('slice-button').addEventListener('click', () => {
  //     console.log('slice', currentShape);
  //   });

  //   document.getElementById('edit-button').addEventListener('click', () => {
  //     console.log('edit', currentShape);
  //   });

  //   window.addEventListener('click', () => {
  //     menuNode.style.display = 'none';
  //   });
  //   var stage = this.stage;
  //   stage.on('contextmenu', function(e) {
  //     // prevent default behavior
  //     e.evt.preventDefault();
  //     if (e.target === stage) {
  //       // if we are on empty place of the stage we will do nothing
  //       return;
  //     }
  //     currentShape = e.target;
  //     console.log('atual', currentShape);
  //     // show menu
  //     menuNode.style.display = 'initial';
  //     var containerRect = stage.container().getBoundingClientRect();
  //     menuNode.style.top = containerRect.top + stage.getPointerPosition().y + 4 +'px';
  //     menuNode.style.left = containerRect.left + stage.getPointerPosition().x + 4 + 'px';
  //   });
  // }
});
</script>

<style></style>