<template>
  <div class="columns is-multiline mx-0" v-if="userpack? userpack.length>0 : false">
    <div class="column is-4 my-0 py-0" v-for="v in userpack">
    <div :class="`px-5 py-4 ${v.expiry? 'has-background-light' : 'has-background-light'}`" style="border: 1px solid #D3D3D3; border-radius: 10px; margin-top: 25px;">
      <div class="field is-grouped">
      <div class="control is-expanded">
        <Caption v-bind="{title: 'Gói dịch vụ', type: `has-text-${v.status__code==='buy'? 'primary' : 'findata'}`}"></Caption>
      </div>
      <div class="control">
        <span class="tag is-medium is-danger" v-if="v.expiry"><span class="fs-18">Hết hạn</span></span>
        <span class="tag is-medium is-primary is-clickable" v-else-if="v.package__code==='basic'" @click="upgrade(v)">
          <span class="fs-18">Nâng cấp</span>
        </span>
        <span class="tag is-medium is-success ml-4" v-if="!v.expiry">
          <span class="icon-text">
          <span class="material-symbols-outlined fs-18">check</span>
          <span class="fs-18 ml-1">Active</span>
        </span>
        </span>
      </div>
      </div>
      <p class="fsb-16">
        <span>{{ v.package__name }}</span>
      </p>
      <Caption class="mt-5" v-bind="{title: 'Thời hạn sử dụng', type: `has-text-${v.status__code==='buy'? 'primary' : 'findata'}`}"></Caption>
      <p class="fsb-16">
        <span>{{ $dayjs(v.from_date).format('DD/MM/YYYY') }}</span>
        <span class="px-2">-</span>
        <span>{{ $dayjs(v.to_date).format('DD/MM/YYYY') }}</span>
      </p>
      <Caption class="mt-5" v-bind="{title: 'Trạng thái', type: `has-text-${v.status__code==='buy'? 'primary' : 'findata'}`}"></Caption>
      <p class="fsb-16">
        <span>{{ v.status__name }}</span>
      </p>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userpack: undefined
    }
  },
  async created() {
    let arr = await this.$getdata('userpack', {user: this.$store.state.login.id}, undefined)
    arr.map(v=>{
      let diff = this.$dayjs(v.to_date).diff(this.$dayjs(), 'day')
      if(!v.expiry && diff<0) v.expiry = true
    })
    this.userpack = arr
    let trial = this.$find(arr, {status__code: 'trial'})
    let buy = arr.find(v=>v.status__code!=='trial' && v.expiry===false)
    let data = {userpack: arr, trialInfo: trial? (trial.expiry? 'expiry' : 'active') : 'no', trial: trial, buy: buy}
    this.$emit('info', data)
  },
  methods: {
    upgrade(v) {
      if(v.status__code==='trial') this.$router.push({path: '/service/trial-upgrade', query: {id: v.id}})
      else {
        this.$dialog(`Quý khách đang sử dụng gói dịch vụ <b>${v.package__name}</b>. 
          Để nâng cấp lên <b>gói cao hơn</b> vui lòng liên hệ với nhân viên của chúng tôi để được hỗ trợ. Xin cảm ơn.`,
        'Liên hệ')
      }
    }
  }
}
</script>