<template>
    <div>
      <base-header class="pb-6">
        <div class="row align-items-center py-4">
          <div class="col-lg-6 col-7">
            <h6 class="h2 text-white d-inline-block mb-0">{{$route.name}}</h6>
            <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
              <route-breadcrumb/>
            </nav>
          </div>

        </div>
      </base-header>

      <div class="container-fluid mt--6">
        <div class="row">
          <div class="col">

            <div class="card">
              <div class="border-0 card-header">
                  <div class="d-flex justify-content-between">
                    <h3 class="mb-0">Listas</h3>
                    <base-button tag="a" size="sm" outline type="celcompink" href="/contactos/nueva-lista"><i class="fas fa-plus"></i> Nueva Lista</base-button>
                  </div>

                  <h4 v-show="tabContact" class="mb-0">Detalle lista "{{ listaNombre }}" </h4>

              </div>

              <div>
                <div class="col-12 d-flex justify-content-between mb-4">
                  <el-select
                    class="select-primary pagination-select"
                    v-model="pagination.perPage"
                    placeholder="Per page"
                  >
                    <el-option
                      class="select-primary"
                      v-for="item in pagination.perPageOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>

                  <div v-show="tabContact">
                    <el-tooltip content="Agregar Contacto" placement="left">
                      <a href="#!" @click.prevent="abrirAgregar(contactSingle)" class="text-success" data-toggle="tooltip" data-original-title="Ver Lista">
                        <i class="fas fa-user-plus"></i>
                      </a>
                    </el-tooltip>
                  </div>
                </div>
              </div>

              <div class="col-12" v-show="!tabContact">
                <el-table class="table-responsive table-flush"
                        header-row-class-name="thead-light"
                        :data="queriedData">
                  <el-table-column label="Nombre"
                                   prop="name"
                                   min-width="200px"
                                   sortable>
                      <template v-slot="{row}">
                          <div class="media align-items-center">
                              <div class="media-body">
                                  <span class="font-weight-600 mb-0 text-sm">{{row.name}}</span>
                              </div>
                          </div>
                      </template>
                  </el-table-column>
                  <el-table-column label="Fecha Creación"
                                   prop="created"
                                   min-width="200px"
                                   sortable>
                  </el-table-column>

                  <el-table-column label="Estado"
                                   prop="active"
                                   min-width="150px"
                                   sortable>
                      <template v-slot="{row}">
                          <badge class="mr-4" :type="(row.active==true) ? 'success' : 'danger'">
                              <span class="status">{{ (row.active==true) ? "Activo" : "Inactivo" }}</span>
                          </badge>
                      </template>
                  </el-table-column>
                  <el-table-column label="Acción" min-width="150px">
                      <div slot-scope="{row}" class="table-actions">
                        <el-tooltip content="Ver Lista" placement="top">
                          <a href="#!" @click.prevent="onShowList(row)" class="table-action" data-toggle="tooltip" data-original-title="Ver Lista">
                            <i class="fas fa-eye"></i>
                          </a>
                        </el-tooltip>
                        <el-tooltip content="Editar" placement="top">
                          <a href="#!" @click.prevent="onEditContactGroup(row)" class="table-action table-action-edit" data-toggle="tooltip" data-original-title="Editar lista">
                            <i class="fas fa-edit"></i>
                          </a>
                        </el-tooltip>
                        <el-tooltip content="Eliminar" placement="top">
                          <a href="#!" @click.prevent="onDeleteContactGroup(row)" class="table-action table-action-delete" data-toggle="tooltip"
                            data-original-title="Eliminar Lista">
                            <i class="fas fa-trash"></i>
                          </a>
                        </el-tooltip>
                      </div>
                    </el-table-column>
                </el-table>
              </div>

              <div class="col-12" v-show="tabContact">

                <el-table class="table-responsive table-flush"
                        header-row-class-name="thead-light"
                        :data="queriedData">

                  <el-table-column label="Código de área"
                                   prop="phoneCode"
                                   min-width="200px"
                                   sortable>
                  </el-table-column>

                  <el-table-column label="Teléfono"
                                   prop="phone"
                                   min-width="250px"
                                   sortable>
                  </el-table-column>


                  <el-table-column label="Estado"
                                   prop="status"
                                   min-width="150px">
                                   <template v-slot="{row}">
                                      <badge class="mr-4" :type="(row.status==true) ? 'success' : 'danger'">
                                          <span class="status">{{ (row.status==true) ? "Activo" : "Inactivo" }}</span>
                                      </badge>
                                  </template>
                  </el-table-column>

                  <el-table-column label="Acción" min-width="150px">
                      <div slot-scope="{row}" class="table-actions">
                        <el-tooltip content="Editar" placement="top">
                          <a href="#!" @click.prevent="onEditContact(row)" class="table-action table-action-edit" data-toggle="tooltip" data-original-title="Editar lista">
                            <i class="fas fa-edit"></i>
                          </a>
                        </el-tooltip>
                        <el-tooltip content="Eliminar" placement="top">
                          <a href="#!" @click.prevent="onDeleteContact(row)" class="table-action table-action-delete" data-toggle="tooltip"
                            data-original-title="Eliminar Lista">
                            <i class="fas fa-trash"></i>
                          </a>
                        </el-tooltip>
                      </div>
                    </el-table-column>
                </el-table>

              </div>

              <div
                slot="footer"
                class="col-12 mt-4 d-flex justify-content-center justify-content-sm-between flex-wrap"
              >
                  <div class="">
                    <small class="card-category">
                      Mostrando {{ from + 1 }} a {{ to }} de {{ total }} entradas

                      <span v-if="selectedRows.length">
                        &nbsp; &nbsp; {{selectedRows.length}} rows selected
                      </span>
                    </small>

                  </div>
                  <base-pagination
                    class="pagination-no-border"
                    v-model="pagination.currentPage"
                    :per-page="pagination.perPage"
                    :total="total"
                  >
                  </base-pagination>
              </div>
            </div>

          </div>
        </div>

        <div class="row">

          <modal :show.sync="modals.formSingle"
                  modal-classes="modal-secondary text-default"
                  modal-content-classes="bg-gradient-secondary">
            <h6 slot="header" class="modal-title text-default">Editar número contacto</h6>
            <form role="form">
              <div class="row">
                <base-input alternative
                          v-model="contactSingle.phoneCode"
                          class="mb-3 col-md-6"
                          placeholder="Código"
                          prepend-icon="ni ni-world">
                </base-input>
                <base-input alternative
                            v-model="contactSingle.phone"
                            class="mb-3 col-md-6"
                            placeholder="Teléfono"
                            prepend-icon="ni ni-email-83">
                </base-input>
              </div>

              <div class="d-flex justify-content-between my-4">
                <base-button type="celcompink"
                              @click="guardarEdicion(contactSingle)">
                    Guardar
                </base-button>
                <base-button outline
                              type="celcompink"
                              @click="modals.formSingle = false">
                    Cerrar
                </base-button>
              </div>
            </form>

          </modal>

          <modal :show.sync="modals.formGroup"
                  modal-classes="modal-secondary text-default"
                  modal-content-classes="bg-gradient-secondary">
            <h6 slot="header" class="modal-title text-default">Editar nombre lista</h6>
            <form role="form">
              <base-input alternative
                          v-model="contactGroup.name"
                          class="mb-3"
                          placeholder="Nombre"
                          prepend-icon="ni ni-badge">
              </base-input>

              <div class="d-flex justify-content-between my-4">
                <base-button type="celcompink"
                              @click="guardarEdicionGroup(contactGroup)">
                    Guardar
                </base-button>
                <base-button outline
                              type="celcompink"
                              @click="salirSinCambios(contactGroup)">
                    Cerrar
                </base-button>
              </div>
            </form>

          </modal>

          <modal :show.sync="modals.advertenciaSingle"
              gradient="danger"
              modal-classes="modal-danger modal-dialog-centered">
            <h6 slot="header" class="modal-title" id="modal-title-notification">Borrar contacto</h6>

            <div class="text-center">
                <i class="fas fa-exclamation-circle ni-3x mb-3"></i>
                <p class="mb-0">Estás a punto de eliminar este contacto.</p>
                <span>{{ contactSingle.phoneCode }} {{ contactSingle.phone }}</span>
            </div>

            <template slot="footer">
                <base-button type="white text-danger"
                              @click="borrarContacto(contactSingle)">
                    Borrar
                </base-button>
                <base-button type="link"
                              class="ml-auto text-white"
                              @click="modals.advertenciaSingle = false">
                    Cerrar
                </base-button>
            </template>
          </modal>

          <modal :show.sync="modals.advertenciaGroup"
                gradient="danger"
                modal-classes="modal-danger modal-dialog-centered">
              <h6 slot="header" class="modal-title" id="modal-title-notification">Borrar lista</h6>

              <div class="text-center">
                  <i class="fas fa-exclamation-circle ni-3x mb-3"></i>
                  <p class="mb-0">Estás a punto de eliminar esta lista.</p>
                  <span>{{ contactGroup.name }}</span>
              </div>

              <template slot="footer">
                  <base-button type="white text-danger"
                               @click="borrarContactoGroup(contactGroup)">
                      Borrar
                  </base-button>
                  <base-button type="link"
                               class="ml-auto text-white"
                               @click="modals.advertenciaGroup = false">
                      Cerrar
                  </base-button>
              </template>
          </modal>

          <modal :show.sync="modals.agregarContacto"
                  modal-classes="modal-secondary text-default"
                  modal-content-classes="bg-gradient-secondary">
            <h6 slot="header" class="modal-title text-default">Agregar número contacto</h6>
            <form role="form">
              <div class="row">
                <base-input alternative
                            v-model="contactSingle.phoneCode"
                            class="mb-3 col-md-6"
                            placeholder="Código"
                            prepend-icon="ni ni-world">
                </base-input>
                <base-input alternative
                            v-model="contactSingle.phone"
                            class="mb-3 col-md-6"
                            placeholder="Teléfono"
                            prepend-icon="ni ni-email-83">
                </base-input>
              </div>

              <div class="d-flex justify-content-between my-4">
                <base-button type="celcompink"
                              @click="guardarNuevo(contactSingle)">
                    Guardar
                </base-button>
                <base-button outline
                              type="celcompink"
                              @click="modals.agregarContacto = false">
                    Cerrar
                </base-button>
              </div>
            </form>

          </modal>

        </div>

      </div>

  </div>
