<template>
    <view :class="status !== 1 ? 'gray-scale' : ''" class="card flex mt-[20rpx]">
        <view class="left text-center">
            <view class="pt-[36rpx] text-[#ff2c3c]">
                <text class="text-2xl text-semibold">￥</text
                ><text class="text-[40rpx] text-semibold">{{ item.money }}</text>
            </view>
            <view class="pt-[8rpx] pb-[32rpx] text-muted text-[24rpx] truncate">{{
                item.coupon_describe
            }}</view>
        </view>

        <view class="right flex-1 px-[20rpx] pt-[20rpx] bg-white">
            <u-image
                v-show="item.btn === 2 || showDoneBtn"
                class="img"
                src="@/static/images/received.png"
                width="70"
                height="54"
            />
            <view class="title text-lg text-[#333] font-medium pb-[16rpx] truncate">{{
                item.name
            }}</view>
            <view class="flex justify-between">
                <view
                    class="date text-xs text-[#666] py-[11rpx]"
                    :class="{ 'w-[307rpx] break-all': showBtn }"
                >
                    <view v-if="item.is_countdown && timeStamp >= 0" class="text-[#ff2c3c] flex">
                        即将过期，仅剩余

                        <u-count-down
                            :timestamp="timeStamp"
                            format="HH:mm:ss"
                            :font-size="24"
                            :separator-size="26"
                            @end="timeStamp = 0"
                        />
                    </view>
                    <text v-else>{{ item.use_time_desc }}</text>
                </view>

                <view v-if="showBtn" class="btns flex-1">
                    <!-- 1-立即领取;2-继续领取;3-已领完; -->
                    <button
                        class="btn-one text-[#ff2c3c] bg-white"
                        v-if="item.btn !== 3 && showDoneBtn"
                        @click="goPage"
                    >
                        去使用
                    </button>
                    <button
                        class="btn-two bg-[#ff2c3c] text-white"
                        v-if="item.btn === 1 && !showDoneBtn"
                        @click="toReceive(item.id)"
                    >
                        立即领取
                    </button>
                    <button
                        class="btn-two bg-[#ff2c3c] text-white"
                        v-if="item.btn === 2 && !showDoneBtn"
                        @click="toReceive(item.id)"
                    >
                        继续领取
                    </button>
                    <button class="btn-three bg-[#ccc] text-white" v-if="item.btn === 3" disabled>
                        已领完
                    </button>
                </view>
            </view>

            <view class="footer flex justify-between py-[8rpx] mt-[16rpx]">
                <!-- 1=全部商品；2=指定商品；3=指定商品不可用 -->
                <view class="text-xs text-[#666]" v-if="item?.use_goods_type === 1"
                    >全部商品可用</view
                >
                <view class="text-xs text-[#666]" v-if="item?.use_goods_type === 2"
                    >指定商品可用</view
                >
                <view class="text-xs text-[#666]" v-if="item?.use_goods_type === 3"
                    >指定商品不可用</view
                >
                <u-icon
                    v-show="item?.use_goods_type !== 1 && !isShow"
                    name="arrow-up"
                    @click="isShow = !isShow"
                />
                <u-icon
                    v-show="item?.use_goods_type !== 1 && isShow"
                    name="arrow-down"
                    @click="isShow = !isShow"
                />
            </view>
        </view>
    </view>
    <view class="bg-white py-[15rpx] px-[20rpx]" v-show="isShow">
        <view class="text-[#999] text-xs pt-2">{{
            item.use_goods_type === 3 ? '不可用商品：' : '可用商品：'
        }}</view>
        <view v-for="iten in item.goods" :key="iten.id" class="text-[#999] text-xs pt-2">{{
            iten.name
        }}</view>
    </view>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
// import { apiReceiveCoupon } from '@/api/coupon'

const props = withDefaults(
    defineProps<{
        item: any
        status?: number | undefined | string // 状态:1-未使用;2-已使用;3-已过期
        showBtn?: boolean // 是否显示按钮
    }>(),
    {
        item: {},
        status: 1,
        showBtn: true
    }
)

const timeStamp = ref<number | string | undefined>()
const StartTime = Date.now() / 1000
const EndTime = +props.item.invalid_time
watchEffect(() => {
    timeStamp.value = Math.floor(EndTime - StartTime) * 1000
})

const isShow = ref(false)

// 去领优惠券
const showDoneBtn = ref(false)
const toReceive = async (id) => {
    // try {
    //     await apiReceiveCoupon({ id })
    //     uni.$u.toast('领取成功')
    //     showDoneBtn.value = true
    // } catch (error) {
    //     uni.$u.toast(error)
    // }
}

// 页面跳转
const goPage = () => {
    uni.navigateTo({
        url: '/pages/index/index'
    })
}
</script>

<style lang="scss" scoped>
.card {
    -webkit-mask-image: radial-gradient(circle at 178rpx 10rpx, transparent 10rpx, red 11rpx),
        radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
    -webkit-mask-size: 100%, 4rpx 8rpx;
    -webkit-mask-repeat: repeat, repeat-y;
    -webkit-mask-position: 0 -10rpx, 175rpx;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    .left {
        box-sizing: border-box;
        width: 180rpx;
        background: linear-gradient(to right, #ff2c3c 11rpx, white 15rpx);

        border-top-left-radius: 14rpx;
        border-bottom-left-radius: 14rpx;
    }
    .right {
        position: relative;
        .img {
            position: absolute;
            right: 0;
            top: 0;
        }
        .btn-one,
        .btn-two,
        .btn-three {
            height: 52rpx;
            line-height: 52rpx;
            border-radius: 9999rpx;
            border: 1rpx solid #ff2c3c;
            font-weight: 400;
            font-size: 24rpx;
        }
        .btn-three {
            border: 1rpx solid #ccc;
        }
        .footer {
            border-top: 1px solid #eaeaea;
        }
    }
}
.gray-scale {
    filter: grayscale(1);
}
</style>
