<template>
  <div
    class="modal fade share-modal__modal"
    id="share-modal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content popUp-tab share-modal">
        <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-top p-3">
                <!-- <i class="tavasi tavasi-Component-360--58"
                  ><span class="path1"></span><span class="path2"></span
                ></i> -->
                <span class="text__gray me-1"> انتخاب عضو </span>
              </div>
              <div class="share-modal__search">
                <input
                  type="text"
                  placeholder="جستجوی عضو جدید..."
                  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"
                    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>
  </div>
</template>
<script>
import HttpService from "@services/httpService";

export default {
  name: "sharemodal",
  props: ["item", "itemType"],
  mounted() {
    this.httpService = new HttpService(this.loginMicroServiceName);
  },
  data() {
    return {
      httpService: undefined,
      newItemType: 0,
      suggestionMode: false,
      query: "",
      userSuggestions: [],
      userToAdd: [],
      roles: [
        {  title: "عادی",id:1},
        {  title: "مشاهده",id:10},
        {  title: "سرگروه",id:500},
        {  title: "مالک",id:1000 },
      ],
    };
  },
  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;
      if (this.query.length > 2) {
        this.httpService
          .postRequest("user/suggestion", { query: this.query })
          .then((response) => {
            var items = response.data;
            vm.userSuggestions = items;
            vm.suggestionMode = true;
          });
      } else {
        vm.userSuggestions = [];
        vm.suggestionMode = false;
      }
    },
    addUser(ev, item) {
      this.userToAdd.push(item);
      this.suggestionMode = false;

      this.$emit("update-member", {
        user_id: item.user_id,
        perm_type: +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;
}

.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: 30em !important;
  &__content {
    width: 30em !important;
  }
}
@media screen and (max-width: 35.938em) {
  .share-modal {
  width: 23em !important;
  &__content {
    width: 23em !important;
  }
}
}
//   &__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>
