<template>
    <view class="act-ticket">
        <view class="act-ticket-cont" @tap.stop="onOpen">
            <slot></slot>
        </view>
        <c-popup
            :show="show"
            :z-index="'921'"
            :title="'可使用优惠'"
            :show-close="true"
            :show-title-line="true"
            :show-close-handler="false"
            :max-height="'calc(100vh - 120px)'"
            :height="'auto'"
            border-radius="12px"
            close-icon="close-circle"
            class="rule-popup"
            stop-scroll-through
            @close="onClose"
        >
            <view class="c-gap-inner-top">
                <view
                    v-if="multiTicketsClone && (multiTicketsClone.commonTickets || multiTicketsClone.goodsTickets)"
                    class="act-ticket-list"
                >
                    <view
                        v-if="
                            multiTicketsClone &&
                                multiTicketsClone.commonTickets
                        "
                    >
                        <view
                            v-for="(ticket, ticketIndex) in multiTicketsClone.commonTickets.tickets"
                            :key="ticketIndex"
                            class="act-ticket-item"
                            @tap.stop="
                                onMultiChange(
                                    0,
                                    ticketIndex,
                                    'common',
                                    multiTicketsClone.commonTickets.selectedCid === ticket.metaId
                                )
                            "
                        >
                            <view>{{ ticket.text }}</view>
                            <view class="act-ticket-icon">
                                <c-icon
                                    v-if="multiTicketsClone.commonTickets.selectedCid === ticket.metaId"
                                    class="act-ticket-icon__select"
                                    name="check-circle-solid"
                                    font-size="19px"
                                />
                            </view>
                        </view>
                    </view>
                    <view v-if="multiTicketsClone && multiTicketsClone.goodsTickets">
                        <view
                            v-for="(ticketList, ticketListIndex) in multiTicketsClone.goodsTickets"
                            :key="`${ticketList}_${ticketListIndex}`"
                        >
                            <view
                                v-for="(ticket, ticketIndex) in ticketList.tickets"
                                :key="ticketIndex"
                                class="act-ticket-item"
                                @tap.stop="
                                    onMultiChange(
                                        ticketListIndex,
                                        ticketIndex,
                                        'goods',
                                        ticket.metaId === ticketList.selectedCid
                                    )
                                "
                            >
                                <view>{{ ticket.text }}</view>
                                <view class="act-ticket-icon">
                                    <c-icon
                                        v-if="ticket.metaId === ticketList.selectedCid"
                                        class="act-ticket-icon__select"
                                        name="check-circle-solid"
                                        font-size="19px"
                                    />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view
                        class="act-ticket-item"
                        @tap.stop="clearAllMulitTicket"
                    >
                        <view>不使用优惠</view>
                        <view class="act-ticket-icon">
                            <c-icon
                                v-if="!isChooseMultiTicket"
                                class="act-ticket-icon__select"
                                name="check-circle-solid"
                                font-size="19px"
                            />
                        </view>
                    </view>
                </view>
                <view v-else-if="tickets && tickets.length" class="act-ticket-list">
                    <view
                        v-for="(ticket, ticketIndex) in tickets"
                        :key="ticketIndex"
                        class="act-ticket-item"
                        @tap.stop="onChange(ticketIndex)"
                    >
                        <view>{{ ticket.text }}</view>
                        <view class="act-ticket-icon">
                            <c-icon
                                v-if="isSelect === ticketIndex"
                                class="act-ticket-icon__select"
                                name="check-circle-solid"
                                font-size="19px"
                            />
                        </view>
                    </view>
                </view>
                <view v-else-if="redPacket && redPacket.length" class="act-ticket-list">
                    <view
                        v-for="(ticket, ticketIndex) in redPacket"
                        :key="ticketIndex"
                        class="act-ticket-item"
                        @tap.stop="onChange(ticketIndex, 'red')"
                    >
                        <view>{{ ticket.text }}</view>
                        <view class="act-ticket-icon">
                            <c-icon
                                v-if="isSelectRed === ticketIndex"
                                class="act-ticket-icon__select"
                                name="check-circle-solid"
                                font-size="19px"
                            />
                        </view>
                    </view>
                </view>
                <view class="c-gap-bottom">
                    <c-button
                        primary-color="#fff"
                        border-radius="22px"
                        background="linear-gradient(224deg, #FF8181 0%, #FF6F61 100%)"
                        @tap.stop="onConfirm"
                    >{{ confirmBtnText }}</c-button>
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 全选择
 * @author  chenshuo04@baidu.com
 * @categories 业务组件
 * @tags [component]
 */
