<template>

  <ods-dialog
    :title="$t('warnings.dialogs.statusAssigned.assignTo')"
    :visible.sync="visible"
    width="488px"
    @open="resetAssignFormData"
    custom-class="-custom-simple-dialog assign-dialog"
    :append-to-body="true">

    <ods-form :model="assignForm" :rules="assignFormRules" ref="assignForm">
      <ods-form-item prop="formName" :label="$t('warnings.dialogs.statusAssigned.name')">
        <ods-input v-model="formName"></ods-input>
      </ods-form-item>

      <ods-form-item prop="formComment" :label="$t('warnings.dialogs.statusAssigned.comment')">
        <ods-input type="textarea" v-model="formComment"></ods-input>
      </ods-form-item>

      <ods-checkbox-group v-model="formNotificationTypeList" :min="1">
        <label class="ods-form-item__label">{{ $t('warnings.dialogs.statusAssigned.notifyThrough') }}</label>
        <div class="clearfix">
          <ods-checkbox :label="$t('warnings.dialogs.statusAssigned.portalWeb')"></ods-checkbox>
          <ods-checkbox :label="$t('warnings.dialogs.statusAssigned.email')" @change="changeEmail"></ods-checkbox>
          <ods-checkbox :label="$t('warnings.dialogs.statusAssigned.whatsapp')" @change="changeTel"></ods-checkbox>
          <ods-checkbox :label="$t('warnings.dialogs.statusAssigned.sms')" @change="changeTel"></ods-checkbox>
        </div>

      </ods-checkbox-group>

      <ods-collapse-transition>
        <div class="collapsedBlk" v-if="showEmail">
          <label class="ods-form-item__label">{{ $t('warnings.dialogs.statusAssigned.email') }}</label>
          <input-tag v-model="tagEmail" validate="email" :limit="1" :add-tag-on-blur="true"></input-tag>
          <div class="ods-form-item__error" v-if="emailError">
            {{ $t('warnings.dialogs.statusAssigned.pleaseEmail') }}
          </div>
        </div>
      </ods-collapse-transition>

      <ods-collapse-transition>
        <div class="collapsedBlk" v-if="showPhone">
          <label class="ods-form-item__label">{{ $t('warnings.dialogs.statusAssigned.phone') }}</label>
          <input-tag v-model="tagPhone" validate="digits" :limit="1" :add-tag-on-blur="true"></input-tag>
          <div class="ods-form-item__error" v-if="phoneError">
            {{ $t('warnings.dialogs.statusAssigned.pleasePhone') }}
          </div>
        </div>
      </ods-collapse-transition>

    </ods-form>

    <span slot="footer" class="dialog-footer">
      <ods-button size="medium" type="text" @click="$emit('close')">{{ $t('warnings.dialogs.statusAssigned.cancel') }}</ods-button>
      <ods-button size="medium" @click="submitForm()">{{ $t('warnings.dialogs.statusAssigned.accept') }}</ods-button>
    </span>
  </ods-dialog>
</template>

<script>

import InputTag from 'vue-input-tag';

export default {
  name: 'assign-dialog',
  props: ['visible', 'warningId'],
  components: {InputTag},
  data() {
    return {
      showEmail: false,
      showPhone: false,
      emailError: false,
      phoneError: false,

      tagEmail: [],
      tagPhone: [],

      formName: '',
      formEmail: '',
      formPhone: '',
      formComment: '',
      formNotificationTypeList: ['Portal web'],

      assignForm: {},

      assignFormRules: {
        name: [
          {required: true, message: 'Por favor, introduzca un nombre', trigger: 'none'},
        ],
      },
    };
  },
  mounted() {},
  computed: {},
  methods: {
    submitForm() {
      if (!this.validateForm('assignForm')) {
        return;
      }
      this.$emit('assignmentFormData', {
        warningId: this.warningId,
        comment: this.formComment,
        user: {
          name: this.formName,
          mail: this.formEmail,
          phone: this.formPhone,
        },
        notificationTypeList: this.formNotificationTypeList,
      });
    },
    changeEmail(event) {
      this.showEmail = event;
    },
    changeTel() {
      this.showPhone = this.formNotificationTypeList.some(item => item === 'Whatsapp' || item === 'Sms');
    },
    validateForm() {
      let isValid = false;
      this.formEmail = this.tagEmail[0];
      this.formPhone = this.tagPhone[0];
      this.emailError = this.formNotificationTypeList.includes('Email') && !this.formEmail;
      this.phoneError = this.formNotificationTypeList.some(item => item === 'Whatsapp' || item === 'Sms') && !this.formPhone;

      this.$refs.assignForm.validate((valid) => {
        if (valid && !this.emailError && !this.phoneError) {
          isValid = true;
        }
      });
      return isValid;
    },
    resetAssignFormData() {
      const form = this.$refs.assignForm;
      this.formName = '';
      this.formEmail = '';
      this.formPhone = '';
      this.formComment = '';
      this.formNotificationTypeList = ['Portal web'];

      this.tagEmail.length = 0;
      this.tagPhone.length = 0;

      this.showEmail = false;
      this.showPhone = false;
      this.emailError = false;
      this.phoneError = false;

      if (form) {
        form.resetFields();
      }
    },

  },
};

</script>

<style lang="scss">
.vue-input-tag-wrapper {
  background-color: #eaf0f5;
  -webkit-appearance: unset;
  border: 0;
  border-bottom: 1px solid #A2ACB3;
  overflow: hidden;
  padding-left: 10px;
  padding-top: 4px;
  cursor: text;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  line-height: 22px;
  height:32px;
}

.vue-input-tag-wrapper .input-tag {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid #96B5CC;
  color: #060E14;
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  margin-bottom: 4px;
  margin-right: 16px;
  padding: 0 8px;
}

.vue-input-tag-wrapper .input-tag .remove {
  cursor: pointer;
  color: #060E14;
  font-weight: 400;
}

.vue-input-tag-wrapper .input-tag .remove:hover {
  text-decoration: none;
}

.vue-input-tag-wrapper .input-tag .remove:empty::before {
  font-family: onesait-icons!important;
  content: "\221E";
  font-size: 10px;
  margin-left:6px;
}

.vue-input-tag-wrapper .new-tag {
  background: transparent;
  border: 0;
  color: #060E14;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 6px;
  margin-top: 1px;
  outline: none;
  padding: 4px;
  padding-left: 0;
  flex-grow: 1;
}

.vue-input-tag-wrapper.read-only {
  cursor: default;
}

.-custom-simple-dialog.assign-dialog .clearfix {
  clear:both;
  margin-bottom:24px;
}
.-custom-simple-dialog.assign-dialog .collapsedBlk {
  margin:24px 0;
  position:relative;
}
.-custom-simple-dialog.assign-dialog .collapsedBlk .ods-form-item__label {
  float:none;
  text-align:left;
}

</style>
