<template>
  <div class="container-fluid h-100">
    <div class="row" style="height: 90%; overflow: hidden">
      <!-- <div class="col-12 col-md-3 mb-2 py-md-2 my-tabs h-auto">
        <nav class="popUp-tab__menu">
          <div
            class="nav nav-tabs flex-md-wrap flex-nowrap"
            id="nav-tab"
            role="tablist"
          >
            <a
              v-for="(navItem, index) in elements.items"
              @click.prevent="setTab(navItem)"
              class="nav-item mt-4"
              :class="{ active: currentTab === index + 1 }"
              id="nav-changepass-tab"
              data-bs-toggle="tab"
              href="#nav-changepass"
              role="tab"
              aria-controls="nav-changepass"
              aria-selected="false"
            >
              <span class="">{{ navItem?.label }}</span>
            </a>
          </div>
        </nav>
      </div> -->
      <div class="col-12 px-5 main-section h-100 h-md-75">
        <div class="row">
          <div class="col-12 ">
            <label class="text-nowrap mb-2" for="crition-list">انتخاب سازمان:&nbsp;</label>
            <multiselect
              v-model="valueMultiSelect"
              :options="multiSelectOptions"
              :multiple="true"
              :close-on-select="true"
              :clear-on-select="false"
              :preserve-search="true"
              placeholder="جستجو..."
              label="title"
              track-by="id"
              :preselect-first="true"
              class="multiselect-tag-list"
              id="crition-list"
              :searchable="true"
              :max-height="150"
              selectLabel="✓"
              deselectLabel="✖"
              selectedLabel="اتخاب شد"
            >
              <template slot="selection" slot-scope="{ values, search, isOpen }"
                ><span
                  class="multiselect__single"
                  v-if="values.length"
                  v-show="!isOpen"
                  >{{ values.length }} مورد انتخاب شده</span
                ></template
              >
            </multiselect>
          </div>
        </div>
        <div class="row h-75  overflow-auto ">
          <div class="problem-section">
            <span class=""> موارد انتخاب شده : </span><br />
            <div class="problem-section__content text__15 mt-3">
              <ul class="list-unstyled">
                <li
                  v-for="(item, index) in this.selectedData"
                  :key="'qa_' + index"
                  class="mb-2 list-item"
                >
                  <button
                    type="button"
                    class="btn remove-filter-btn"
                    @click="removeItem(item, index)"
                  >
                    <span class="tavasi tavasi-Component-21--1"></span>
                  </button>
                  <span>{{ item.title }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="d-flex justify-content-end">
        <button
          type="submit"
          style="color: #fff !important"
          class="btn btn-primary mt-3 px-3"
          @click="saveProperty"
        >
          <span>ثبت</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import HttpService from "@services/httpService";
import repoApi from "@apis/repoApi";

export default {
  props: {
    elements: {
      default() {
        return {};
      },
    },
    id: {
      default() {
        return "";
      },
    },
  },
  beforeMount() {
    this.httpService = new HttpService();
  },
  mounted() {
    this.setTab(this.elements);
  },
  watch: {
    valueMultiSelect(newVal) {
      if (newVal == undefined) return;

      this.selectedData = [...newVal];
    },
  },

  data() {
    return {
      multiSelectOptions: [],
      valueMultiSelect: [],
      currentTab: 1,
      selectedData: [],
      activeSetTab: {},
      fetchingData: false,
    };
  },
  computed: {},
  methods: {
    setTab(item) {
      this.activeSetTab = item;
      this.selectedData = item?.value;
      this.valueMultiSelect = item?.value;
      this.getValueSelectOptions(item);
    },
    getValueSelectOptions(event) {
      let url = event.url_GET;
      this.httpService.getRequest(url).then((response) => {
        response.data.forEach((element) => {
          this.multiSelectOptions.push({
            id: element.id,
            title: element.title,
          });
        });
      });
    },
    removeItem(item, index) {
      this.selectedData.splice(index, 1);
      this.valueMultiSelect = this.valueMultiSelect.filter((item, idx) => {
        return idx !== index;
      });
    },
    saveProperty() {
      let id = this.$route.params.id ?? this.id;

      let key = this.$route.params.key;

      // return;

      if (!id) {
        console.log("not id in route params");
        return;
      }

      //  اگر تغییری نداشته باشیم، meta به صورت "{}" خواهد بود.

      if (this.fetchingData) return;
      this.fetchingData = true;

      let formData = {
        id: id,
        meta: JSON.stringify({
          [this.activeSetTab.key]: this.selectedData,
        }),
      };

      let url = "";
      if (key == "qasection" || key == "rgsection") {
        //در این حالت چون مخزن اصل قانون با اجزاء قانون متفاوت هست ، تغییرات در هر دو به نحو خاصی باید إعمال شود.
        url =
          this.repoMicroServiceName + repoApi.public.updateProperty_byRelated;
        url = url.replace("{{appname}}", this.buildName());
        url = url.replace("{{sub_key}}", key);
        key = "qaqanon";
      } else {
        url = this.repoMicroServiceName + repoApi.public.updateEntity;
      }

      url = url.replace("{{index_key}}", key);
      url = url.replace("{{id}}", id);

      this.httpService.postRequest(url, formData).then((res) => {
        this.fetchingData = false;
        this.mySwalToast({
          html: res?.message ?? "با موفقیت ثبت شد.",
        });
        this.$emit("closeAfterSaving", {
          data: this.selectedData,
          key: this.activeSetTab.key,
        });
      });
    },
  },
  components: {
    Multiselect: () => import("vue-multiselect"),
  },
};
</script>

<style lang="scss">
// .problem-section {
//   position: relative;

//   .problem-section__title {
//     margin-right: 2em;

//     a {
//       font-size: 1rem;
//     }
//   }

//   &:hover {
//     .comment-icon {
//       opacity: 1;
//       transform: scale(1.1);
//       transition: all 0.2s;
//     }
//   }

//   .comment-icon {
//     position: absolute;
//     left: -1em;
//     top: 0;
//     opacity: 0.5;
//     transition: all 0.2s;

//     .tavasi {
//       font-size: 1.5rem;
//     }
//   }

//   .list-unstyled {
//     display: flex;
//     flex-wrap: wrap;

//     .list-item {
//       position: relative;
//       border: 1px solid #92a2b2;
//       border-radius: 0.5em;
//       padding: 0.5em;
//       margin-left: 0.5em;
//       margin-bottom: 0.5em;
//       .remove-filter-btn {
//         position: absolute;
//         top: -0.5em;
//         left: -0.8em;
//         display: flex;
//         &:hover {
//           span {
//             color: red !important;
//           }
//         }
//       }
//     }
//   }
// }
.active {
  color: var(--primary-color);
  position: relative;
  // &::after {
  //   content: "";
  //   border-bottom: 2px solid var(--primary-color);
  //   position: absolute;
  //   top: 40px;
  //   right: 0px;
  //   width: 100%;
  // }
}
.popUp-tab__menu a {
  display: flex;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 23px;
  border-radius: 0;
  width: 100%;
  border: unset;
  margin: 0;
  font-size: 1rem;
  color: #444444;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 1em;
  padding-left: 23px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  &.active {
    background-color: #e8fcff;
  }
  &:hover {
    background-color: #e8fcff;
  }
}
.nav-item {
  white-space: nowrap;
}
.list-unstyled {
  display: flex;
  flex-wrap: wrap;
  .list-item {
    position: relative;
    border: 1px solid #92a2b2;
    border-radius: 0.5em;
    padding: 0.5em;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    .remove-filter-btn {
      position: absolute;
      top: -0.5em;
      left: -0.8em;
      display: flex;
      &:hover {
        span {
          color: red !important;
        }
      }
    }
  }
}
</style>
