<template>
  <div class="snt-address-list">
    <div class="snt-address-list__header">
      <v-btn
        :ripple="false"
        class="snt-address-list__button-back v-btn--active"
        plain
        @click="goBack()">
        <v-icon small>
          mdi-chevron-left
        </v-icon>
        กลับ
      </v-btn>
    </div>
    <v-container class="snt-address-list__content">
      <div class="snt-address-list__title">
        <span> ที่อยู่ของคุณ </span>
        <v-spacer />
      </div>
      <div class="snt-address-list__lists">
        <template v-for="(list, i) in customer.addressList">
          <div
            :key="`customer-address-${i}`"
            class="snt-address-list__card mb-5"
            outlined>
            <div class="snt-address-list__card-title">
              <div class="d-flex align-center">
                <span class="mr-2"> ที่อยู่จัดส่ง </span>
                <v-chip
                  v-if="isCurrentAddress(list)"
                  class="snt-address-list__chip"
                  color="success">
                  ใช้งานอยู่
                </v-chip>
              </div>
              <v-spacer />
            </div>
            <div class="snt-address-list__card-text">
              <v-row
                class="mt-4"
                no-gutters>
                <v-col cols="8">
                  <p>
                    {{ list.name }} {{ list.tel }}
                  </p>
                  <div>{{ list.address }} {{ list.postcode }}</div>
                  <div>{{ list.email }}</div>
                </v-col>
                <v-col>
                  <div class="text-right">
                    <v-btn
                      class="snt-address-list__button"
                      color="primary"
                      depressed
                      @click="select(list)">
                      ใช้งาน
                    </v-btn>
                  </div>
                </v-col>
              </v-row>
            </div>
          </div>
        </template>
      </div>
    </v-container>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'AddressList',
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters({
      customer: 'salePage/customer'
    }),
    breakpoint () {
      return this.$vuetify.breakpoint
    },
    currentAddress () {
      return `${this.customer.address}`
    }
  },
  methods: {
    ...mapActions({
      setAddress: 'salePage/setAddress'
    }),
    isCurrentAddress (item) {
      const isEqualAddress = `${item.address} ${item.postcode}` === this.customer.address
      const isEqualEmail = item.email === this.customer.email
      const isEqualName = item.name === this.customer.name
      return isEqualAddress && isEqualEmail && isEqualName
    },
    select (selected) {
      this.setAddress({
        address: `${selected.address} ${selected.postcode}`,
        name: selected.name,
        postcode: selected.postcode,
        tel: selected.tel,
        email: selected.email
      })
      this.$emit('select')
    },
    changeNewDialog (dialog) {
      if (dialog) {
        this.goBack()
      }
    },
    goBack () {
      this.$emit('click:close')
    }
  }
}
</script>

<style scoped>
  .snt-address-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f4f6fa;
    height: 100vh;
  }
  .snt-address-list__header {
    background-color: #FFFFFF;
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
  }
  .snt-address-list__content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .snt-address-list__title {
    display: flex;
    font-size: 1.25rem;
    margin: 24px 0px;
  }
  .snt-address-list__lists {
    overflow: auto;
  }
  .snt-address-list__card {
    background-color: #FFFFFF;
    width: 100%;
    border-radius: 14px;
    padding: 24px;
  }
  .snt-address-list__card-title {
    width: 100%;
    display: flex;
  }
</style>
