<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Category</h1>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Description</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
          </span>
          <input class="form-control" type="text" name="description" v-model="category.description" />
        </div>
      </div>
    </div>
    <div v-if="!category.image" class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Image</label>
        <div class="input-group-prepend">
          <image-uploader
            :preview="true"
            :className="['fileinput', { 'fileinput--loaded': hasImage }]"
            capture="environment"
            :debug="1"
            doNotResize="gif"
            :autoRotate="true"
            outputFormat="verbose"
            @input="setImage"
          >
            <label for="fileInput" slot="upload-label">
              <figure>
                <path
                  class="path1"
                  d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
                ></path>
              </figure>
            </label>
          </image-uploader>
        </div>
      </div>
    </div>
    <div v-else class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <img :src="category.image" style="height:200px; width:200px; object-fit: cover;" />
        <br />
        <span class="input-group-text" align="center" style="width:150px" @click="removeImage()">
          <eva-icon name="trash-2-outline" fill="#24aae1"></eva-icon>Delete
        </span>
      </div>
    </div>
    <div class="row"></div>
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <div class="input-group-prepend">
          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageUploader from "vue-image-upload-resize";

export default {
  name: "Category",
  props: {
    editCategory: { default: {} }
  },
  components: {
    ImageUploader
  },
  data() {
    return {
      hasImage: false,
      category: {
        id: 0,
        image: null,
        description: ""
      }
    };
  },
  methods: {
    setImage: function(output) {
      this.hasImage = true;
      this.category.image = output.dataUrl;
    },
    Ok() {
      this.$emit("CategoryUpdate", this.category);
    },
    removeImage() {
      this.category.image = null;
    }
  },
  watch: {
    editCategory: {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.category = val;
        }
      }
    }
  }
};
</script>