</template>
<script>
  import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown, Select, Option } from 'element-ui'
  import { BasePagination, Modal, Dialog } from '@/components';

  import moment from 'moment';
  import clientPaginationMixin from '@/views/Tables/PaginatedTables/clientPaginationMixin';
  import modContacts from './modContacts'

  import AES256 from 'aes-everywhere';
  import Vue from 'vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  import Config from '@/config/config.js'
  import { getUser, setUser, encryptAES, horaAhora } from '@/util/util.js';

  Vue.use(VueAxios, axios)
  Vue.use(Dialog)

  export default {
    mixins: [clientPaginationMixin],
    components: {
      BasePagination,
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
      [Dropdown.name]: Dropdown,
      [DropdownItem.name]: DropdownItem,
      [DropdownMenu.name]: DropdownMenu,
      [Select.name]: Select,
      [Option.name]: Option,
      Modal,
      Dialog
    },
    data() {
      return {
        currentPage: 1,
        tableData: [],
        listaContactos: [],
        selectedRows: [],
        tabContact: false,
        listaNombre: "",
        contactGroup: {},
        contactSingle: {},
        modals: {
          formSingle: false,
          formGroup: false,
          advertenciaSingle: false,
          advertenciaGroup: false,
          agregarContacto: false
        }
      };
    },
    methods: {
     obtenerLista() {

      this.$loading.show()   //delay default is 300ms

      let self = this;
      let user = getUser();

      let js = {
        "time_expired":horaAhora(),
        "customer":encodeURIComponent(JSON.stringify(user.customer))
      }

      var body = new URLSearchParams(); body.append('TOKEN', (encryptAES(js)));

      Vue.axios.post(Config.url_service+Config.contact_available, body, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      })
        .then(function (response) {
            console.log(response)

            if (response.data.response === "200") {
              console.log(response.data.data);

              self.tableData = response.data.data;

            } else {
              console.log("No se encontró lista");
              alert("No se encontró lista");
            }

            self.$loading.hide()

        })
        .catch(function (error) {
            console.log("No se encontró lista",error);
            alert("No se encontró lista");
            self.$loading.hide();
        });

      },
      onShowList(lista) {

        this.$loading.show()

        let self = this;
        let user = getUser();

        let js = {
          "time_expired":horaAhora(),
          "contact_group":encodeURIComponent(JSON.stringify(lista)),
          "contact_status":"true"
        }

        var body = new URLSearchParams(); body.append('TOKEN', (encryptAES(js)));

        Vue.axios.post(Config.url_service+Config.contact_available_contact, body, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        })

          .then(function (response) {
              console.log(response)

              if (response.data.response === "200") {
                console.log(response.data.data);
                self.tabContact = true;

                self.listaNombre = lista.name;
                self.tableData = response.data.data;

                self.contactGroup = lista;

              } else {
                console.log("No se encontró lista");
                alert("No se encontró lista");
              }

              self.$loading.hide()

          })
          .catch(function (error) {
              console.log("No se encontró lista",error);
              alert("No se encontró lista");
              self.$loading.hide();
          });

      },
      onEditContactGroup(row) {

        let self = this;
        let modals = modals;

        self.contactGroup = row;
        self.modals.formGroup = true;

      },
      onEditContact(row) {

        let self = this;
        let modals = modals;

        self.contactSingle = row;
        self.modals.formSingle = true;

      },
      guardarEdicionGroup(contactGroup) {

        this.$loading.show()

        let self = this;
        let user = getUser();

        let js = {
          "time_expired":horaAhora(),
          "contact_group":encodeURIComponent(JSON.stringify(this.contactGroup)),
          "customer":encodeURIComponent(JSON.stringify(user.customer)),
        }

        var body = new URLSearchParams(); body.append('TOKEN', (encryptAES(js)));

        Vue.axios.post(Config.url_service+Config.contact_edit_contact_group, body, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        })
          .then(function (response) {
              console.log(response)

              if (response.data.response === "200") {
                console.log(response.data.data);

                self.tableData = response.data.data;
                self.modals.formGroup = false;

              } else {
                console.log("No se pudo editar nombre lista");
                alert("No se pudo editar nombre lista");
              }

              self.$loading.hide()

          })

      },
      guardarEdicion(contactSingle) {

        this.$loading.show()

        let self = this;
        let user = getUser();

        let js = {
          "time_expired":horaAhora(),
          "contact_group":encodeURIComponent(JSON.stringify(this.contactGroup)),
          "contact":encodeURIComponent(JSON.stringify(this.contactSingle)),
          "customer":encodeURIComponent(JSON.stringify(user.customer)),
        }

        var body = new URLSearchParams(); body.append('TOKEN', (encryptAES(js)));

        Vue.axios.post(Config.url_service+Config.contact_edit_contact, body, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        })
          .then(function (response) {
              console.log(response)

              if (response.data.response === "200") {
                console.log(response.data.data);

                self.tableData = response.data.data;
                self.modals.formSingle = false;

              } else {
                console.log("No se pudo editar contacto");
                alert("No se pudo editar contacto");
              }

              self.$loading.hide()

          })

      },
      onDeleteContact(row) {

        let self = this;
        let modals = modals;

        self.contactSingle = row;
        self.modals.advertenciaSingle = true;

      },
      onDeleteContactGroup(row) {

        let self = this;
        let modals = modals;

        self.contactGroup = row;
        self.modals.advertenciaGroup = true;

      },
      borrarContacto(contactSingle) {

        this.$loading.show()

        let self = this;
        let user = getUser();

        let js = {
          "time_expired":horaAhora(),
          "contact_group":encodeURIComponent(JSON.stringify(this.contactGroup)),
          "contact":encodeURIComponent(JSON.stringify(this.contactSingle)),
        }

        var body = new URLSearchParams(); body.append('TOKEN', (encryptAES(js)));

        Vue.axios.post(Config.url_service+Config.contact_delete_contact, body, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        })
          .then(function (response) {
              console.log(response)

              if (response.data.response === "200") {
                console.log(response.data.data);

                self.tableData = response.data.data;
                self.modals.advertenciaSingle = false;

              }

          })

          self.$loading.hide()

      },
      borrarContactoGroup(contactGroup) {

        this.$loading.show()

        let self = this;
        let user = getUser();

        let js = {
          "time_expired":horaAhora(),
          "contact_group":encodeURIComponent(JSON.stringify(this.contactGroup)),
          "customer":encodeURIComponent(JSON.stringify(user.customer)),
        }

        var body = new URLSearchParams(); body.append('TOKEN', (encryptAES(js)));

        Vue.axios.post(Config.url_service+Config.contact_delete_contact_group, body, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        })
          .then(function (response) {
              console.log(response)

              if (response.data.response === "200") {
                console.log(response.data.data);

                self.tableData = response.data.data;
                self.modals.advertenciaGroup = false;

              }

          })

          self.$loading.hide()

      },
      abrirAgregar(contactSingle) {

        let self = this;
        let modals = modals;

        self.modals.agregarContacto = true;

      },
      guardarNuevo(contactSingle) {

        this.$loading.show()

        let self = this;
        let user = getUser();

        let nuevoContacto = {
          "phoneCode": this.contactSingle.phoneCode,
          "phone": this.contactSingle.phone,
          "contactGroup": this.contactGroup,
          "field": "usuario1|21|23500||||||||||",
          "status": true,
          "selected": false
        };

        let js = {
          "time_expired":horaAhora(),
          "contact_group":encodeURIComponent(JSON.stringify(this.contactGroup)),
          "contact":encodeURIComponent(JSON.stringify(nuevoContacto)),
          "customer":encodeURIComponent(JSON.stringify(user.customer)),
        }

        var body = new URLSearchParams(); body.append('TOKEN', (encryptAES(js)));

        Vue.axios.post(Config.url_service+Config.contact_add_contact, body, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        })
          .then(function (response) {
              console.log(response)

              if (response.data.response === "200") {
                console.log(response.data.data);

                self.tableData = response.data.data;
                self.modals.agregarContacto = false;

              } else {
                console.log("No se pudo crear contacto");
                alert("No se pudo crear contacto");
              }

              self.$loading.hide()

          })

      },
      fechaFormato(unixTimestam) {
        return moment.unix(unixTimestam).format('YYYY-MM-DD h:mm:ss');
      }
    },
    mounted() {
      this.obtenerLista();
    },
    create() {
      this.$loading.show();
    },
  }
</script>

<style>
.modal-secondary .close > span:not(.sr-only) {
  color: #172b4d;
}
.busy-mask {
  z-index: 1051;
}
</style>