/* eslint-disable */
/* global Page swan  getApp */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CButton from '@baidu/med-ui/components/Button/Button';
import {deepCopy} from '@utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CPopup,
        CButton
    },
    props: {
        /* 卡券数据 */
        tickets: {
            type: Array,
            // required: true,
            default: () => {
                return [];
            }
        },
        /* 多选卡券数据 */
        multiTickets: {
            type: Object
        },
        /* 确认按钮文案 */
        confirmBtnText: {
            type: String,
            default: '确认支付'
        },
        /** 红包数据 */
        redPacket: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 选中的优惠券 */
        chooseTicket: {
            type: Object
        },
        /** 优惠券选择模式 */
        selectType: {
            type: String,
            default: 'radio'
        }
    },
    watch: {
        chooseTicket() {
            if (this.chooseTicket && this.tickets.length) {
                const orgIndex = this.tickets.findIndex(
                    item => item.metaId === (this.chooseTicket && this.chooseTicket.metaId)
                );
                this.isSelect = orgIndex === -1 ? 0 : orgIndex;
            }
        }
    },
    created() {
        if (this.chooseTicket && this.tickets.length) {
            const orgIndex = this.tickets.findIndex(
                item => item.metaId === (this.chooseTicket && this.chooseTicket.metaId)
            );
            this.isSelect = orgIndex === -1 ? 0 : orgIndex;
        }
    },
    data() {
        return {
            show: false,
            isSelect: 0, // 卡券
            isSelectRed: 0, // 红包
            multiTicketsClone: null
        };
    },
    computed:{
        isChooseMultiTicket(){
            const commonTickets = this.multiTicketsClone && this.multiTicketsClone['commonTickets'] || {};
            const chooseCommonTickets = !!commonTickets.selectedCid;
            const goodsTickets = this.multiTicketsClone && this.multiTicketsClone['goodsTickets'] || [];
            let chooseGoodsTickets = goodsTickets.some(list => list.selectedCid)
            return chooseCommonTickets || chooseGoodsTickets;
        }
    },
    methods: {
        onOpen() {
            this.multiTicketsClone = deepCopy(this.multiTickets);
            this.show = true;
        },
        onClose() {
            this.show = false;
            // 恢复初始状态
            if (this.chooseTicket && this.tickets.length) {
                const orgIndex = this.tickets.findIndex(
                    item => item.metaId === (this.chooseTicket && this.chooseTicket.metaId)
                );
                this.isSelect = orgIndex === -1 ? 0 : orgIndex;
            }
            // 多选回复初始状态
            if (this.selectType === 'multi') {
                this.multiTicketsClone = deepCopy(this.multiTickets);
            }
        },
        onChange(index, type) {
            if (type === 'red') {
                this.isSelectRed = index;
                /* 修改 */
                this.$emit('onChange', this.redPacket[index], type);
            } else {
                this.isSelect = index;
                /* 修改 */
                this.$emit('onChange', this.tickets[index], type);
            }
        },
        onMultiChange(listIndex, index, type, selected) {
            let changeType;
            if (type === 'common') {
                changeType = 'commonTickets';
            } else {
                changeType = 'goodsTickets';
            }

            const multiTickets = this.multiTicketsClone;
            const curTicketType = multiTickets[changeType];
            let curTicketListGroup;
            let curTicketList;

            if (type === 'common') {
                curTicketListGroup = curTicketType;
                curTicketList = curTicketListGroup['tickets'];
                this.clearSelected('goods');
            } else {
                curTicketListGroup = curTicketType[listIndex];
                this.clearSelected('common');
                curTicketList = curTicketListGroup['tickets'];
                const curSkuIdList = curTicketListGroup.skuid.split(',');

                curTicketType.map(list => {
                    const skuIdList = list.skuid.split(',');
                    for (let i = 0; i < curSkuIdList.length; i++) {
                        if (skuIdList.indexOf(curSkuIdList[i]) !== -1) {
                            this.$set(list, 'selectedCid', '');
                        }
                    }
                });
            }

            const curTicket = curTicketList[index];

            if (selected) {
                this.$set(curTicketListGroup, 'selectedCid', '');
            } else {
                this.$set(curTicketListGroup, 'selectedCid', curTicket.metaId);
            }
        },
        clearAllMulitTicket(){
            this.clearSelected('goods');
            this.clearSelected('common');
        },
        clearSelected(type) {
            if (type === 'common' && this.multiTicketsClone['commonTickets']) {
                const commonTickets = this.multiTicketsClone['commonTickets'];
                this.$set(commonTickets, 'selectedCid', '');
            } else if (type === 'goods' && this.multiTicketsClone['goodsTickets']) {
                const goodsTickets = this.multiTicketsClone['goodsTickets'];
                goodsTickets.forEach(list => {
                    this.$set(list, 'selectedCid', '');
                })
            }
        },
        onMultiConfirm() {
            const multiTicketsClone = this.multiTicketsClone;

            // 只返回修改后的数据，是否要处理交由父级决定
            this.$emit('onMultiConfirm', deepCopy(multiTicketsClone), true);
        },
        onConfirm() {
            const tickets = this.tickets;
            const curTicket = tickets[this.isSelect];
            const selectType = this.selectType;
            this.show = false;
            if (this.confirmBtnText !== '关闭') {
                this.$emit('onConfirm', curTicket, selectType);
                if (this.selectType === 'multi') {
                    this.onMultiConfirm();
                }
            }
        }
    }
};
</script>
<style lang="less" scoped>
.act-ticket {
    &-list {
        padding-bottom: 60px;
    }

    &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.1rem 0;
        color: #333;
    }

    &-icon {
        color: #ff6050;
        border: 1px solid #ff6050;
        border-radius: 30px;
        height: 16px;
        line-height: 16px;
        width: 16px;

        &__select {
            position: relative;
            left: -1.5px;
        }
    }
}
</style>
