<template>
  <!-- <div class="modal-dialog"> -->
  <div class="modal-content">
    <div class="popUp-tab__content tab-content share-modal__content">
      <div class="share-modal__search-content">
        <div class="share-modal__content">
          <div class="share-modal__search">
            <span>با </span>
            <input
              type="text"
              placeholder="نام کاربر یا email@exaple.com"
              id="searchForName"
              v-model="query"
              @keyup="showSearchResult"
            />
          </div>
          <div
            id="user-search-recommend"
            class="share-modal__search-recommend"
            :class="{ show: suggestionMode }"
          >
            <div class="search-recommend">
              <div
                class="search-users__item d-flex justify-content-between align-items-center mx-2"
                v-for="(user, i) in userSuggestions"
                :key="'h' + i"
              >
                <div class="search-users__pic">
                  <img :src="userAvatar(user)" alt="" />
                </div>
                <div class="search-users__content">
                  <div class="search-users__name">
                    {{ user.full_name }}
                  </div>
                  <div class="search-users__id">@{{ user.username }}</div>
                </div>
                <div class="search-users__type">
                  <div class="order-select main-page__date-select">
                    <select
                      @change="addUser($event, user)"
                      class="form-control d-block"
                    >
                      <option selected disabled :value="undefined">
                        انتخاب نقش
                      </option>
                      <option
                        v-for="role in roles"
                        :key="role.id"
                        :value="role.id"
                      >
                        {{ role.title }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
// import HttpService from "@services/httpService";

export default {
  name: "sharemodal",
  props: ["item", "itemType", "roles"],
  mounted() {
    // this.httpService = new HttpService();
    this.httpService = useNuxtApp()["$http"];
  },
  data() {
    return {
      httpService: {},
      newItemType: 0,
      suggestionMode: false,
      query: "",
      userSuggestions: [],
      userToAdd: [],
    };
  },
  methods: {
    // formData(url, data = []) {
    //   const formData = new FormData();
    //   for (const [key, value] of Object.entries(data)) {
    //     if (value !== undefined && value !== null) formData.append(key, value);
    //   }

    //   return axios.post(url, formData);
    // },
    showSearchResult() {
      var vm = this;
      let url = loginUrl() + "user/suggestion";
      if (this.query.length > 2) {
        this.httpService
          .postRequest(url, { query: this.query })
          .then((response) => {
            var items = response.data;
            vm.userSuggestions = items;
            vm.suggestionMode = true;
          });
      } else {
        vm.userSuggestions = [];
        vm.suggestionMode = false;
      }
    },
    deleteUser: function (index) {
      this.userToAdd.splice(index, 1);
    },
    addUser(ev, item) {
      this.userToAdd.push(item);
      this.suggestionMode = false;

      this.$emit("update-user-role", {
        user_id: item.user_id,
        role_id: +ev.target.value,
      });
      // this.addPerm(ev, item);
    },
    addPerm(ev, item) {
      // var guid = this.item.guid;
      // this.userToAdd.forEach(function (item) {
      // ApiService.post(this, "perm/set", {
      //   pid: guid,
      //   act: "add",
      //   read: 1,
      //   write: 0,
      //   username: item.username,
      // });
      // });
    },
  },
};
</script>
<style lang="scss">
@import "../../../assets/permit/scss/permit.scss";
</style>
<style scoped lang="scss">
.share-modal {
  height: 20em;
  background-color: #fff;
  top: 7em;
  left: 2em;
}
.search-users__pic {
  display: flex;
  margin-left: 15px;
  position: relative;
  img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
  }
}
.share-modal__content{
  width: 100%;
 
}
.share-modal__search-top {
  background-color: #eee;
  padding-bottom: 1em;
  font-size: 15px;
  font-weight: 500;
}

.share-modal__search-recommend {
  opacity: 1;
  display: block;
  position: static;
  visibility: visible;
  height: calc(100% - 12.5em);
  overflow: auto;
  /* display: none; */
  /* opacity: unset; */
  /* visibility: hidden; */
  /* top: 117px; */
  /* right: 0px; */
  /* width: 100%; */
  /* background: white; */
  /* -webkit-transition: all 0.3s ease-in-out; */
  /* transition: all 0.3s ease-in-out; */
  /* opacity: 0; */
  /* visibility: hidden; */
  /* display: none; */
  /* z-index: 10; */

  &.show {
    position: static !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
  }
}
// .share-modal {
//   width: 337px;
//   height: 385px;
//   background-color: #fff;
//   border: 1px solid #bac4ce;
//   border-radius: 20px;
//   top: 63px;
//   left: 253px;
//   transform: unset;

