<template>
    <div class="m-coupon" :class="{ page_red: theme === 1 }">
        <!-- <div class="m-coupon__nav">{{ "优惠券（" + list.length + "）" }}</div> -->
        <scroll-view class="m-coupon__scroll" :scroll-x="true">
            <ul class="m-coupon__list">
                <!-- <li class="m-coupon__item" v-for="(item, index) in list" :key="index" @click="goCoupon(item)">
                    <img v-if="item.checked === 1" class="m-coupon__bg" src="/static/module/coupon/coupon_bg_usable.jpg" alt="">
                    <img v-if="item.checked === 0" class="m-coupon__bg" src="/static/module/coupon/coupon_bg.jpg" alt="">
                    <img v-if="item.checked === 0" class="m-coupon__get" src="/static/module/coupon/coupon_get.png" alt="">
                    <div class="m-coupon__content">
                        <div class="m-coupon__top">
                            <span class="m-coupon__sign" :class="{'m-coupon__sign--get': item.checked === 0}">¥</span>
                            <span class="m-coupon__price" :class="{'m-coupon__price--get': item.checked === 0}">{{ item.cutPrice || '0.00' }}</span>
                        </div>
                        <div class="m-coupon__text" :class="{'m-coupon__text--get': item.checked === 0}">{{ '满' + (item.limitPrice || '0.00') + '使用' }}</div>
                    </div>
                </li> -->
                <li
                    class="c-item"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="goCoupon(item)"
                >
                    <div class="l">
                        <span class="fh">￥</span>
                        {{ item.cutPrice || "0" }}
                    </div>
                    <div class="info">
                        <div class="tit">
                            {{ "满" + (item.limitPrice || "0") + "元可用" }}
                        </div>
                        <p class="des">{{ item.couponDesc }}</p>
                    </div>
                    <div class="r">
                        <img
                            class="img"
                            mode="heightFix"

                            :src="theme===2?'/static/coupon/bg.png':'/static/coupon/bg_red.png'"
                            alt=""
                        />
                        <span class="text">领取</span>
                    </div>
                </li>
            </ul>
        </scroll-view>
    </div>
</template>

<script>
// 优惠券
export default {
    name: "MCoupon",

    props: {
        // 内容
        content: {
            type: Object,
        },
    },

    // 数据
    data() {
        return {
            list: [],
        };
    },

    // 初始化
    created() {
        const self = this;

        self.init();
    },

    // 函数
    methods: {
        init() {
            const self = this;

            self.list = self.content.asynData.couponList;
            console.log(self.list);
        },

        // 去优惠券详情
        goCoupon(val) {
            this.router.push({
                path: "/pages/coupon/detail",
                query: {
                    id: val.couponId,
                },
            });
        },

        // 领取优惠券
        getCoupon(val) {
            const self = this;

            self.api
                .post("/Coupon/Receive", {
                    couponId: val.couponId,
                })
                .then(() => {
                    self.fn.showToast("领取成功");

                    self.list.forEach((item, index) => {
                        if (item.couponId === val.couponId) {
                            item.checked = 0;
                        }

                        self.list.splice(index, 1, item);
                    });
                });
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
    },

    // 数据监听
    watch: {
        content(val) {
            const self = this;

            if (val) {
                self.init();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.m-coupon {
    padding: px(30) px(30) px(55);
    background-color: #f8f8f8;

    &__nav {
        font-size: px(38);
        color: #666;
    }

    &__scroll {
        width: 100%;
        height: px(200);
        margin-top: px(30);
    }

    &__list {
        display: flex;
        align-items: center;
        height: 100%;
    }

    &__item {
        position: relative;
        flex: none;
        width: px(240);
        height: 100%;
        margin-left: px(35);

        &:first-child {
            margin-left: 0;
        }
    }

    &__bg {
        width: 100%;
        height: 100%;
    }

    &__get {
        position: absolute;
        bottom: px(15);
        right: 0;
        z-index: 2;
        width: px(120);
        height: px(95);
    }

    &__content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        padding-top: px(25);
    }

    &__top {
        display: flex;
        justify-content: center;
        align-items: baseline;
    }

    &__sign {
        font-size: px(28);
        color: #f74a00;

        &--get {
            color: #ccc;
        }
    }

    &__price {
        margin-left: px(5);
        font-size: px(42);
        color: #f74a00;
        font-weight: 700;

        &--get {
            color: #ccc;
        }
    }

    &__text {
        display: flex;
        justify-content: center;
        margin-top: px(10);
        font-size: px(32);
        color: #f74a00;

        &--get {
            color: #ccc;
        }
    }
}
.c-item {
    position: relative;
    flex: none;
    // width: px(240);
    height: 100%;
    margin-right: px(30);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: px(15);
    background-color: #fff;
    overflow: hidden;
    .l {
        height: px(120);
        color: #ffbd2e;
        font-size: px(110);
        padding: 0 px(30);
        border-right: 1px solid #e5e5e5;
        flex-shrink: 0;
        .fh {
            font-size: px(40);
        }
    }
    .info {
        padding: 0 px(40);
        width: px(280);
        height: px(120);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-right: px(20);
        .tit {
            font-size: px(40);
            color: #27a34f;
            @include omit(px(240));
        }
        .des {
            margin-top: px(10);
            width: px(240);
            font-size: px(30);
            line-height: 1.4;
            @include omits(2);
        }
    }
    .r {
        position: relative;
        .img {
            height: px(200);
            width: px(105);
        }
        .text {
            position: absolute;
            top: 50%;
            left: 60%;
            color: #fff;
            font-size: px(34);
            width: px(40);
            z-index: 1;
            transform: translate(-50%, -50%);
        }
    }
}
.page_red {
    .c-item {
        .l {
            color: #27a34f;
        }
        .info {
            .tit {
                color: #27a34f;
            }
        }
    }
}
</style>