import Vue from 'vue'
import './SntTracking.scss'
import { VIcon, VProgressCircular } from 'vuetify/lib'
import { mapGetters } from 'vuex'
import {
  GET_SALEPAGE_TRACKING
} from '../../resources/graphql'

export default Vue.extend({
  name: 'SntTracking',
  components: { VIcon, VProgressCircular },
  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: {
    async copyPackNumber () {
      const res = await this.$copyText(this.packNumber)
      if (res) {
        this.$shipnity.notification.success('คัดลอกเสร็จสิ้น')
      }
    }
  },
  template: `
    <div class="snt-tracking">
      <snt-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">
            <snt-button
              class="snt-tracking__content-copy"
              color="primary"
              text
              @click="copyPackNumber()">
              คัดลอก
            </snt-button>
          </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">
              <snt-icon
                class="mr-2"
                icon="mdi-checkbox-blank-circle"
                x-small />
              <div>
                <span> {{ status.timestamp | formatDateTime }} </span>
                <div>
                  {{ status.description }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </snt-container>
    </div>
  `
})