//   &__modal {
//     .modal-dialog {
//       transform: unset !important;
//       transition: unset !important;
//     }
//   }

//   &__content {
//     position: relative;
//     width: 337px;
//     height: 385px;
//     display: flex;
//     flex-direction: column;
//   }

//   &__search-content {
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     transition: all 0.3s ease-in-out;
//   }

//   &__search {
//     border-bottom: 1px solid #f1f1f1;
//     display: flex;
//     align-items: center;
//     padding-top: 15px;
//     padding-bottom: 15px;

//     span {
//       font-size: 16px;
//       // color: var(--color-2);
//       width: 50px;
//       display: flex;
//       justify-content: center;

//       i {
//         cursor: pointer;
//         color: #92a2b2;
//         font-size: 24px;
//         width: 70px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//       }
//     }

//     #get-back {
//       width: 70px;
//     }

//     input {
//       flex-grow: 2;
//       border: unset;
//       outline: unset;
//       // color: var(--color-2);
//       font-size: 14px;

//       &::placeholder {
//         color: #92a2b2;
//         font-size: 14px;
//       }
//     }
//   }

//   &__add-person {
//     width: 50px;
//     display: flex;
//     justify-content: center;

//     i {
//       font-size: 24px;
//       -webkit-transition: all 0.5s ease-in-out;
//       transition: all 0.5s ease-in-out;
//       font-size: 23px;
//       background: -webkit-linear-gradient(#a9bdc4 0%, #c6cfda 100%);
//       background-clip: border-box;
//       -webkit-background-clip: text;
//       -webkit-text-fill-color: transparent;
//     }

//     &:hover {
//       i {
//         background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
//         background-clip: border-box;
//         -webkit-background-clip: text;
//         -webkit-text-fill-color: transparent;
//       }
//     }
//   }

//   &__search-recommend {
//     display: none;
//     opacity: unset;
//     visibility: hidden;
//     position: absolute;
//     top: 57px;
//     right: 0px;
//     width: 100%;
//     height: calc(100% - 57px);
//     background: white;
//     transition: all 0.3s ease-in-out;
//     opacity: 0;
//     visibility: hidden;
//     display: none;
//     z-index: 10;

//     .os-host {
//       height: 100%;
//     }

//     .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
//       bottom: 0;
//       right: 7px;
//       top: 17px;
//       width: 0px;
//     }

//     .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
//       background: rgba(0, 0, 0, 0.16);
//     }
//   }

//   &__users {
//     flex-grow: 1;
//     max-height: 259px;

//     .os-scrollbar-vertical {
//       width: 0;
//     }
//   }

//   &__icon {
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     margin-bottom: 18px;

//     img {
//       width: 142px;
//       padding-top: 42px;
//     }
//   }

//   &__text {
//     color: #92a2b2;
//     font-size: 14px;
//     padding-bottom: 37px;
//     width: 246px;
//     text-align: center;
//     margin-right: auto;
//     margin-left: auto;
//   }

//   &__search-content-footer {
//     display: flex;
//     align-items: flex-end;
//     justify-content: space-between;
//     padding-top: 15px;
//     padding-bottom: 15px;
//     border-top: 1px solid #bac4ce;
//     padding-right: 22px;
//     padding-left: 22px;
//   }

//   &__sign {
//     display: flex;
//     flex-direction: column;

//     span {
//       font-size: 12px;
//       color: #92a2b2;
//       display: block;
//       margin-bottom: 2px;
//     }

//     a {
//       // color: var(--color-1);
//       font-size: 12px;
//     }
//   }

//   &__settings {
//     a {
//     }
//   }

//   &__settings-btn {
//     font-size: 14px;
//     // color: var(--color-1);
//   }

//   &__settings-content {
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     transition: all 0.3s ease-in-out;
//     opacity: 0;
//     visibility: hidden;
//     display: none;
//   }

//   &__title {
//     padding-top: 15px;
//     padding-bottom: 15px;
//     border-bottom: 1px solid #f1f1f1;
//     padding-right: 22px;
//     padding-left: 22px;

//     h4 {
//       font-size: 16px;
//     }
//   }

//   &__form {
//     padding-right: 22px;
//     padding-left: 22px;

