<template>
    <view class="card flex mt-[20rpx]" :class="{ 'gray': !isHidden }">
        <view class="card__top">
            <view class="card__left">
                <text class="font-bold text-xl">{{ item.name }}</text>
                <text>{{ couponDesc(item) }}</text>
                <text class="useTime">使用有效期：2023.08.25-2023.09.25</text>
                <view class="detail" @click="handleToggle(item)">
                    <text>详细信息</text>
                    <text :class="['icon', { 'active': item.isToggle }]"></text>
                </view>
                <!-- 已使用、已过期 -->
                <!-- <view class="outime" v-if="!isHidden">
                    <text>{{ textMap[tabStatus!] }}</text>
                </view> -->
                <slot name="selection"></slot>
            </view>
            <view class="card__right">
                <text>￥<text class="money">20.00</text></text>
                <text class="label">立减券</text>
                <text v-if="isHidden" class="btn__link" @click="handleNavigate">立即使用</text>
                <slot name="manual"></slot>
            </view>
        </view>
        <view class="card__bottom" v-show="item.isToggle">
            <view>限品类：仅可购买生鲜部分商品</view>
            <view>券编号：35394387276</view>
        </view>
    </view>
</template>

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

interface CouponProp {
    name: string
    money: number
    getType: number //发放方式
    channelType: number //分销员/指定用户
    useGoodsType: number,//优惠券类型
    conditionType: number,//使用门槛
    sendTimeStart: number, //发放开始时间
    sendTimeEnd: number,//发放结束时间
    useTimeStart: number,//使用开始时间
    useTimeEnd: number,//使用结束时间
    sendTotal: number,
    sendTotalType: number//发放数量
    getNum: number, //领取数量
    status: number,//发放状态
    conditionMoney: number | string,//有门槛金额
    distributors: any[]//渠道选中分销员
    goodsCategoryDetailVos: any[],//品类券选中值
    goodsDetailVos: any[]//商品券选中列表
    isToggle?: boolean //是否展开
}
const props = withDefaults(
    defineProps<{
        item: any
        status?: number | undefined | string // 状态:1-未使用;2-已使用;3-已过期
        showBtn?: boolean // 是否显示按钮
    }>(),
    {
        item: {},
        status: 1,
        showBtn: true
    }
)
const textMap: Record<number, string> = {
    2: '已使用',
    3: '已过期'
}
const parent = inject(COUPON_INJECTION_KEY)

const tabStatus = computed(() => parent?.tabStatus.value)
const isHidden = computed(() => tabStatus.value === 1) /**status：已使用不可见 */

/*优惠券类型+有门槛/优惠券类型+无门槛*/
function generateCouponText(row: any) {
    const { useGoodsType, conditionType, conditionMoney, money } = row
    const conditions = [
        { useGoodsType: 1, conditionType: 1 },
        { useGoodsType: 1, conditionType: 2 },
        { useGoodsType: 2, conditionType: 1 },
        { useGoodsType: 2, conditionType: 2 },
        { useGoodsType: 3, conditionType: 1 },
        { useGoodsType: 3, conditionType: 2 },
    ]
    const useGoodsTypeMap: Record<number, string> = {
        1: '所有',
        2: '相应品类',
        3: '相应商品'
    }
    const flag = conditions.some(condition => condition.useGoodsType === useGoodsType && condition.conditionType === conditionType)
    if (!flag) return
    const condition = conditionType === 1 ? `消费立减${money}` : `满${money}减${conditionMoney}`
    return `${useGoodsTypeMap[useGoodsType]}服务${condition}元`
}

const couponDesc = computed(() => (row: CouponProp) => generateCouponText(row))

/**切换显示详细信息 */
const handleToggle = (item: CouponProp) => {
    item.isToggle = !item.isToggle
}

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
})

/**
 * 1、通用券：跳转到首页
 * 2、品类券：对应品类页面
 * 3、商品券：对应商品页面
 */
const navigateMap: Record<number, string> = {
    1: '/pages/index/index',
    2: '/bundle/pages/category_goods_coupon/goods_category',
    3: '/bundle/pages/category_goods_coupon/goods'
}
const handleNavigate = (e: Event) => {
    e.stopPropagation()
    const { useGoodsType } = props.item
    const url = navigateMap[useGoodsType]
    uni.navigateTo({ url: url })
}
</script>

<style lang="scss" scoped>
.card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: 0 8rpx 20rpx 0 #F3F3F4;
    margin: 30rpx;
    overflow: hidden;

    &__top {
        display: flex;

        .card__left {
            flex: 1;
            display: flex;
            flex-direction: column;
            line-height: 1.8;
            background-color: #fff;
            padding: 20rpx;
            border-radius: 12rpx;
            position: relative;

            .useTime {
                font-size: 22rpx;
            }

            .detail {
                color: #999;
                font-size: 20rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .icon {
                    width: 20rpx;
                    height: 20rpx;
                    background-color: #999;
                    border-radius: 999px;
                    position: relative;

                    &::before {
                        content: '';
                        width: 6rpx;
                        height: 6rpx;
                        border-left: 1px solid #fff;
                        border-bottom: 1px solid #fff;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%) rotate(-45deg);
                    }

                    &.active {
                        &::before {
                            transform: translate(-50%, -50%) rotate(135deg);
                        }
                    }
                }
            }

            .outime {
                position: absolute;
                top: 6rpx;
                right: -78rpx;
                padding: 10rpx 80rpx;
                background-color: #777;
                color: #fff;
                transform: rotate(45deg);
                font-size: 24rpx;
            }

        }

        .card__right {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-image: linear-gradient(to left, #495aff 0%, #4481eb 100%);
            color: #fff;
            // background-image: linear-gradient(45deg, #FEF4F0 0%, #ffdde1 100%);
            // color: #fc5531;
            padding: 20rpx;
            border-radius: 12rpx;

            .money {
                font-size: 40rpx;
            }

            &::before {
                content: '';
                position: absolute;
                top: -10rpx;
                left: -10rpx;
                width: 20rpx;
                height: 20rpx;
                background-color: #F8F8F9;
                border-radius: 100%;
            }

            &::after {
                content: '';
                position: absolute;
                bottom: -10rpx;
                left: -10rpx;
                width: 20rpx;
                height: 20rpx;
                background-color: #F8F8F9;
                border-radius: 100%;
                z-index: 1;
            }

            .label {
                font-size: 24rpx;
            }

            .btn__link {
                background-color: #fff;
                color: #485FFC;
                padding: 8rpx 16rpx;
                font-size: 20rpx;
                border-radius: 999px;
                margin-top: 16rpx;
            }

        }

    }

    &__bottom {
        width: 100%;
        padding: 12rpx 20rpx;
        border-top: 1px solid #eee;
        background-color: #fff;
        box-sizing: border-box;
        font-size: 20rpx;
        line-height: 1.8;
        color: #999;
        z-index: 2;
    }

    &.gray {
        // filter: grayscale(1);
    }
}
</style>