<template>
  <div>
    <div v-b-toggle.image class="vb-body-right-option pointer option-head">Image</div>
    <b-collapse id="image" visible>
      <div class="container vb-p-10">
        <div class="row">
          <div class="col-md-6">
            <span class="font-12">Image</span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 font-12">Please Select Image</div>
        </div>

        <!-- <img class="file-upload-image" :src="imagelink"  alt="your image" /> -->
        <div class="row">
          <div class="file-upload">
            <div class="image-upload-wrap">
              <input
                class="file-upload-input"
                type="file"
                @change="onFileSlected($event)"
                accept="image/*"
              />
              <div
                class="drag-text"
                v-if="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2].imgurl == ''"
              >
                <span>Please Select Image</span>
              </div>
              <div v-else>
                <img
                  class="file-upload-image"
                  :src="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2].imgurl"
                  alt="your image"
                  style="max-width: 100%; max-height: 92px;"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <b-input-group size="sm">
              <b-input-group-text slot="prepend">URL</b-input-group-text>
              <b-form-input
                v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2].imgurl"
              />
            </b-input-group>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Image Size</span>
            </div>
            <div>
              <b-btn-group>
                <b-btn size="sm" v-on:click="lowsize">-</b-btn>
                <b-btn
                  size="sm"
                >{{this.widgetType[this.selectedWidget.parentRow].columns[this.selectedWidget.column].rows[this.selectedWidget.row].style[2].imgsize}} %</b-btn>
                <b-btn size="sm" v-on:click="highsize">+</b-btn>
              </b-btn-group>
            </div>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <div>
                <span class="font-12">Postion</span>
              </div>
              <b-btn-group size="sm">
                <b-btn v-on:click="setposition('left')">
                  <span class="ti-align-left"></span>
                </b-btn>
                <b-btn v-on:click="setposition('center')">
                  <span class="ti-align-center"></span>
                </b-btn>
                <b-btn v-on:click="setposition('right')">
                  <span class="ti-align-right"></span>
                </b-btn>
              </b-btn-group>
            </span>
          </div>
        </div>
      </div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {
      imageSize: 20,
      imageData: null
    };
  },
  methods: {
    onFileSlected(event) {
      if (event.target.files && event.target.files[0]) {
        this.selectFile = event.target.files[0];
        var reader = new FileReader();
        reader.onload = e => {
          this.imageData = e.target.result;
          this.postApi.imageUpload(this.selectFile).then(response => {
            console.log(response);
            this.widgetType[this.selectedWidget.parentRow].columns[
              this.selectedWidget.column
            ].rows[this.selectedWidget.row].style[2].imgurl =
              response.data[0].files;
          });
        };
        reader.readAsDataURL(event.target.files[0]);
      }
    },
    highsize() {
      if (this.imageSize < 100) {
        this.imageSize = this.imageSize + 5;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.selectedWidget.column
        ].rows[this.selectedWidget.row].style[2].imgsize = this.imageSize;
      }
    },
    lowsize() {
      if (this.imageSize > 5) {
        this.imageSize--;
        this.imageSize = this.imageSize - 4;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.selectedWidget.column
        ].rows[this.selectedWidget.row].style[2].imgsize = this.imageSize;
      }
    },
    setposition(postion) {
      this.widgetType[this.selectedWidget.parentRow].columns[
        this.selectedWidget.column
      ].rows[this.selectedWidget.row].style[2].position = postion;
    }
  }
};
</script>

<style>
.file-upload {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: #1fb264;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #15824b;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: #6c9229;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all 0.2s ease;
}

.file-upload-content {
  /* display: none; */
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  border: 4px dashed #6c9229;
  position: relative;
  height: 100px;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color: #6c9229;
  border: 4px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text > span {
  font-weight: 100;
  text-transform: uppercase;
  color: #6c9229;
  line-height: 90px;
  font-size: 20px;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all 0.2s ease;
}
</style>
