<template>
  <modal
    name="disapprove-selfsignup"
    :scrollable="true"
    width="500px"
    height="auto"
    :header-bg-variant="null"
  >
    <b-row class="d-flex justify-content-between mb-2 mt-1">
      <b-col class="d-flex modal-text-color ml-2" cols="8">
        <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
          <font-awesome-icon icon="portrait" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text"></div>
          <div class="akkurat-bold max-header-text">Marcar registro como não aprovado</div>
        </div>
      </b-col>
      <b-col class="d-flex justify-content-end mr-2 mt-1">
        <span class="close-icon" @click="closeModal">
          <font-awesome-icon icon="times" class="align-self-center" />
        </span>
      </b-col>
    </b-row>

    <div class="custom-body">
      <b-row>
        <b-form-group class="col-md-12 col-sm-12">
          <select-input
            title="Motivo para não aprovar:"
            v-model="getCurrentValue.motive"
            :options="optionsMotive"
          />
          <p v-if="error" class="text-danger text-center">Por favor, selecione uma opção</p>
        </b-form-group>
        <b-col md="12">
          <b-form-textarea
            id="textarea"
            v-model="getCurrentValue.description"
            placeholder="Informações adicionais"
            rows="3"
            max-rows="6"
          ></b-form-textarea>
        </b-col>
      </b-row>

      <b-row>
        <b-col md="12">
          <b-button class="btn shadow-none border-0 btn-danger" @click="closeModal">Cancelar</b-button>

          <b-button class="btn shadow-none border-0 btn-success" 
           :disabled="error == true && getCurrentValue.motive == null"
           @click="save">
           Salvar
           </b-button>
        </b-col>
      </b-row>
    </div>
  </modal>
</template>

<script>
import SelectInput from "@/components/shared-components/inputs/SelectInput.vue";
import SelfSignupModel from "@/models/SelfSignupModel.js";

export default {
  name: "disapprove-modal",
  props: {
    disapproveMotive: {
      default: () => {
        return {
          motive: null,
          description: ""
        };
      }
    }
  },
  model: {
    prop: "disapproveMotive",
    event: "change"
  },
  components: {
    SelectInput
  },
  data: () => {
    return {
      error: false,
      optionsMotive: [
        { value: null, text: "SELECIONE UMA OPÇÃO" },
        { value: "", text: "DISISTÊNICA" },
        { value: "DISISTÊNICA", text: "ENDEREÇO NÃO ENCONTRADO" },
        { value: "FALECEU", text: "FALECEU" },
        { value: "MUDOU DE ENDEREÇO", text: "MUDOU DE ENDEREÇO" },
        { value: "NÃO ATENDO ESSA REGIÃO", text: "NÃO ATENDO ESSA REGIÃO" },
        { value: "TELEFONE NÃO EXISTE", text: "TELEFONE NÃO EXISTE" },
        { value: "OUTROS", text: "OUTROS" }
      ]
    };
  },
  computed: {
    getCurrentValue: {
      get() {
        return this.disapproveMotive;
      },
      set(value) {
        this.$emit("change", value);
      }
    }
  },
  methods: {
    save() {
      if (this.getCurrentValue.motive == null) {
        this.error = true;
        return;
      }

      this.$emit("disapprove");
    },
    closeModal() {
      this.$modal.hide("disapprove-selfsignup");
      this.$emit("modalClosed");
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/css/main.scss";

.custom-body {
  margin: 10px;
}

.modal-text-color {
  color: #3e3e3e;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}

.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn {
  margin: 10px;
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
}

.btn-default {
  background: #ff9b64;
}

.rounded-div {
  background: #cb2d2d80 0% 0% no-repeat padding-box;
  svg {
    color: #cb2d2d;
  }
}

.close-icon {
  cursor: pointer;
}
</style>
