<template>
    <view class="diy-form-time" :style="[bgStyle]">
        <view v-if="data.has_countdown == 1 && data.time_status == 1"
              :style="{paddingLeft: data.has_card ==1 && data.c_position === 'center' ? '20rpx': '0px'}"
              :class="{'main-center': data.c_position === 'center'}"
              class="form-end-time dir-left-nowrap">
            <view :style="[timeStyle]" class="main-center cross-center time">{{ date.H }}</view>
            <view :style="{color: data.c_bg_color}" >:</view>
            <view :style="[timeStyle]" class="main-center cross-center time">{{ date.i }}</view>
            <view :style="{color: data.c_bg_color}" >:</view>
            <view :style="[timeStyle]" class="main-center cross-center time">{{ date.s }}</view>
            <view :style="{color: data.c_bg_color}"  class="end-text">后结束</view>
        </view>
        <view :style="[cardStyle]" class="form-card dir-top-nowrap">
            <view class="time-people" :style="{color: data.text_color}">已有{{ data.user_count }}人{{ data.text }}</view>
            <view v-if="data.has_progress_bar == 1" class="progress-box"
                  :style="{background: `${data.progress_bar_end_color}`}">
                <view class="progress-view"
                      :style="{width:`${data.progress_item / data.progress_count * 100}%`,background: `${data.progress_bar_color}`}"></view>
            </view>
            <view class="time-man dir-top-nowrap cross-center" v-if="data.user_list && data.user_list.length">
                <view class="dir-left-nowrap cross-center" style="position: relative">
                    <template v-for="(item,index) in data.user_list">
                        <image class="woman-image" :src="item.icon"></image>
                        <view class="woman-image end" v-if="index == 7">
                            <view class="dir-left-nowrap cross-center main-center">
                                <view class="dian"></view>
                                <view class="dian"></view>
                                <view class="dian"></view>
                            </view>
                        </view>
                    </template>
                </view>

                <swiper circular vertical autoplay v-if="data.buy_list && data.buy_list.length" :style="[scrollStyle]">
                    <swiper-item v-for="(item,index) in data.buy_list" :key="index" @touchmove.stop.prevent
                                 catchtouchmove="catchTouchMove">
                        <view class="man-time dir-left-nowrap main-center cross-center">
                            <image :src="item.user_icon"></image>
                            <view>{{ item.user_text }}</view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "diy-form-time",
    props: {
        index: [Number, String],
        value: Object,
    },
    data() {
        return {
            data: {},
            date: {
                H: '00',
                i: '00',
                s: '00',
            }
        }
    },
    computed: {
        timeStyle() {
            let {c_bg_color, c_text_color} = this.data;
            return {
                background: c_bg_color,
                color: c_text_color,
            }
        },
        scrollStyle() {
            let {scroll_bar_bg_color, scroll_bar_text} = this.data;
            return {
                background: scroll_bar_bg_color,
                color: scroll_bar_text
            }
        },
        bgStyle() {
            let {bg_color, bg_url, has_bg, lr_padding} = this.data;
            if (has_bg == 1) {
                return {
                    backgroundImage: `url(${bg_url})`,
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: '100% 100%',
                    paddingLeft: `${lr_padding}rpx`,
                    paddingRight: `${lr_padding}rpx`,
                }
            }
            if (has_bg == 0) {
                return {
                    paddingLeft: `${lr_padding}rpx`,
                    paddingRight: `${lr_padding}rpx`,
                    backgroundColor: bg_color,
                }
            }
        },
        cardStyle() {
            let {card_border_color, card_padding_color, card_radius, has_card} = this.data;
            if (has_card == 1) {
                return {
                    paddingLeft: `20rpx`,
                    paddingRight: `20rpx`,
                    borderRadius: `${card_radius}rpx`,
                    backgroundColor: card_padding_color,
                    borderStyle: 'solid',
                    borderWidth: '1px',
                    borderColor: card_border_color || card_padding_color,
                }
            }
        },
    },
    methods: {
        catchTouchMove: function () {
            return false
        },

        calcTime() {
            let {time_at, time_status} = this.data;
            if (time_status != 1) {
                return false;
            }
            let date = time_at;
            let time = new Date(date.replace(/-/g, '/')).getTime() - new Date().getTime();
            if (time < 0) {
                return true
            }
            let hou = parseInt(time / 1000 / 60 / 60);
            let min = parseInt((time / 1000 / 60) % 60);
            let sec = parseInt((time / 1000) % 60);
            Object.assign(this.date, {
                H: hou < 10 ? "0" + hou : hou,
                i: min < 10 ? "0" + min : min,
                s: sec < 10 ? "0" + sec : sec,
            })
            return hou <= 0 && min <= 0 && sec <= 0
        },
        async timing() {
            function timeout(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }

            if (this.calcTime()) return;
            for (let i = 1; i--; i >= 0) {
                i = 1;
                await timeout(1000);
                if (this.calcTime()) break;
            }
        },
    },
    created() {
        this.data = this.value;
        this.timing();
    },
}
</script>

<style scoped lang="scss">
.diy-form-time {
    padding: 20#{rpx} 24#{rpx};

    .form-end-time {
        color: white;
        font-size: 32#{rpx};
        margin-bottom: 20#{rpx};

        .time {
            margin: 0 4#{rpx};
            padding: 0 12#{rpx};
            height: 42#{rpx};
            background: #FFFFFF;
            border-radius: 10#{rpx};
        }

        .end-text {
            margin-left: 4#{rpx};
            color: #FFFFFF;
        }
    }

    .form-card {
        padding: 20#{rpx} 0;

        .time-people {
            line-height: 1;
            font-size: 30#{rpx};
            color: #FFFFFF;

        }

        .progress-box {
            width: 100%;
            height: 20#{rpx};
            border-radius: 10#{rpx};
            overflow: hidden;
            margin-top: 20#{rpx};

            .progress-view {
                width: 50%;
                height: 100%;
                border-radius: inherit;
                background-color: #ff9f9f;
            }
        }

        .time-man {
            margin-top: 20#{rpx};

            .woman-image {
                width: 72#{rpx};
                height: 72#{rpx};
                border-radius: 50%;
                display: block;
                margin-left: #{-14rpx};
                border: 4#{rpx} solid white;
            }

            .woman-image.end {
                position: absolute;
                background: rgba(0, 0, 0, 0.5);
                right: 0;
                color: white;

                > view {
                    height: 100%;
                    width: 100%;
                }

                .dian {
                    height: 6#{rpx};
                    width: 6#{rpx};
                    background-color: white;
                    border-radius: 50%;
                    margin: 0 3#{rpx}
                }
            }
        }

        swiper {
            margin-top: 40#{rpx};
            height: #{80rpx};
            width: #{478rpx};
            background: #DC2325;
            border-radius: 40#{rpx};
        }

        .man-time {
            height: 80#{rpx};
            width: #{478rpx};

            image {
                width: 64#{rpx};
                height: 64#{rpx};
                border-radius: 50%;
            }

            view {
                margin-left: 14#{rpx};
                font-size: 28#{rpx};
            }
        }
    }
}
</style>