<template>
  <div class="snt-tracking">
    <v-container class="snt-tracking__container">
      <div class="snt-tracking__title">
        <slot name="header">
          ติดตามขนส่ง
        </slot>
      </div>
      <template v-if="loading">
        <div class="text-center">
          <v-progress-circular
            :size="14"
            :width="1"
            color="secondary"
            indeterminate
          />
        </div>
      </template>
      <div
        v-else
        class="snt-tracking__content">
        <div class="snt-tracking__content-info">
          <div class="mr-12">
            <div class="snt-tracking__content-info-title">
              ส่งผ่าน
            </div>
            <div class="snt-tracking__content-info-subtitle">
              {{ shipping }}
            </div>
          </div>
          <div class="mr-2">
            <div class="snt-tracking__content-info-title">
              เลขพัสดุ
            </div>
            <div class="snt-tracking__content-info-subtitle">
              {{ packNumber }}
            </div>
          </div>
          <input
            ref="copy"
            type="hidden"
            :value="order.closedNote">
          <v-btn
            class="snt-tracking__content-copy"
            text
            @click="copyPackNumber()">
            คัดลอก
          </v-btn>
        </div>
        <div class="snt-tracking__content-info-title">
          สถานะขนส่ง
        </div>
        <div class="snt-tracking__content-shipping-list">
          <div
            v-for="(status, i) in order.shippingStatus"
            :key="`shipping-status-${i}`"
            class="d-flex align-center mb-6">
            <v-icon
              class="mr-2"
              x-small>
              mdi-checkbox-blank-circle
            </v-icon>
            <div>
              <span> {{ status.timestamp | formatDate }} </span>
              <div>
                {{ status.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </v-container>
  </div>
</template>

<script>
import {
  GET_SALEPAGE_TRACKING
} from '@/resources/graphql'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'SntTracking',
  apollo: {
    salePage: () => ({
      fetchPolicy: 'network-only',
      query: GET_SALEPAGE_TRACKING,
      skip () {
        return !this.customerId || !this.subdomain
      },
      variables () {
        return {
          domain: this.subdomain,
          customerId: this.customerId,
          orderId: this.orderId
        }
      },
      result ({ data: { salePage: { findCustomer } } }) {
        this.order = findCustomer.orderList.nodes[0]
      }
    })
  },
  props: {
    orderId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      order: {
        id: null,
        shippingType: null,
        closedNote: null,
        shippingStatus: null,
        shippingLinkClosedNote: null
      }
    }
  },
  computed: {
    ...mapGetters({
      customer: 'salePage/customer',
      subdomain: 'salePage/subdomain'
    }),
    customerId () {
      return this.customer?.id
    },
    loading () {
      return this.$apollo.queries.salePage.loading
    },
    shipping () {
      return this.order?.shippingType || '-'
    },
    packNumber () {
      return this.order?.closedNote || '-'
    }
  },
  methods: {
    ...mapActions({
      showErrorMessage: 'notify/showErrorMessage',
      closeErrorMessage: 'notify/closeErrorMessage'
    }),
    async copyPackNumber () {
      const res = await this.$copyText(this.packNumber)
      if (res) {
        this.showErrorMessage({
          message: 'คัดลอกเสร็จสิ้น',
          type: 'success',
          closeable: true
        })
        setTimeout(() => {
          this.closeErrorMessage()
        }, 5000)
      }
    }
  }
}
</script>

<style scoped>
  .snt-tracking {

  }
  .snt-tracking__container {
    background-color: #FFFFFF;
    color: #6B6B6B;
  }
  .snt-tracking__title {
    display: flex;
    font-size: 1.125rem;
    font-weight: 400;
    padding: 12px;
  }
  .snt-tracking__content {
    font-weight: 400;
    padding: 12px;
  }
  .snt-tracking__content-info {
    display: flex;
    align-items: flex-end;
    margin-bottom: 16px;
  }
  .snt-tracking__content-info-title {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 4px;
  }
  .snt-tracking__content-info-subtitle {
    font-weight: 400;
  }
  .snt-tracking__content-copy.v-btn {
    height: 24px;
    font-weight: 400;
    padding: 0px;
    color: var(--v-primary-base);
  }
  .snt-tracking__content-shipping-list {
    max-height: 330px;
    overflow-y: auto;
    font-weight: 400;
  }
</style>
