<template>
    <q-card flat class="q-pa-md q-mt-lg">
        <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">（可用優惠券 0 張）</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">
                    <div class="cursor-pointer">
                        <div class="coupon-head">
                            <div class="check-tools">
                                <q-checkbox v-model="chosenCouponId" :value="1" 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">
                                        {{ 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 :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="1==2">
                <p>
                  <img src="~assets/sad.svg" style="width: 50px" />
                </p>
                <p class="f12 text-grey-6">沒有找到可用優惠券</p>
            </div>
        </div>
    </q-card>
</template>

<script>
export default {
    props:["goodsInfo"],
    computed: {
        filedWidth() {
            return {
                "col-12": this.$q.screen.width < 1200,
                "col-4": this.$q.screen.width >= 1200,
            };
        }
    },
    data() {
        return {
            showDisable:false,
            isExplends:false,
            chosenCouponId:false
        };
    },
    methods: {
        changeDiscountHandler(){
            
        }
    },
}
</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>