<template>
  <!-- eslint-disable max-len -->
  <main id="main" style="margin-top:-20px; padding-bottom:50px">
    <div v-if="loaded" class="container">
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <div class="section-header">
            <h2>Landing Pages</h2>
          </div>
        </div>
      </div>
      <div v-if="checkAccess" class="row">
        <div class="col">
          <listView
            @onNew="New"
            @onEdit="Edit"
            :items="campaigns"
            :editable="true"
            :deleteable="true"
            :displayColumns="columns"
            :displayFormats="formats"
            :showCustomAction="true"
            :CustomActionHeading="'Client View'"
            :sortKey="'startDate'"
            @onCustomClick="ClientVue"
            @onDelete="Delete"
          />
        </div>
      </div>
      <div v-else class="row">
        <div class="col">
          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
        </div>
      </div>
    </div>
    <div v-else id="preloader"></div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";

import Log from "../../assets/Log";
import alert from "../shared/alert";
import listView from "../shared/listView.vue";

export default {
  name: "LandingPages",
  components: {
    listView,
    alert
  },
  data() {
    return {
      columns: ["name", "startDate", "endDate", "subject"],
      formats: ["text", "date", "date", "text"],
      loaded: false
    };
  },
  methods: {
    ...mapActions("campaign", ["getCampaigns", "deleteCampaign"]),
    Edit(item) {
      this.$router.push(`/landingPage/${item.id}`);
    },
    Delete(item) {
      this.deleteCampaign(item.id);
    },
    // Publish(item) {
    //   this.publishProperty(item);
    // }
    New() {
      this.$router.push("/newLandingPage");
    },
    ClientVue(item) {
      this.$router.push(`/MarketingCampaign/${item.id}`);
    },
    async loadData() {
      await this.getCampaigns();
      await this.$emit("setLandingPage", false);
    }
  },
  mounted() {
    this.loadData().then(() => {
      this.loaded = true;
    });
  },
  computed: {
    ...mapState("campaign", ["campaigns"]),
    checkAccess() {
      if (Log.getUser().role === "Super Admin" || Log.getUser().role === "Designer") {
        return true;
      } else {
        return false;
      }
    }
    // UserChanged() {
    //   this.getProperties(Object.assign(this.user.id));
    //   return this.user;
    // }
  },
  watch: {
    // UserChanged() {
    //   console.log(this.user);
    // }
  }
};
</script>
