<template>
  <div class="ac-cart"
    :style="{ backgroundColor: color }"
    @click="toCart">
    <div class="ac-cart__img"></div>
    <div class="ac-cart__count">{{ cartCount+model || 0 }}</div>
    <slot></slot>
  </div>
</template>

<script>
import { Cart } from '@freshservice/bridge'
import { GetCartCounts } from '@roto/bridge'
import { CITY, TOKEN } from '../../../utils/token.js'
export default {
  name: 'AcCart',
  data () {
    return {
      test: process.env.NODE_ENV !== 'production',
      cartCount: undefined,
      city: CITY.get(),
      token: TOKEN.get()
    }
  },
  created () {
    if (this.count) {
      GetCartCounts.init().execute().success(res => {
        this.cartCount = +res.data.Data
      })
    }
  },
  props: {
    value: {},
    color: {
      type: String,
      default: '#e6a23c'
    },
    count: Boolean
  },
  computed: {
    model: {
      get () {
        return this.value || 0
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    toCart () {
      setTimeout(() => {
        Cart.init({ test: this.test }).execute()
      }, 500)
    }
    // async GetCartCount () {
    //   const response = await GetCartCount(this.city, this.token)
    //   this.cartCount = +response.data.Data
    //   return response
    // }
  }
}
</script>
