<template>
  <div>
    <base-alert 
      v-show="alert.type" 
      :apperance="alert.type" 
      @close="alert = {}"
    >
      <span v-html="alert.message"></span>
    </base-alert>

    <base-modal 
      v-if="showDeleteModal" 
      title="Deseja realmente excluir a agenda?" 
      size="medium"
      @close="handleCloseDelete"
    >
      <div class="padding-medium text-center">
        Ao excluir essa agenda, seus horários e configurações serão permanentemente apagados.
        <div class="top-margin-large flex gap-2 center-xs">
          <base-button 
            apperance="success" 
            square 
            size="medium" 
            @click.native="handleConfirmDelete"
          >
            Confirmar
          </base-button>
          <base-button 
            apperance="error" 
            square 
            size="medium" 
            @click.native="handleCloseDelete"
          >
            Cancelar
          </base-button>
        </div>
      </div>
    </base-modal>
  </div>
</template>

<script>
import store from "@components/Schedule/storeSchedule.js";
import formMixin from "@mixins/formMixin";
import axiosApi, {param} from "@assets/js/axios-api";

const BASE_URL = document.getElementById('base-urls').dataset.baseUrlLoja;
const token = document.body.getAttribute('data-token');

export default {
  name: 'ScheduleDelete',
  components: {
  BaseAlert: () => import(/* webpackChunkName: "BaseAlert" */ '@elements/BaseAlert/index.vue'),
  BaseModal: () => import(/* webpackChunkName: "BaseModal" */ "@components/BaseModal/index.vue"),
  BaseButton: () => import(/* webpackChunkName: "Basebutton" */ '@elements/BaseButton/index.vue'),
  ScheduleEdit: () => import(/* webpackChunkName: "ScheduleEdit" */ '@components/Schedule/ScheduleEdit/index.vue'),
  },
  props: {
    scheduleID: {
    type: String | Number,
    },  
    showDeleteModal: {
      type: Boolean,
      default: false
    }  
  },
  data() {
    return {
      alert: {},
    };
  },
  methods: {
    async handleConfirmDelete() {
      await axiosApi({
        method: 'POST',
        url: BASE_URL + 'admin/index.php?route=sale/schedule/deleteScheduleHasNotOrder&token=' + token,
        data: param({schedule_id: this.scheduleID}),
      })
        .then(({ data }) => {
          this.alert = {
            type: data.type,
            message: data.message,
          };

          if (data.type == 'success') {
            store.dispatch('getIdToDeleteSchedule', this.scheduleID)
            setTimeout(() => this.handleCloseDelete(), 3000);
          }  

        })
        .catch((err) => {
          console.error(err);
          this.alert = {
            type: 'warning',
            message: 'Não foi possível deletar a agenda!',
          };
        })
    },
    handleCloseDelete() {
      this.$emit('callbackDeleteModal', false);
    },
  },
}
</script>