<template>
  <main class="landing-page">


     <!-- profile -->
    <div class="popup-wrp" style="display: none">
      <div class="overlay" @click="hideDialog"></div>
      <div class="popup-set" id="add-profile" style="display: none;width:700px">
        
        <!-- header -->
        <div class="popup-body">
          <form class="popup-forms">
            <div class="row">
              <!-- input -->
             <img :src="templateImage" />
              <!-- input -->
              
              
             
              <!-- input -->

              <!-- input -->
              <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                <div class="form-group floating-label">
                  <select class="form-group">
                    <option @click="addSocialLink">Add another</option>
                  </select>
                  <span class="select-arrow"
                    ><img src="../assets/images/chevron-down.svg"
                  /></span>
                </div>
              </div> -->
              <!-- input -->
            </div>
            
          </form>
        </div>
        <div class="clearfix"></div>
      </div>
      <!-- add profile -->
    </div>
    <!-- profile -->
    <!-- profile -->
    <div class="container-fluid inner-wrp" style="background: transparent">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="#"
          ><img src="../assets/images/logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExample03"
          aria-controls="navbarsExample03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExample03">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" style="cursor:pointer" @click="listPage('/casestudy')">Case Study List</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" style="cursor:pointer" @click="listPage('/insight')">Create Insight</a>
            </li>
          </ul>
        </div>
        <div class="">
          <a href="javascript:void(0);" @click="logout">Log Out </a>
        </div>
      </nav>
      <!-- menu wrapper -->
      <div class="row profile-tab-spc-top">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="user-profile">
            <div class="form-group floating-label">
              <select
                class="form-control"
                v-model="userData"
                v-on:change="selectUser(userData)"
                :disabled="editMode"
              >
                <option value="null">Select User</option>
                <option v-for="(user, i) in userList" :key="i" :value="i">
                  {{ user.name }} ({{ user.email }})
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <h5 class="nav-link">Intro Screen Record</h5>
            </li>
          </ul>
        </div>
      </div>
      <!-- 1st row -->
      <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Case Study Name</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="caseStudy.caseStudyDetails.intro.name"
            />
          </div>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">App Name</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="caseStudy.caseStudyDetails.intro.app"
            />
          </div>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Focus</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="caseStudy.caseStudyDetails.intro.focus"
            />
          </div>
        </div>
      </div>
      <!-- 1st row end -->

      <!-- 2nd row -->
      <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Case Study Type</label>
            <select
              class="form-control"
              v-model="caseStudy.caseStudyDetails.intro.type"
            >
              <option value="null">Select Case Type</option>
              <option value="Retake">Retake</option>
              <option value="Behind-the-scenes">Behind-the-scenes</option>
              <option value="Critique">Critique</option>
              <option value="Juxtapose">Juxtapose</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Platform</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="caseStudy.caseStudyDetails.intro.platForm"
            />
          </div>
        </div>

        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname"> Insight Logo</label>
            <img v-if="caseStudy.caseStudyDetails.intro.logoURL" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.intro.logoURL"
                />
            <input
              @change="createImage('logo')"
              type="file"
              name="photso"
              id="logo"
              accept="image/*"
            />
          </div>
        </div>
      </div>
      <!-- 2nd row -->
      <!-- 3rd row -->
      <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname"></label>
            <ul class="interests">
              <li>
                <input
                  class=""
                  placeholder="Add Focus Areas"
                  v-model="focusName"
                />
                <a href="javascript:void(0);" @click="addInsight('focus')"
                  ><img src="../assets/images/plus-circle.svg"
                /></a>
              </li>

              <li
                v-for="(interest, i) in caseStudy.caseStudyDetails.focusAreas"
                :key="i"
              >
                <span>{{ interest }}</span>
                <a
                  href="javascript:void(0);"
                  @click="removeInsight(i, 'focus')"
                  class="cat-minus"
                  ><img src="../assets/images/minus.svg"
                /></a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Select Insight Tags</label>
            <select
              class="form-control"
              v-model="insightName"
              @change="addInsight('insight')"
            >
              <option value="null">Select Insight Tag</option>
              <option value="Design">Design</option>
              <option value="Product">Product</option>
              <option value="Marketing">Marketing</option>
              <option value="Pricing">Pricing</option>
              <option value="Psychology">Psychology</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname"></label>
            <ul class="interests">
              <li
                v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags"
                :key="i"
              >
                <span>{{ interest }}</span>
                <a
                  href="javascript:void(0);"
                  @click="removeInsight(i, 'insight')"
                  class="cat-minus"
                  ><img src="../assets/images/minus.svg"
                /></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 3rd row end -->

      <!-- outdor -->
      <div class="row profile-tab-spc-top">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <h5 class="nav-link">Outro Screen Record</h5>
            </li>
          </ul>
        </div>
      </div>

      <!-- 1st row -->
      <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Designer Name</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="caseStudy.caseStudyDetails.outro.designer"
            />
          </div>
        </div>

        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Illustrations Name</label>
            <input
              type="text"
              class="form-control"
              value=""
              placeholder=" "
              v-model="caseStudy.caseStudyDetails.outro.illustrations"
            />
          </div>
        </div>

        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname"> Author Image</label>
            <img v-if="caseStudy.caseStudyDetails.outro.authorImage[0]" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.outro.authorImage[0]"
                />
            <input
              @change="createImage('outdor')"
              type="file"
              name="photos"
              id="outdor"
              accept="image/*"
            />
          </div>
        </div>
      </div>
      <!-- 1st row -->
      <!-- outdoor ends -->

      <!-- outdor -->
      <div class="row profile-tab-spc-top">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <h5 class="nav-link">Add SLides</h5>
            </li>
          </ul>
        </div>
      </div>

    

      <!-- case study  slides-->
      <div
        class="row profile-tab-spc-top"
        v-for="(slide, i) in caseStudy.slides"
        :key="i"
      >
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <p class="nav-link">
                <b>Screen {{ i + 1 }}</b>
                <a
                  style="cursor: pointer; color: red; font-size: 0.8rem"
                  @click="removeSlide(i)"
                >
                  Remove</a
                >
                <a
                  style="cursor: pointer; color: blue; font-size: 0.8rem"
                  @click="addProfileDialog(slide)"
                >
                  View</a
                >
              </p>
            </li>
             <li class="nav-item active" v-if="slide.insight">
              <div class="form-group floating-label">
            <label for="lname" class="lname">Insight</label>
            <select
              class="form-control"
              v-model="insightId"
              v-on:change="insightSelected(slide)"
            >
              <option value="null">Select Insight</option>
              <option v-for="(insight, i) in insightList" :key="i" :value="insight._id">
                {{ insight._id }}
              </option>
            </select>
          </div>
            </li>
          </ul>
        </div>
       

        
 


        <div class="row">
          <div
            class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
            v-for="(field, j) in slide.metaData.fields"
            :key="j"
          >
            <div
              class="form-group floating-label"
              v-if="field.fieldType == 'text'"
            >
              <label for="lname" class="lname">{{ field.displayName }}</label>
              <input
                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="field.fieldValue"
              />
            </div>

            <div
              class="form-group floating-label"
              v-if="field.fieldType == 'image'"
            >
              <label for="lname" class="lname"> {{ field.displayName }}</label>
              <img v-if="field.fieldValue" style="width:40px;height: 40px;" :src="field.fieldValue"
                />
              <input
                @change="fieldcreateImage(i, j)"
                type="file"
                name="photo"
                :id="i + '' + j"
                accept="image/*"
              />
            </div>
          </div>
        </div>

        <div class="row">
          <div
            class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
            v-for="(cum, j) in slide.metaData.comments"
            :key="j"
          >
            <div class="form-group floating-label">
              <label for="lname" class="lname">Comment Box {{ j + 1 }}</label>
              <input
                type="text"
                class="form-control"
                value=""
                placeholder=" "
                v-model="cum.comment"
              />
            </div>
          </div>
        </div>
       
      </div>


      <!-- 1st row -->
      <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-group floating-label">
            <label for="lname" class="lname">Slides Name</label>
            <select
              class="form-control"
              v-model="slideId"
              v-on:change="slideSelected(slideId)"
            >
              <option value="null">Select Slide</option>
              <option v-for="(template, i) in templateList" :key="i" :value="i">
                {{ template.name }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <!-- 1st row -->

      <!-- 1st row end -->
      <!-- case study ends -->
      <div class="clearfix"></div>

      <!-- users land image -->
      <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <div class="form-layout signup-frm-spc">
          <form>
            <a
              href="javascript:void(0);"
              class="btn btn-lg sb-button"
              type="submit"
              @click="submit"
            >
              <img src="../assets/images/key.svg" /> submit
            </a>
          </form>
        </div>
      </div>

      <!-- data wrp -->
      <!-- body wrapper -->
    </div>
  </main>
</template>

<script>
import Vue from "vue";
import router from "../router";
import $ from "jquery";
import axios from "axios";

export default {
  name: "Profile",

  data() {
    return {
      loggedinFlag: false,
      templateImage:null,
      caseId: null,
      editMode: false,
      userData: null,
      usertoken: null,
      insightName: null,
      focusName: null,
      slideId: null,
      userList: [],
      templateList: [],
      insightList: [],
      insightId:null,
      caseStudy: {
        caseStudyDetails: {
          userId: [],
          intro: {
            name: null,
            logoURL: null,
            app: null,
            type: null,
            focus: null,
            readTime: null,
            platForm: null,
            authors: [],
          },
          outro: {
            authorImage: [],
            authors: [],
            designer: null,
            illustrations: null,
          },
          insightTags: [],
          focusAreas: [],
        },
        slides: [],
      },
    };
  },
  mounted() {
    if (this.$route.fullPath.split("?").length == 2) {
      this.editMode = true;
      this.caseId = this.$route.fullPath.split("?")[1];
      var introData = localStorage.getItem("spotlight_caseStudy" + this.caseId);
      if (introData) {
        introData = JSON.parse(introData);
        console.log("introData", introData);
        this.caseStudy.caseStudyDetails.intro = introData.intro;
        this.caseStudy.caseStudyDetails.userId = introData.userId;
        this.caseStudy.caseStudyDetails.outro = introData.outro;
        this.caseStudy.caseStudyDetails.insightTags = introData.insightTags;
        this.caseStudy.caseStudyDetails.focusAreas = introData.focusAreas;
      }
    }
    var userdata = localStorage.getItem("spotlight_usertoken");
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.usertoken = userdata.token;
      this.getUserList();
      this.getTemplateList();
      this.getInsightList();
    }
  },
  methods: {
    selectUser(i) {
      this.userList[i];
      this.caseStudy.caseStudyDetails.intro.authors.push(this.userList[i].name);
      this.caseStudy.caseStudyDetails.outro.authors.push(this.userList[i].name);
      this.caseStudy.caseStudyDetails.userId.push(this.userList[i]._id);
      console.log("-", this.caseStudy);
    },

    logout() {
      this.$router.push("/");
    },
    addInsight(type) {
      if (type == "focus") {
        this.caseStudy.caseStudyDetails.focusAreas.push(this.focusName);
        this.focusName = null;
      } else if (type == "insight") {
        this.caseStudy.caseStudyDetails.insightTags.push(this.insightName);
        this.insightName = null;
      }
    },
    removeInsight(i, type) {
      if (type == "focus") {
        this.caseStudy.caseStudyDetails.focusAreas.splice(i, 1);
      } else if (type == "insight") {
        this.caseStudy.caseStudyDetails.insightTags.splice(i, 1);
      }
    },

    async slideSelected(i) {
      console.log("id is", this.templateList[i]);
      var slideMetadata = {};
      // slideMetadata = await this.getMeatda(this.templateList[i]._id);
      this.slideId = null;
      // this.templateList[i].metaData = slideMetadata.metaData;
      this.caseStudy.slides.push(this.templateList[i]);
      console.log("this.caseStudy.slides", this.caseStudy.slides);
    },
    async insightSelected(data) {
     
      // this.caseStudy.slides.push(this.templateList[i]);
      
      console.log("data",data);
      data.insightId = this.insightId;
      this.insightId = null;
    },

    removeSlide(i) {
      this.caseStudy.slides.splice(i, 1);
    },

    createImage(type) {
      var that = this;
      console.log(document.getElementById(type));
      var file = document.getElementById(type).files[0];
      console.log("file", file);
      var reader = new FileReader();
      reader.onload = function (e) {
        console.log("e.target.result  ", e.target.result);
        that.uploadImage(type, e.target.result);
      };
      reader.onerror = function (error) {
        alert(error);
      };
      if (file) {
        reader.readAsDataURL(file);
      }
    },
    uploadImage(type, base64) {
      console.log("type", type);
      var obj = {
        image: base64,
      };
      axios
        .post("/superAdmin/uploadImage", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          if (type == "logo") {
            
             setTimeout(() => this.caseStudy.caseStudyDetails.intro.logoURL = response.data.data, 99);
          } else if (type == "outdor") {
            this.caseStudy.caseStudyDetails.outro.authorImage = [];
            setTimeout(() => this.caseStudy.caseStudyDetails.outro.authorImage.push(
              response.data.data
            ), 99);
            
          }

          console.log(response.data.data);
          console.log(this.caseStudy);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },

    fieldcreateImage(i, j) {
      console.log("i", i);
      console.log("j", j);
      var that = this;
      var id = i + "" + j;
      console.log(document.getElementById(id));
      var file = document.getElementById(id).files[0];
      // var file = document.querySelector("input[type=file]").files[0];
      console.log("file", file);
      var reader = new FileReader();
      reader.onload = function (e) {
        // console.log("e.target.result  ",e.target.result  )
        that.fielduploadImage(i, j, e.target.result);
      };
      reader.onerror = function (error) {
        alert(error);
      };
      if (file) {
        reader.readAsDataURL(file);
      }
    },
    fielduploadImage(i, j, base64) {
      var obj = {
        image: base64,
      };
      axios
        .post("/superAdmin/uploadImage", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          setTimeout(() => this.caseStudy.slides[i].metaData.fields[j].fieldValue =
            response.data.data, 10);

          
          console.log(response.data.data);
          console.log(this.caseStudy);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },

    getUserList() {
      axios
        .get("/superAdmin/users", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          response.data.data.forEach((element) => {
            if (element.name) {
              this.userList.push(element);
            }
          });
          console.log("response", this.userList);
        })
        .catch((error) => console.log(error));
    },

    getTemplateList() {
      axios
        .get("/superAdmin/templates", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          response.data.data.forEach((temp) => {
            if (
              temp._id != "INTRO_oqkdMOVDrwRptsdWJ6Ye" &&
              temp._id != "OUTRO_oqkdMOVDrwRptsdWJ6Ye"
            ) {
              if (temp.bounceBoard) {
                for (var i = 0; i < temp.commentBox; i++) {
                  temp.metaData.comments.push({
                    userId: null,
                    slideId: null,
                    caseStudyId: null,
                    comment: null,
                  });
                }
              }
              this.templateList.push(temp);
            }
          });
          if (this.editMode) {
            this.getSLideData();
          }
          console.log("templates", this.templateList);
        })
        .catch((error) => console.log(error));
    },
    getInsightList() {
      axios
        .get("/superAdmin/insight", {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.insightList = response.data.data;
          
          console.log("insight", response.data.data);
        })
        .catch((error) => console.log(error));
    },

    getSLideData() {
      axios
        .get("/superAdmin/caseStudySlides?caseStudyId=" + this.caseId, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          var finalArray = [];
          response.data.data.forEach((template_) => {
            var keys = [];
            var i = this.templateList.findIndex(
              (temp_) => temp_._id == template_.templateId
            );
            var obj = {
              _id: this.templateList[i]._id,
              bounceBoard: this.templateList[i].bounceBoard,
              insight: this.templateList[i].insight,
              slideId:template_._id,
              // commentBox: this.templateList[i].commentBox,
              metaData: {
                fields: [],
                comments: [],
              },
            };
            if (this.templateList[i].bounceBoard) {
              obj.commentBox = this.templateList[i].commentBox;
            }
            if (this.templateList[i].insight) {
              obj.insightId = template_.insightId;
            }
            var fieldArray = [];
            this.templateList[i].metaData.fields.forEach((element) => {
              var fieldobj = {
                fieldName: element.fieldName,
                displayName: element.displayName,
                fieldValue: template_.metaData[element.fieldName],
                fieldType: element.fieldType,
              };
              obj.metaData.fields.push(fieldobj);
            });
            finalArray.push(obj);
          });
          this.caseStudy.slides = finalArray;
          console.log("----", finalArray);
          console.log(this.templateList, "getSLideData==>");
        })
        .catch((error) => console.log(error));
    },

    submit() {
      const latest = Object.create(this.caseStudy);

      var slidArray = [];
      latest.slides.forEach((slides) => {
        console.log("slides", slides);
        var slideData = {};
        slideData.templateId = slides._id;
        slideData.bounceBoard = slides.bounceBoard;
        slideData.insight = slides.insight;
        if(slides.slideId){
          slideData.slideId = slides.slideId;

        }
        if(slides.insightId){
          slideData.insightId = slides.insightId;

        }
        if (slides.metaData.comments && slides.metaData.comments.length > 0) {
          slideData.comments = slides.metaData.comments;
          // this.getSLideData();
        }
        // var comments = [];
        // if (slides.bounceBoard) {
        //   slides.metaData.comments.forEach((element) => {
        //     comments.push(element.comment);
        //   });
        //   slideData.comments = comments;
        // }

        slides.metaData.fields.forEach((fields_) => {
          slideData[fields_.fieldName] = fields_.fieldValue;
        });
        slidArray.push(slideData);
        // delete slides.metaData.fields;
      });

      console.log("slideData", slidArray);
      if (this.editMode) {
        this.updateProfile(slidArray);
      }else{
        this.saveProfile(slidArray);
      }
    },

    saveProfile(slides) {
      var obj = {};
      obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
      obj.caseStudyDetails.intro.readTime = Math.round(
        slides.length / 3
      ).toString();
      obj.slides = slides;
      axios
        .post("/superAdmin/caseStudy", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          // this.userData = response.data.data;
          this.$toaster.success("Case Study Created");
          this.$router.go(this.$router.currentRoute)

          console.log(response);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
    updateProfile(slides) {
      var obj = {};
      obj.caseStudyId = this.caseId,
      obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
      obj.caseStudyDetails.intro.readTime = Math.round(
        slides.length / 3
      ).toString();
      obj.slides = slides;
      axios
        .put("/superAdmin/caseStudy", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          // this.userData = response.data.data;
          this.$toaster.success("Case Study Updated");
          this.$router.go(this.$router.currentRoute)


          console.log(response);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
    listPage(url){
         this.$router.push(url);
    },

    addProfileDialog(slide) {
      console.log("slide",slide)
      this.templateImage = slide.templateImage;
      $(".inner-wrp").addClass("body-blur");
      $("#add-social-links").hide();
      $(".popup-wrp, #add-profile").show();
    },

    closeDialog() {
      this.templateImage = null;
      $(".popup-wrp").hide();
      $(".inner-wrp").removeClass("body-blur");
      // this.saveProfile();
    },
    hideDialog() {
      this.templateImage = null;
      $(".popup-wrp").hide();
      $(".inner-wrp").removeClass("body-blur");
    },

    async getMeatda(tempId) {
      var obj = [
        {
          tempId: "T1_RoeMG8130Xko1DvhC3Ou",
          metaData: {
            fields: [
              {
                fieldName: "authorImage",
                displayName: "Author Image",
                fieldValue: null,
                fieldType: "image",
              },
              {
                fieldName: "mobileImage",
                displayName: "Mobile Image",
                fieldValue: null,
                fieldType: "image",
              },
              {
                fieldName: "textBox",
                displayName: "Text Box",
                fieldValue: null,
                fieldType: "text",
              },
            ],
          },
        },
        {
          tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
          metaData: {
            fields: [
              {
                fieldName: "authorImage",
                displayName: "Author Image",
                fieldValue: null,
                fieldType: "image",
              },
            ],
            comments: [{ comment: null }, { comment: null }, { comment: null }],
          },
        },
        {
          tempId: "T3_cqNIf7tuqL4jyON63dA7",
          metaData: {
            fields: [
              {
                fieldName: "authorImage",
                displayName: "Author Image",
                fieldValue: null,
                fieldType: "image",
              },
              {
                fieldName: "mobileImage",
                displayName: "Mobile Image",
                fieldValue: null,
                fieldType: "image",
              },
            ],
            comments: [
              { comment: null },
              { comment: null },
              { comment: null },
              { comment: null },
            ],
          },
        },
      ];
      var i = obj.findIndex((obj_) => obj_.tempId == tempId);
      return obj[i];
    },
  },
};
</script>
