<template>
  <section id="content">
    <div v-if="updated">
      <alert :text="'The listing fee has been updated!!'" :type="'SUCCESS'" />
    </div>
    <float-label label="Listing Fee" style="width: 100%;">
      <currency-input
        onClick="this.setSelectionRange(0, this.value.length)"
        name="fee"
        :value="value"
        @input="value = $event"
        v-model="fee"
        id="price"
        class="form-control uniInput"
        placeholder="Listing Fee"
        v-bind:class="{
          'is-valid': fee,
          'is-invalid': !requiredField(fee),
        }"
      />
    </float-label>
    <button @click="saveListingFee" class="btn-white-border mt-4">Save</button>
  </section>
</template>

<script>
/* eslint-disable */
import { mapActions, mapGetters, mapState } from 'vuex'
import alert from '../../shared/alert'
export default {
  components: {
    alert,
  },
  data() {
    return {
      fee: 0.0,
      updated: false,
    }
  },
  mounted() {
    this.pullListingFee()
  },
  methods: {
    ...mapActions('fees', ['retrieveListingFee', 'setListingFee']),
    saveListingFee() {
      var feeObj = {
        amount: parseFloat(this.fee),
        name: 'Listing Fee',
      }
      this.setListingFee(feeObj)
      setTimeout(() => {
        this.updated = true
      }, 200)
    },
    async pullListingFee() {
      await this.retrieveListingFee()
      this.fee = this.getListingFee.amount
    },
    requiredField: function (tfield) {
      if (tfield) {
        return true
      } else {
        return false
      }
    },
  },
  computed: {
    ...mapGetters('fees', ['getListingFee']),
    ...mapState('fees', ['listingFee']),
  },
}
</script>

<style lang="scss" scoped></style>