//     &-question {
//       font-size: 14px;
//       font-weight: 500;
//       text-shadow: 0 -0.75px #6b6b6b;
//       margin-bottom: 17px;
//       color: #444444;
//     }

//     &-item {
//       padding-top: 17px;

//       &:last-child {
//         margin-bottom: 17px;
//       }
//     }

//     &-radio-item {
//       display: flex;
//       align-items: center;

//       &:not(:last-child) {
//         margin-bottom: 20px;
//       }

//       input {
//       }

//       label {
//         color: #444444;
//         font-size: 14px;
//         margin-right: 16px;
//         margin-bottom: 0;
//       }
//     }

//     &-btn {
//       min-width: 57px;
//       height: 32px;
//       border-radius: 20px;
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       margin-right: 10px;
//     }

//     &-radio {
//       position: relative;

//       input {
//         position: absolute;
//         opacity: 0;
//         cursor: pointer;
//         height: 20px;
//         width: 20px;
//         z-index: 5;
//       }

//       span {
//         display: flex;
//         height: 20px;
//         width: 20px;
//         border-radius: 50%;
//         border: 2px solid #bac4ce;
//         transition: all 0.3s ease-in-out;
//         display: flex;
//         justify-content: center;
//         align-items: center;

//         &::before {
//           content: " ";
//           width: 10px;
//           height: 10px;
//           border-radius: 50%;
//           display: flex;
//           background: linear-gradient(#3def90 0%, #1ed975 100%);
//           opacity: 0;
//           transition: all 0.3s ease-in-out;
//         }
//       }

//       input:checked ~ span::before {
//         opacity: 1;
//       }
//     }
//   }

//   &__form-btn--deactive {
//     font-size: 14px;
//     // color: var(--color-2);

//     &:hover {
//       opacity: 0.8;
//     }
//   }

//   &__from-btn--active {
//     // border: 2px solid var(--color-1);
//     // color: var(--color-1);
//     font-size: 14px;

//     &:hover {
//       color: white;
//       // background: var(--color-1);
//     }
//   }

//   &__setting-footer {
//     margin-top: auto;
//     border-top: 1px solid #f1f1f1;
//     display: flex;
//     align-items: center;
//     justify-content: flex-end;
//     padding: 16px;
//   }

//   &__people-search {
//     background: #fff;
//     position: absolute;
//     top: 0;
//     display: none;

//     left: 0;
//     width: 100%;
//     height: 100%;
//     transition: all 0.3s ease-in-out;
//     opacity: 0;
//     visibility: hidden;

//     .os-host {
//       height: 100%;
//     }

//     .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
//       bottom: 0;
//       right: 7px;
//       top: 17px;
//       width: 0px;
//     }

//     .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
//       background: rgba(0, 0, 0, 0.16);
//     }
//   }

//   &__user-search-content {
//     opacity: unset;

//     width: 100%;
//     height: calc(100% - 57px);
//     background: white;
//     transition: all 0.3s ease-in-out;
//     top: 57px;
//     display: none;

//     .os-host {
//       height: 100%;
//     }

//     .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
//       bottom: 0;
//       right: 7px;
//       top: 17px;
//       width: 0px;
//     }

//     .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
//       background: rgba(0, 0, 0, 0.16);
//     }
//   }

//   &__users-footer {
//     display: flex;
//     flex-direction: column;
//   }

//   &__textarea {
//     border-top: 1px solid #f1f1f1;
//     padding-top: 12px;
//     padding-bottom: 12px;
//     padding-right: 22px;
//     padding-left: 22px;
//   }

//   &__invite-row {
//     border-top: 1px solid #f1f1f1;
//     display: flex;
//     align-items: center;
//     padding-top: 17.5px;
//     padding-bottom: 26px;
//     justify-content: space-between;
//     padding-right: 22px;
//     padding-left: 22px;
//   }

//   &__select {
//     font-size: 14px;

//     .main-page__date-select .select-selected {
//       border: unset;
//       padding: 0;
//     }

//     .main-page__date-select .select-selected {
//       height: 32px;
//     }

//     .select-items {
//       width: 160px;
//     }

//     .main-page__date-select .select-items {
//       top: unset;
//       bottom: calc(5px + 100%);
//     }
//   }

//   &__send-invite {
//     a {
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       min-width: 120px;
//       border-radius: 20px;
//       // border: 2px solid var(--color-1);
//       height: 32px;
//       font-size: 14px;

//       &:hover {
//         color: white;
//         // background: var(--color-1);
//       }
//     }
//   }
// }
</style>