<template>
  <div class="position-relative">
    <form action="">
      <div class="row">
        <div class="col-12" style="margin: 0 25%; max-width: 300px">
          <NuxtImg :src="src" class="img-thumbnail" />
        </div>
        <div class="col-12">
          <h5 class="font-weight-bold">{{ value.title }}</h5>
          <p class="text-justify">{{ value.description }}</p>
        </div>
      </div>

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <span>&nbsp;</span>

          <div class="d-flex">
            <button
              type="button"
              class="popUp-tab__clear btn"
              @click.prevent="closeModal"
            >
              لغو
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { propertyMixin } from "~/chat/mixins/propertyMixin";

// import ImageUploader from "vue-image-upload-resize";

export default {
  mixins: [propertyMixin],
 
  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    const res = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    if (res) this.value = res;
    this.src = import.meta.env.VITE_MEDIA_BASE_URL + this.value.file;
  },
  data() {
    return {
      src: "",
      value: {
        title: null,
        description: null,
        file: null,
      },
      hasImage: false,
      imageUrl: undefined,
    };
  },

  computed: {
    // propertyObj(){
    //   return this.value;
    // }
  },

  methods: {
    setImage: function (file) {
      this.hasImage = true;
      this.imageUrl = file;
      this.saveFile(file.info);
    },

    // ...mapActions("entity",['SAVE_PROPERTY']),
    // saveProperty(){
    //   let self = this;
    //   let property = this.propertyObj;
    //   let index = 0;
    //   if(property.id){
    //     index = property.index;
    //   }
    //   this.SAVE_PROPERTY(property).then(response => {
    //     self.$emit('change', {item: response.data, type: 'necessities', index: index});
    //   });
    // }
  },
};
</script>
<style lang="scss">
.picture-input input[type="file"],
#fileInput {
  display: none !important;
}

.image-uploader-container {
  position: relative;
  border: 2px dashed #eee;
  padding: 0.2em;

  &.hide-preview {
    .upload-label {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      width: auto !important;
      overflow: hidden;
    }

    .upload-label img {
      visibility: hidden;
    }
  }
  .img-preview {
    width: 300px;
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
  }
}
</style>
