<template>
  <div class="position-relative">
    <form action="">
      <!-- <div class="form-row">
      <label for="">عنوان </label>
      <span>{{ data.entity.master.title }}</span>
    </div> -->
      <div class="">
        <label class="text__pink">صحت سنجی </label>
        <span v-if="model?.title">{{ model.title }}</span>
        <span v-else-if="model?.entity_title">{{ model.entity_title }}</span>
      </div>

      <!-- <div class="problem-section__content text__14">
      <my-tiny-mce
        :showSaveButton="false"
        ref="tinyEditorComponent"
        :tinyText="parsedText(text)"
        :parentButtonLoading="savingTextData"
      ></my-tiny-mce>
    </div> -->
      <div class="form-row">
        <textarea
          v-model="text"
          name=""
          ref="text"
          cols="30"
          rows="30"
          placeholder="متن مطلوب را گویا و مختصر وارد کنید"
          style="overflow: auto"
        ></textarea>
      </div>

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <span>&nbsp;</span>
          <!-- <button
            class="btn delete-btn btn-outline-danger"
            @click.prevent="deleteProperty()"
          >
            حذف
          </button> -->
          <div data-v-e8ee7a26="" class="d-flex">
            <button
              title="لغو"
              @click.prevent="$emit('close-modal')"
              class="popUp-tab__clear btn"
              type="button"
            >
              لغو
            </button>
            <button
              type="button"
              class="popUp-tab__submit btn"
              @click.prevent="saveProperty()"
            >
              ثبت
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { propertyMixin } from "~/chat/mixins/propertyMixin";
import repoApi from "~/apis/repoApi";
export default {
  mixins: [propertyMixin],

  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    // this.value = ('description' in this.data.entity ) ?  this.data.entity['description'] : '';
    const propValue = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    this.model = propValue;
    if (this.model.entity_title) this.schema = this.schema2;
    else this.schema = this.schema1;

    this.text = propValue?.text;
  },
  data() {
    return {
      savingTextData: false,
      text: "",
      model: undefined,
      schema: {},
      schema1: {
        id: undefined,
        text: "",
        title: "",
      },
      schema2: {
        id: undefined,
        text: "",
        entity_title: "",
        entity_id: "",
      },
    };
  },
  

  methods: {
    saveProperty() {
      if (this.model === undefined) this.model = this.schema;
      // this.model.text = this.$refs["tinyEditorComponent"].editorData;
      this.model.text = this.text;

      const formData = {
        [this.data.keyName]: this.model,
      };

      let vm = this;
      let url = `edit/${this.data.entity.id}/${this.data.keyName}`;

      if (this.data.index != -1) url += "/index/" + this.data.index;
      else url += "/id/" + this.model.id;

      this.httpService.postRequest(url, formData).then((response) => {
        if (response.result == "updated")
          setTimeout(() => {
            this.$emit("change", {
              data: formData,
              keyName: vm.data.keyName,
              index: vm.data.index,
            });
          }, 500);
        else
          mySwalToast({
            title: "خطا",
            html: response.result,
            icon: "error",
          });
      });
    },

    parsedText(unparsedText) {
      try {
        return JSON.parse(unparsedText);
      } catch {
        return unparsedText;
      }
    },
    deleteSimple(value = "") {
      mySwalConfirm({
        title: "هشدار!!!",
        html: `از حذف این مورد اطمینان دارید؟ `,
        icon: "warning",
      }).then((result) => {
        //  let word =this.data.keyName
        //  word=undefined
        let url =
          repoApi.entity.edit + this.data.entity.id + `/${this.data.keyName}`;
        const formData = {
          [this.data.keyName]: value,
        };
        // let url=`edit/${this.data.entity.id}/${this.data.keyName}`;
        ApiService.postRequest(url, formData)
          .then((res) => {
            this.closeModal();

            mySwalToast({
              html: res.data.message,
              icon: "success",
            });
          })
          .catch((err) => {
            mySwalToast({
              title: "خطا!!!",
              html: err.message,
              icon: "error",
            });
          });
      });
    },
  },
  
};
</script>
<style scoped>
/* .button_delete_Simple {
  position: absolute;
  bottom:0;
  right: 0;
} */
</style>
