<template>
    <view v-if="dataList && dataList.length">
        <view v-if="title" class="act-monthly-title c-font-sigma c-gap-top-ll c-gap-bottom-large">
            <image :src="titLeft" class="act-monthly-title-left" mode="aspectFit" />
            <text class="c-font-wb c-gap-right c-gap-left">{{title}}</text>
            <image :src="titRight" class="act-monthly-title-right" mode="aspectFit" />
        </view>
        <view
            class="sec-kill"
            :style="{
                background: bgColor
            }"
        >
            <view class="sec-kill-t">
                <view
                    v-for="(title, titleIndex) in dataList"
                    :key="titleIndex"
                    use-trackby
                    class="sec-kill-t-itm"
                    :style="{
                        marginRight: titleIndex !== dataList.length - 1 ? '4px' : '0',
                        background: titleIndex === selectIndex ? chooseColor : ''
                    }"
                    @tap.stop="onTitleTap(title, titleIndex)"
                >
                    <view class="c-font-15 sec-kill-t-itm-title">{{title.title}}</view>
                    <view class="c-font-small c-loss8">{{title | getTitleStatusText}}</view>
                </view>
            </view>
            <view v-if="goodList && goodList.length" class="sec-kill-c">
                <template v-for="(item, itemIndex) in goodList">
                    <view
                        v-if="itemIndex < 4"
                        :key="itemIndex"
                        use-trackby
                        class="sec-kill-c-itm"
                        :style="{
                            marginRight: itemIndex !== dataList[selectIndex].items.length - 1 ? '4px' : '0',
                        }"
                        @tap.stop="onJump(item)"
                    >
                        <view class="sec-kill-c-img">
                            <b-image
                                width="100%"
                                height=".54rem"
                                radius="0"
                                hack-bg="radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%)"
                                :src="item.headImgUrl"
                                :is-round="false"
                            />
                            <!-- 剩余数量 暂无 -->
                            <!-- <view class="sec-kill-c-balance">
                                <view class="sec-kill-c-balance-text c-font-normal">剩余{{+item.service_num}}%</view>
                                <view class="sec-kill-c-balance-mask" :style="{background: chooseColor}"></view>
                            </view> -->
                        </view>
                        <view class="sec-kill-c-cont">
                            <view class="c-font-normal c-color-333 c-line-clamp1 sec-kill-c-cont-title">{{item.service_title}}</view>
                            <view class="c-left-loss5 sec-kill-c-price">
                                <text class="c-font-17 c-color-orange">￥{{item.price / 100}}</text>
                                <text v-if="item.market_price" class="c-font-small c-color-gray c-del c-gap-left-small">￥{{item.market_price / 100}}</text>
                            </view>
                            <view
                                class="sec-kill-c-btn"
                                :class="[(item.actstatus === 2 || item.actstatus === 4 || item.actstatus === 5) && 'sec-kill-c-btn-done']"
                                @tap.stop="onRemind(item, itemIndex)"
                            >
                                <view class="c-font-normal sec-kill-c-btn-t">{{item | getTitleText}}</view>
                                <view v-if="item.appointnum" class="sec-kill-c-btn-sub c-loss8">{{item.appointnum}}人已设置</view>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
            <view v-else class="c-loading-cont">
                <list-loading status="loading" bgColor="transparent" />
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 秒杀
* @author chenshuo04
*/
import * as core from '../../utils/core';
import * as log from '../../utils/log';
import {apiHost} from '../../utils/conf';
import Image from '../common/image';
import ListLoading from '../common/list-loading';
import {request} from '../../utils/request';
import {navigate} from '../../utils/navigate';

