<template>
<div class="choose-sms-plan">
		<div class="d-flex justify-center">
			<v-card outlined
			v-for="(plan, index) in plans"
			:key="plan.uid"
			width="212"
			class="mx-3 pa-6 text-center  align-self-center"
			:class="index == 2?'best-price-new-card':''">
				<div class="best-price-new-heading"
				v-if="index == 2"> Best price </div>
				<div class="subtitleNew-1 blackColor pa-0 ma-0 pb-3 z-index">
					{{ plan.plan_name }}
				</div>
				<div class="h4 primaryMain pb-2 z-index">
					<span class="h5">{{ plan.currency }} </span> {{ plan.price }}
				</div>
				<div class="subtitleNew-1 primaryMain pb-1 z-index">
					{{ plan.item_quantity }} {{ channel }}
				</div>
				<div class="smallNew-1 blackInactive z-index">
					<span class=""> {{ plan.currency }} </span> {{ plan.charge_per_item }} per {{ channel }}
				</div>
				<v-btn color="primary z-index"
				@click="onPlanSelect(plan)"
				depressed=""
				block=""
				class="primaryBtn mt-8">
					{{inputs.selectedPlan.uid==plan.uid?'Selected':'Select'}}
				</v-btn>
			</v-card>
		</div>
	</div>
</template>

<script>
export default {
		props: [ 'inputs', 'channel' ],

		data() {
			return {
				plans: [],
			}
		},

		mounted() {
			axios.get( '/api/purchase-communication-plans', {
				params: {
					channel: this.channel
				}
			} ).then( res => {
				this.plans = res.data.data;
				// this.$emit( 'update:inputs', {
				// 	...this.inputs,
				// 	selectedPlan: this.plans.first()
				// } );
			} )
		},

		methods: {
			onPlanSelect( plan ) {
				this.$emit( 'update:inputs', {
					...this.inputs,
					selectedPlan: plan
				} );
				this.$emit( "onSelected" );
			}
		}
	}
</script>
