<template>
    <q-card flat class="q-pa-md q-mt-lg" v-if="coupons">
        <div class="row items-center">
            <div class="text-subtitle1 text-weight-bolder q-mb-md col">
                <span>優惠券</span>
                <span class="text-weight-regular q-ml-sm text-body2">（可用優惠券 {{ coupons.length }} 張）</span>
            </div>
            <!-- <q-toggle v-model="showDisable" label="顯示不可用優惠券" style="zoom:0.8;margin-top: -24px;" v-if="isExplends"/> -->
            <q-icon :name="isExplends?'keyboard_arrow_up':'keyboard_arrow_down'" @click="$event=>isExplends=!isExplends" size="32px" color="grey-9" class="q-ml-md cursor-pointer" style="margin-top:-10px;"/>
            
        </div>
        <div v-if="isExplends">
            <div class="row q-col-gutter-md">
                <div :class="filedWidth" v-for="(x,i) in coupons" :key="i">
                    <div class="cursor-pointer" :class="{'unUsed':currentPrice<x.useCondition}">
                        <div class="coupon-head">
                            <div class="check-tools" v-if="currentPrice>=x.useCondition">
                                <q-checkbox v-model="chosenCouponId" :val="x.couponId" @input="changeDiscountHandler" label="" dense color="teal" />
                            </div>
                            <div class="q-pa-lg  q-mt-lg">
                                <div class="row items-center">
                                    <div class="text-h4 text-weight-bold text-white col" v-if="x.couponsType==1">
                                        {{ moneyFormat(x.denomination,2) }}
                                    </div>
                                    <div class="text-h4 text-weight-bold text-white col" v-if="x.couponsType==2">
                                        {{ x.denomination }}
                                        <span class="q-ml-sm text-weight-thin text-subtitle1">折</span>
                                    </div>
                                    <div class=" f12 text-white">滿 {{ x.useCondition }} 可用</div>
                                </div>
                                <div class="q-mt-sm f12" style="color:#195954">有效期至：{{ x.expirationDate}}</div>
                            </div>
                        </div>
                        <div class="q-px-lg q-py-md coupon-content">
                            <div class="row">
                                <div class="col-5">適用平台：</div>
                                <div class="">全平台通用</div>
                            </div>
                            <div class="row q-mt-sm">
                                <div class="col-5">使用品類：</div>
                                <div class="">{{ x.rangeName }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div :class="filedWidth">
                    <div class="unUsed">
                        <div class="coupon-head">
                            <div class="q-pa-lg  q-mt-lg">
                                <div class="row items-center">
                                    <div class="text-h4 text-weight-bold text-white col">
                                        {{ moneyFormat(500,2) }}
                                    </div>
                                    <div class=" f12 text-white">滿 2000 可用</div>
                                </div>
                                <div class="q-mt-sm f12" style="color:#195954">有效期至：2023.02.30</div>
                            </div>
                        </div>
                        <div class="q-px-lg q-py-md coupon-content">
                            <div class="row">
                                <div class="col-5">適用平台：</div>
                                <div class="">全平台通用</div>
                            </div>
                            <div class="row q-mt-sm">
                                <div class="col-5">使用品類：</div>
                                <div class="">多日遊行程適用</div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
            <div class="text-center q-mt-lg" v-if="coupons.length==0">
                <p>
                  <img src="~assets/sad.svg" style="width: 50px" />
                </p>
                <p class="f12 text-grey-6">沒有找到可用優惠券</p>
            </div>
        </div>
    </q-card>
</template>

<script>
import EnumHelper from 'src/utils/enumhelper';
import ProductTypeEnum from 'src/utils/producttypeenum';
import {date} from 'quasar'
export default {
    props:{
        productType:{
            type:Number,
            required:true
        },
        currentPrice:{
            type:Number,
            required:false,
            default:0
        }
    },
    computed: {
        filedWidth() {
            return {
                "col-12": this.$q.screen.width < 1200,
                "col-4": this.$q.screen.width >= 1200,
            };
        }
    },
    data() {
        return {
            showDisable:false,
            isExplends:false,
            chosenCouponId:[],
            couponsUseScope:1,
            coupons:null
        };
    },
    created() {
        this.couponsUseScope = this.productType+1
        this.getProductCouponHandler()
    },
    methods: {
        changeDiscountHandler(x){
            if(this.chosenCouponId.length>1){
                this.chosenCouponId.splice(0,1)
            }
            let t= null
            if(this.chosenCouponId.length==1){
                t=this.coupons.find(x=>x.couponId==this.chosenCouponId[0])
                if(t.couponsType==1){
                    t.discountMoney=t.denomination
                }else{
                    t.discountMoney=((1-parseFloat(t.denomination)/10.0)*parseFloat(this.currentPrice)).toFixed(2)
                }
            }
            this.$emit("change",t)
        },
        getProductCouponHandler(){
            this.apiJavaPost(
                "/api/b2b/user/getUserCanUseCouponList",
                {
                    lineId:0,
                    lineteamId:0,
                    CouponsUseScope:this.couponsUseScope
                },
                res => {
                    this.coupons = res.data.data
                    if(this.coupons && this.coupons.length>0){
                        this.coupons.forEach(x=>{
                            x.rangeName = EnumHelper.ParseToEnum(ProductTypeEnum,this.couponsUseScope,'value').desc
                            x.expirationDate = date.formatDate(x.expirationDate,'YYYY.MM.DD')
                        })
                        this.isExplends = this.coupons.length>0
                    }else{
                        this.coupons = []
                    }
                    
                },
                null
            );
        },
    },
}
</script>

<style>
    .coupon-item{
        box-shadow: 0px 10px 20px 0px rgb(76 87 125 / 20%) !important;
    }
    .unUsed .coupon-head{
        background: #DDD !important;

    }
    .unUsed .coupon-head *{
        color:#AAA !important;
    }
    .coupon-head{
        height: 138px;
        background: #67CAC2;
        position: relative;
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .coupon-head .check-tools{
        position: absolute;
        top:10px;
        right: 10px;
    }
    .coupon-content{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background: #f9f9f9;
    }
    .coupon-head::before{
        content: ' ';
        display: inline-block;
        width:30px;
        height: 30px;
        border-radius: 30px;
        background: #FFF;
        position: absolute;
        top:-15px;
        left: 50%;
        margin-left: -15px;
    }
    .coupon-head::after{
        content: ' ';
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 8px;
        background-image: radial-gradient(circle, #f9f9f9, #f9f9f9 9px, #f9f9f9 9px, #f9f9f9 10px, transparent 10px, transparent);
        background-size: 16px 20px;
    }
</style>