let seckillTimer = null;
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        title: {
            type: String
        },
        bgColor: {
            type: String,
            default: '#0778dd'
        },
        chooseColor: {
            type: String,
            default: '#3ba1fd'
        },
        api: {
            type: String
        }
    },
    components: {
        'b-image': Image,
        'list-loading': ListLoading
    },
    filters: {
        getTitleStatusText(data) {
            if (!data) {
                return '';
            }
            else if (data.actstatus === 3) {
                return '抢购中';
            }
            else if (data.actstatus === 1 || data.actstatus === 2) {
                return data.starthour + '点开抢';
            }
            else if (data.actstatus === 4) {
                return data.starthour + '点已结束';
            }
        },
        getTitleText(data) {
            if (!data) {
                return '';
            }
            else if (data.actstatus === 1) {
                return '提醒我';
            }
            else if (data.actstatus === 2) {
                return '取消提醒';
            }
            else if (data.actstatus === 3) {
                return '去抢购';
            }
            else if (data.actstatus === 4) {
                return '已结束';
            }
            else if (data.actstatus === 5) {
                return '已抢光';
            }
        }
    },
    data() {
        return {
            selectIndex: 1,
            dataList: [],
            goodList: [],
            titLeft: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1378670099,1137252578&fm=179&app=35&f=PNG?w=381&h=56',
            titRight: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1298208407,2215154243&fm=179&app=35&f=PNG?w=381&h=56'
        };
    },
    created() {
        this.onUpdate(this.api, true);
    },
    methods: {
        onRemind(good, goodIndex) {
            if (good.actstatus === 3) {
                navigate({
                    url: good.detailUrl,
                    extra: {
                        type: 'seckill',
                        value: good.service_title || 'seckillitem'
                    }
                });
            }
            else if (good.actstatus === 4 || good.actstatus === 5) {
                return;
            }
            else {
                request({
                    url: apiHost + (good.actstatus === 1 ? good.appointUrl : good.cancelUrl),
                    isNeedLogin: true,
                    isFirstScreen: false
                }).then(res => {
                    if (res.data.actstatus) {
                        const appointnum = Number(this.goodList[goodIndex].appointnum);
                        this.$api.showToast({title: res.data.actstatus === 1 ? '取消成功!' : '设置成功!', icon: 'none'});
                        this.$set(this.goodList[goodIndex], 'actstatus', res.data.actstatus);
                        this.$set(
                            this.goodList[goodIndex],
                            'appointnum',
                            res.data.actstatus === 1 ? appointnum - 1 : appointnum + 1
                        );
                    }
                });
            }
        },
        onJump(good) {
            if (good.actstatus === 3) {
                navigate({
                    url: good.detailUrl,
                    extra: {
                        type: 'seckill',
                        value: good.service_title || 'seckillitem'
                    }
                });
            }
        },
        onUpdate(api, init) {
            request({
                url: apiHost + api,
                isNeedLogin: false,
                isFirstScreen: false
            }).then(res => {
                const dataList = res.data;
                if (dataList && dataList.length) {
                    dataList.forEach((itm, index) => {
                        if (itm.selected) {
                            Object.assign(this, {
                                selectIndex: index,
                                dataList: dataList,
                                goodList: init ? dataList[index].items : this.goodList
                            });
                            this.onCountDown(itm.remainstartsec || itm.remainstopsec);
                        }
                    });
                }
            });
        },
        onTitleTap(title, titleIndex) {
            if (titleIndex !== this.selectIndex) {
                this.selectIndex = titleIndex;
                Object.assign(this, {
                    selectIndex: titleIndex,
                    goodList: title.items
                });
                this.onUpdate(title.itemsurl);
            }
        },
        onCountDown(downTime) {
            let timediff = downTime;
            if (seckillTimer) {
                clearTimeout(seckillTimer);
            }
            if (!downTime) {
                return;
            }
            const vm = this;
            return (function cdown(timediff) {
                if (timediff > 0) {
                    /* eslint-disable */
                    seckillTimer = setTimeout(() => {
                        return cdown(timediff - 1);
                    }, 1000);
                    /* eslint-enable */
                }
                else {
                    const api = apiHost + vm.dataList[vm.selectIndex].itemsurl;
                    vm.onUpdate(api);
                }
            })(timediff);
        }
    }
};
</script>

<style lang="less" scoped>
.sec-kill {
    border-radius: 8px;
    &-t {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 5px;
        &-itm {
            width: calc(25% - 3px);
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding-bottom: 5px;
            color: #fff;
            text-align: center;
        }
    }
    &-c {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        &-itm {
            width: calc(25% - 3px);
            margin-top: -5px;
            border-radius: 8px;
            background: #fff;
        }
        &-img {
            position: relative;
            padding-top: 20px;
            padding-bottom: 10px;
        }
        &-balance {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            color: #fff;
            &-text {
                position: relative;
                z-index: 10;
                // padding: 3px 0;
            }
            &-mask {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                opacity: 0.6;
            }
        }
        &-cont {
            padding: 5px;
        }
        &-btn {
            padding: 3px 0;
            text-align: center;
            border-radius: 100px;
            color: #fff;
            background: #fcac46;
            &-sub {
                font-size: 12px;
                transform: scale(0.8);
                width: 125%;
                transform-origin: left;
            }
            &-done {
                opacity: 0.7;
            }
        }
    }
    .c-loss8 {
        margin-top: -8px;
    }
    .c-del {
        text-decoration: line-through;
    }
    .c-left-loss5 {
        margin-left: -5px;
    }
    .c-loading-cont {
        display: flex;
        justify-content: center;
        padding: 40px 0;
    }
}
.act-monthly-title {
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    &-left, &-right {
        // position: relative;
        // top: 2px;
        height: 21px;
        width: 140px;
        min-width: 140px;
    }
}
@media only screen and (max-width: 385px) {
    .sec-kill-c-btn-t {
        transform: scale(0.9);
    }
    .sec-kill-c-btn-sub {
        font-size: 10px;
        // transform-origin: 0 0;
    }
    .sec-kill-c-price {
        margin-left: -3px !important;
        transform: scale(0.8);
        transform-origin: 0 0;
    }
    .sec-kill-t-itm-title {
        transform: scale(0.9);
    }
    .sec-kill-c-cont-title {
        font-size: 13px;
    }
}
@media only screen and (max-width: 340px) {
    .sec-kill-t-itm-title {
        transform: scale(0.8);
    }
    .sec-kill-c-btn-sub {
        transform: scale(0.7);
        width: 143%;
    }
}
</style>
