<template>
  <div class="sign-up__form">
    <div class="sign-up__form-inputs">
      <div class="sign-up__form-row sign-up__simple-input">
        <div class="form-group position-relative">
          <input
            class="form-control elem__placeholder-gray"
            v-model.trim="userModel.name"
            type="text"
            :placeholder="$t('Name')"
            name="name"
            id="name"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="sign-up__form-row sign-up__simple-input">
        <div class="form-group position-relative">
          <input
            class="form-control elem__placeholder-gray"
            v-model.trim="userModel.lastname"
            type="text"
            :placeholder="$t('LastName')"
            name="lastname"
            id="lastname"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="sign-up__form-row sign-up__simple-input">
        <div class="form-group position-relative">
          <input
            class="form-control elem__placeholder-gray"
            type="text"
            name="mobile"
            id="mobile"
            v-model.trim="userModel.mobile"
            :placeholder="$t('Mobile')"
            dir="ltr"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="sign-up__form-row sign-up__simple-input">
        <div class="form-group position-relative">
          <input
            class="form-control elem__placeholder-gray"
            type="text"
            name="username"
            id="username"
            v-model.trim="userModel.username"
            :placeholder="$t('UserName')"
            dir="ltr"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="sign-up__form-row sign-up__simple-input">
        <div class="form-group position-relative">
          <input
            class="form-control elem__placeholder-gray"
            type="text"
            name="email"
            id="email"
            v-model.trim="userModel.email"
            :placeholder="$t('Email')"
            dir="ltr"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="sign-up__form-row sign-up__simple-input">
        <div class="form-group position-relative">
          <input
            class="form-control elem__placeholder-gray"
            type="password"
            name="password"
            id="password"
            v-model.trim="userModel.password"
            :placeholder="$t('Password')"
            dir="ltr"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="sign-up__form-row sign-up__simple-input">
        <div class="form-group position-relative">
          <div class="custom-control custom-checkbox">
            <input
              type="checkbox"
              class="custom-control-input"
              id="select-all-checkbox"
              v-model="userModel.is_active"
              :true-value="1"
              :false-value="0"
            />
            <label class="custom-control-label" for="select-all-checkbox">
              فعال:
            </label>
          </div>
        </div>
      </div>
    </div>
    
    <div class="sign-up__btn-container">
      <button class="btn btn-primary" @click="submit()">
        <the-button-loading v-if="loading"></the-button-loading>
        <div v-if="userModel.id">
          {{ $t("Update") }}
        </div>
        <div v-else>
          {{ $t("Register") }}
        </div>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    parentLoading: false,
    userData: {
      default() {
        return {
          id: undefined,
          name: null,
          lastname: null,
          username: null,
          email: null,
          password: null,
          is_active: 1,
          mobile: null,
        };
      },
    },
  },
  watch: {
    userData(newValu) {
      this.userModel = newValu;
    },
    parentLoading(newVal) {
      this.loading = newVal;
    },
  },
  mounted() {
    this.userModel = this.userData;
  },
  data() {
    return {
      loading: this.parentLoading,
      userModel: {
        id: undefined,
        name: null,
        lastname: null,
        username: null,
        email: null,
        password: null,
        is_active:1,
        mobile: null,

      },
    };
  },
  methods: {
    submit() {
      this.loading = true;
      this.$emit("on-pass-by-emit", this.userModel);
    },
  },
};
</script>
