<template>
    <div class="o-coupon" v-if="show" @click="close">
        <div class="o-coupon__content" @click.stop="">
            <div class="o-coupon__title">请选择优惠</div>
            <div class="o-coupon__close" @click="close">
                <i class="iconfont iconclose o-coupon__close-icon"></i>
            </div>
            <div class="o-coupon__box">
                <scroll-view class="o-coupon__scroll" :scroll-y="true">
                    <div class="o-null" v-if="!avalibleList.length">
                        <div class="o-null__title">暂无可用优惠券</div>
                        <img class="o-null__img" src="/static/goods/coupon_null.jpg" alt="">
                    </div>
                    <div class="o-avalibleList" v-if="avalibleList.length">
                        <div class="o-avalibleList__title">可用({{ avalibleList.length }})</div>
                        <ul class="o-avalibleList__list">
                            <li class="o-avalibleList__item" v-for="(item, index) in avalibleList" :key="index" @click="selectCoupon(item)">
                                <img class="o-avalibleList__bg" src="/static/goods/coupon_bg_2.jpg" alt="">
                                <div class="o-avalibleList__content">
                                    <div class="o-avalibleList__left">
                                        <div class="o-avalibleList__name">{{ item.name || '' }}</div>
                                        <div class="o-avalibleList__text">使用期限：{{ item.startUserTime + ' - ' + item.endUseTime }}</div>
                                    </div>
                                    <div class="o-avalibleList__right">
                                        <img v-if="item.active" class="o-avalibleList__select" src="/static/icon/select.png" alt="">
                                        <img v-else="" class="o-avalibleList__select" src="/static/icon/select_grey.png" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="o-unAvalibaleList" v-if="unAvalibaleList.length">
                        <div class="o-unAvalibaleList__title">不可用({{ unAvalibaleList.length }})</div>
                        <ul class="o-avalibleList__list">
                            <li class="o-unAvalibaleList__item" v-for="(item, index) in unAvalibaleList" :key="index">
                                <img class="o-unAvalibaleList__bg" src="/static/goods/coupon_disabled.jpg" alt="">
                                <div class="o-unAvalibaleList__content">
                                    <div class="o-unAvalibaleList__top">
                                        <div class="o-unAvalibaleList__name">{{ item.name || '' }}</div>
                                        <div class="o-unAvalibaleList__text">使用期限：{{ item.startUserTime + ' - ' + item.endUseTime }}</div>
                                    </div>
                                    <div class="o-unAvalibaleList__bottom">不可用原因：{{ item.reason }}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </scroll-view>
            </div>
            <div class="o-coupon__bottom">
                <div class="o-coupon__complete" @click="close">完成</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'OCoupon',

        props: {
            couponIds: {
                type: Array,
            },
            coupon: {
                type: [Object, String],
            },
        },

        // 数据
        data() {
            return {
                show: false,
                avalibleList: [],
                unAvalibaleList: [],
            }
        },

        // 函数
        methods: {
            // 打开
            open() {
                const self = this

                self.show = true
            },

            // 关闭
            close() {
                const self = this

                self.show = false
            },

            // 获取优惠券列表
            getList() {
                const self = this

                self.api.post('/Coupon/GetAvailableCoupons', {
                    orderItemIds: self.couponIds,
                },{pass:true}).then(res => {
                    if(res.data){
                        self.avalibleList = res.data.avalibleList
                        self.unAvalibaleList = res.data.unAvalibaleList

                        self.selectAuto()
                    }
                })
            },

            // 自动选择
            selectAuto() {
                const self = this
                let coupon = ''
                let couponIndex = ''
                let price = 0

                self.avalibleList.forEach((item, index) => {
                    if (item.value > price) {
                        coupon = item
                        couponIndex = index
                        price = item.value
                    }
                })

                if (coupon) {
                    self.avalibleList.splice(couponIndex, 1, {
                        ...coupon,
                        active: true,
                    })
                }

                self.$emit('change', coupon)
            },

            // 选择优惠券
            selectCoupon(val) {
                const self = this

                self.avalibleList.forEach((item, index) => {
                    if (item.id === val.id) {
                        item.active = !item.active
                    } else {
                        item.active = false
                    }

                    self.avalibleList.splice(index, 1, item)
                })

                if (val.active) {
                    self.$emit('change', val)
                } else {
                    self.$emit('change', '')
                }
            },
        },

        // 数据计算
        computed: {},

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

                if (val.length && !self.coupon) {
                    self.getList()
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .o-coupon {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .4);

        &__content {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            border-radius: px(10) px(10) 0 0;
            background-color: #fff;
        }

        &__title {
            display: flex;
            justify-content: center;
            align-items: center;
            height: px(180);
            padding-top: px(50);
            font-size: px(44);
            color: #000;
            font-weight: 700;
        }

        &__close {
            position: absolute;
            top: px(-115);
            right: px(55);
            z-index: 1;
            height: px(115);

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                z-index: 1;
                width: px(2);
                height: px(34);
                transform: translateX(-50%);
                background-color: #fff;
            }
        }

        &__close-icon {
            font-size: px(84);
            color: #fff;
        }

        &__box {
            position: relative;
            height: px(580);
        }

        &__scroll {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
        }

        &__bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            height: px(170);
            padding-bottom: px(30);
        }

        &__complete {
            display: flex;
            justify-content: center;
            align-items: center;
            width: px(1020);
            height: px(110);
            font-size: px(44);
            color: #fff;
            font-weight: 700;
            border-radius: px(55);
            background-color: #27a34f;
        }
    }

    .o-null {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: px(50) 0 px(70);

        &__title {
            font-size: px(44);
            color: #999;
        }

        &__img {
            width: px(370);
            height: px(326);
            margin-top: px(50);
        }
    }

    .o-avalibleList {
        padding: px(50) px(30) 0;

        &__title {
            font-size: px(44);
            color: #000;
        }

        &__list {
            margin-top: px(30);
        }

        &__item {
            position: relative;
            height: px(200);
            margin-top: px(20);

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

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

        &__content {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        &__left {
            flex: 1;
            padding: 0 px(40) 0 px(145);
        }

        &__name {
            font-size: px(40);
            color: #000;
            font-weight: 600;
        }

        &__text {
            margin-top: px(20);
            font-size: px(36);
            color: #999;
        }

        &__right {
            width: px(120);
        }

        &__select {
            width: px(70);
            height: px(70);
        }
    }

    .o-unAvalibaleList {
        padding: px(50) px(30);

        &__title {
            font-size: px(44);
            color: #000;
        }

        &__list {
            margin-top: px(30);
        }

        &__item {
            position: relative;
            height: px(275);
            margin-top: px(20);

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

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

        &__content {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
        }

        &__top {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: px(195);
            padding-left: px(145);
        }

        &__name {
            font-size: px(40);
            color: #000;
            font-weight: 600;
        }

        &__text {
            margin-top: px(20);
            font-size: px(36);
            color: #999;
        }

        &__bottom {
            display: flex;
            align-items: center;
            height: px(80);
            padding: 0 px(30);
        }

        &__select {
            width: px(70);
            height: px(70);
        }
    }
</style>