<template>
  <layout :isNavBar="isNavBar" padding="24px 16px 16px" :bgImgName="currentLoading ? 'bg' : ''">
    <div class="zero-yuan-claim" v-if="currentLoading">
      <img
        class="zero-yuan-claim-title"
        src="@/assets/image/claimCloudPhone/zero-yuan-claim-title.png"
      />
      <div>
        <template v-for="item in packageList">
          <setMealItem
            :key="item.serialNumber"
            :data="item"
            v-if="item.mealList && item.mealList.length"
            :type="1"
          />
        </template>
      </div>
    </div>
    <van-dialog
      v-model="visible"
      confirmButtonText="返回上一页"
      confirmButtonColor="#169bd5"
      close-on-click-overlay
      @confirm="$router.go(-1)"
    >
      <div class="dialog-tips">
        很抱歉<br />
        {{ $route.query.userCardId ? ' 您的套餐不支持此活动进行续费' : '暂时没有可选择的套餐' }}
      </div>
    </van-dialog>
  </layout>
</template>

<script>
import layout from './components/layout.vue';
import setMealItem from './components/setMealItem.vue';
import common from './mixins/common.js';
export default {
  name: 'zeroYuanClaim',
  auth: false,
  head: {
    title: '0元购机，尽情享受',
  },
  mixins: [common],
  components: { layout, setMealItem },
  data() {
    return {
      isNavBar: true,
    };
  },
  mounted() {
    const { userCardId, inviteeExits = 0 } = this.$route.query;
    this.isNavBar = !+inviteeExits;
    const obj = {
      personnelMealType: 1,
    };
    if (userCardId) obj.userCardId = userCardId;
    this.getActivitySortRuleAndActivityMealList(obj);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.zero-yuan-claim {
  height: 100%;
  .zero-yuan-claim-title {
    height: 40px;
    margin: 0 auto;
    display: block;
  
  }
}

.dialog-tips{
  text-align: center; 
  padding: 15px; 
  color: #999
}
</style>
