<template>
  <accordion-card title="Ledenpagina">
    <v-row v-if="$store.getters.isAdmin || $store.getters.isOperator">
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black in_the_picture"
          >Gegevens tonen</v-subheader
        >
      </v-col>
      <v-col cols="12" sm="12" md="6" class="d-flex">
        <v-switch
          :disabled="!editMode"
          inset
          class="my-3 toggle"
          v-model="show_on_website"
        />
        <small class="my-4"
          ><strong>
            {{
              show_on_website
                ? 'Aan (Met het aanzetten van deze optie worden onderstaande gegevens op de website van GGZ Ecademy gepubliceerd. Ik verklaar daarvoor toestemming te hebben van degene wiens gegevens het betreft.)'
                : 'Uit'
            }}
          </strong>
        </small>
      </v-col>
      <v-col class="my-4" cols="12" sm="12" md="3">
        Bij 'Uit' wordt alleen het logo en de website link getoond
      </v-col>
    </v-row>
    

    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-subheader class="txt--text font-weight-black in_the_picture"
          >Helpdesk voor cursisten</v-subheader
        >
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Afdeling </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="helpdesk_department"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                helpdesk_department,
                $store.getters['members/revision'].helpdesk_department
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].helpdesk_department }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              helpdesk_department,
              $store.getters['members/revision'].helpdesk_department
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Contactpersoon </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="helpdesk_contact_person"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                helpdesk_contact_person,
                $store.getters['members/revision'].helpdesk_contact_person
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].helpdesk_contact_person }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              helpdesk_contact_person,
              $store.getters['members/revision'].helpdesk_contact_person
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Emailadres </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="helpdesk_email"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                helpdesk_email,
                $store.getters['members/revision'].helpdesk_email
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].helpdesk_email }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              helpdesk_email,
              $store.getters['members/revision'].helpdesk_email
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Telefoonnummer </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="helpdesk_phone"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                helpdesk_phone,
                $store.getters['members/revision'].helpdesk_phone
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].helpdesk_phone }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              helpdesk_phone,
              $store.getters['members/revision'].helpdesk_phone
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-subheader class="txt--text font-weight-black in_the_picture"
          >Informatie over scholing</v-subheader
        >
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Afdeling </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_department"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_department,
                $store.getters['members/revision'].info_department
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_department }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_department,
              $store.getters['members/revision'].info_department
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Contactpersoon </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_contacteperson"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_contacteperson,
                $store.getters['members/revision'].info_contacteperson
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_contacteperson }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_contacteperson,
              $store.getters['members/revision'].info_contacteperson
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Emailadres </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_email"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_email,
                $store.getters['members/revision'].info_email
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_email }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_email,
              $store.getters['members/revision'].info_email
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Telefoonnummer </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_phone"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_phone,
                $store.getters['members/revision'].info_phone
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_phone }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_phone,
              $store.getters['members/revision'].info_phone
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Straat </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_address"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_address,
                $store.getters['members/revision'].info_address
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_address }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_address,
              $store.getters['members/revision'].info_address
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Huisnummer </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_housenumber"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_housenumber,
                $store.getters['members/revision'].info_housenumber
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_housenumber }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_housenumber,
              $store.getters['members/revision'].info_housenumber
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Postcode </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_postal"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_postal,
                $store.getters['members/revision'].info_postal
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_postal }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_postal,
              $store.getters['members/revision'].info_postal
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Plaats </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_city"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_city,
                $store.getters['members/revision'].info_city
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_city }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_city,
              $store.getters['members/revision'].info_city
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Land </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_country"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_country,
                $store.getters['members/revision'].info_country
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_country }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_country,
              $store.getters['members/revision'].info_country
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Link </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="info_link"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                info_link,
                $store.getters['members/revision'].info_link
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].info_link }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              info_link,
              $store.getters['members/revision'].info_link
            )
          "
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-subheader class="txt--text font-weight-black in_the_picture"
          >Meer informatie</v-subheader
        >
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text"> Website url </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          :hide-details="!editMode"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
          v-model="more_info_link"
        >
          <template
            slot="append"
            v-if="
              $store.getters['members/revision'] &&
              !areEqualInputs(
                more_info_link,
                $store.getters['members/revision'].more_info_link
              )
            "
          >
            <span class="caption accent--text">
              {{ $store.getters['members/revision'].more_info_link }}
            </span>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <field-has-changes
          v-if="
            $store.getters['members/revision'] &&
            !areEqualInputs(
              more_info_link,
              $store.getters['members/revision'].more_info_link
            )
          "
        />
      </v-col>
    </v-row>
  </accordion-card>
</template>

<script>
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
import fieldHasChanges from '@/components/Members/FieldHasChanges'

export default {
  components: {
    accordionCard,
    fieldHasChanges,
  },
  props: {
    editMode: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    local() {
      return this.$store.state.members.local
    },
    show_on_website: {
      get() {
        return this.local.show_on_website
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'show_on_website',
          value,
        })
      },
    },
    helpdesk_department: {
      get() {
        return this.local.helpdesk_department
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'helpdesk_department',
          value,
        })
      },
    },
    helpdesk_contact_person: {
      get() {
        return this.local.helpdesk_contact_person
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'helpdesk_contact_person',
          value,
        })
      },
    },
    helpdesk_email: {
      get() {
        return this.local.helpdesk_email
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'helpdesk_email',
          value,
        })
      },
    },
    helpdesk_phone: {
      get() {
        return this.local.helpdesk_phone
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'helpdesk_phone',
          value,
        })
      },
    },
    info_department: {
      get() {
        return this.local.info_department
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_department',
          value,
        })
      },
    },
    info_contacteperson: {
      get() {
        return this.local.info_contacteperson
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_contacteperson',
          value,
        })
      },
    },
    info_email: {
      get() {
        return this.local.info_email
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_email',
          value,
        })
      },
    },
    info_phone: {
      get() {
        return this.local.info_phone
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_phone',
          value,
        })
      },
    },
    info_address: {
      get() {
        return this.local.info_address
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_address',
          value,
        })
      },
    },
    info_housenumber: {
      get() {
        return this.local.info_housenumber
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_housenumber',
          value,
        })
      },
    },
    info_postal: {
      get() {
        return this.local.info_postal
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_postal',
          value,
        })
      },
    },
    info_city: {
      get() {
        return this.local.info_city
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_city',
          value,
        })
      },
    },
    info_country: {
      get() {
        return this.local.info_country
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_country',
          value,
        })
      },
    },
    info_link: {
      get() {
        return this.local.info_link
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'info_link',
          value,
        })
      },
    },
    more_info_link: {
      get() {
        return this.local.more_info_link
      },
      set(value) {
        this.$store.commit('members/UPDATE_FIELD', {
          field: 'more_info_link',
          value,
        })
      },
    },
  },
  methods: {
    areEqualInputs(input1, input2) {
      return this.$store.getters['utils/areEquals'](input1, input2)
    },
  },
}
</script>

<style scoped>
.v-card >>> .v-subheader {
  padding: 0px !important;
}
</style> 