<template>
    <app-layout v-if="appImg">
        <view class="form-success">
            <view v-if="type === 'reward'" class="main-center">
                <view class="bg-image" :style="{backgroundImage: `url(${appImg.app_submit_success})`}"></view>
                <view class="bg-ts dir-top-nowrap cross-center">
                    <view class="dir-top-nowrap  cross-center main-center">
                        <view class="bg-icon" :style="{backgroundImage: `url(${appImg.app_submit_ok})`}"></view>
                        <view class="dir-top-nowrap cross-center" style="height: 300rpx;color: white">
                            <view class="no-label box-grow-0">提交成功!</view>
                            <view class="no-reward box-grow-1">
                                <view class="t-omit-two">{{ place_text }}</view>
                            </view>
                            <view class="no-price" v-if="is_pay == 1">￥{{ pay_price }}</view>
                        </view>
                    </view>
                    <view class="yuanhu"></view>
                    <view class="yuanhu-box dir-top-nowrap">
                        <view class="up-color"></view>
                        <view class="y-label cross-center">获赠信息</view>
                        <view class="dir-top-nowrap" style="padding: 20rpx 0">
                            <view v-for="(reward,index) in rewardList" :key="index"
                                  class="r-list dir-left-nowrap main-between">
                                <view class="r-label box-grow-0" v-text="reward.label"></view>
                                <view v-if="reward.type === 'coupon' || reward.type === 'card'">
                                    <view v-for="(reward,index1) in reward.value"
                                          :key="index1"
                                          class="r-value t-omit c"
                                          v-text="reward"
                                    ></view>
                                </view>
                                <view v-else class="r-value t-omit" v-text="reward.value"></view>
                            </view>
                        </view>
                    </view>
                    <view v-if="after_jump_link" class="jump-btn main-center cross-center">正在跳转页面{{ second }}s...</view>
                </view>
            </view>
            <view v-else-if="type === 'success'" class="dir-top-nowrap cross-center no-r-success">
                <view class="no-icon" :style="{backgroundImage: `url(${appImg.app_diy_success})`}"></view>
                <view class="no-label">提交成功</view>
                <view style="height: 266rpx" class="dir-top-nowrap cross-center">
                    <view class="no-reward  box-grow-1">
                        <view class="t-omit-two">{{ place_text }}</view>
                    </view>
                    <view class="no-price" v-if="is_pay == 1">￥{{ pay_price }}</view>
                </view>
                <view v-if="after_jump_link" class="jump-btn main-center cross-center">正在跳转页面{{ second }}s...</view>
            </view>
            <view v-else-if="type === 'error'" class="dir-top-nowrap cross-center no-r-error">
                <view class="no-icon" :style="{backgroundImage: `url(${appImg.app_diy_error})`}"></view>
                <view class="no-label">提交失败</view>
                <view class="no-reward">出了一点小问题，请重新提交</view>
                <view class="no-btn main-center cross-center" @click="handleBack">重新提交</view>
            </view>
        </view>

    </app-layout>
</template>

<script>
import {mapState} from "vuex";

export default {
    data() {
        return {
            type: '',
            second: 5,
            is_jump: false,
            send_data: null,
            rewardList: [],
            place_text: '',
            is_pay: 0,
            pay_price: '',
            after_jump_link: null,
        }
    },

    computed: {
        ...mapState({
            appImg: state => state.mallConfig.plugin.diy ? state.mallConfig.plugin.diy.app_image : {},
        }),
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        if (options.is_error) {
            this.type = 'error';
            uni.setNavigationBarTitle({title: '提交失败'});
        } else {
            uni.setNavigationBarTitle({title: '提交成功'});
            this.getInfo(options);
        }
    },
    methods: {
        getInfo({form_id,token}) {
            this.$request({
                url: this.$api.diy.submit_result,
                data: {
                    form_id: form_id || 0,
                    token,
                },
            }).then(response => {
                if (response.code === 0) {
                    let {after_jump_link, send_data, place_text, pay_price, is_pay} = response.data;
                    this.type = send_data && send_data.length ? 'reward' : 'success';
                    this.place_text = place_text;
                    this.rewardList = send_data;
                    this.pay_price = pay_price;
                    this.is_pay = is_pay;
                    this.after_jump_link = after_jump_link;
                    after_jump_link && this.timing(5, () => {
                        uni.redirectTo({
                            url: after_jump_link.url,
                        })
                    });
                } else {
                    uni.showToast({title: response.msg, icon: 'none'});
                }
            });
        },
        handleBack() {
            uni.navigateBack({
                delta: 1
            });
        },
        async timing(second, callback) {
            function timeout(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }
            this.second = second;
            for (let i = this.second; i--; i >= 0) {
                await timeout(1000);
                this.second = i;
                if (i === 0) {
                    callback()
                }
            }
        },
    },
}
</script>

<style scoped lang="scss">
.form-success {
    .header {
        width: 100%;
        height: 317#{rpx};
        position: relative;
        background: #ff4544;
    }

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 558#{rpx};
    }

    .bg-icon {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 141#{rpx};
        height: 141#{rpx};
    }

    .bg-ts {
        position: relative;
        //top: 40#{rpx};
        padding: 40#{rpx} 0;
        //height: 100vh;
        width: 100vw;
    }

    .yuanhu {
        width: 680#{rpx};
        height: 22#{rpx};
        background: #B60F0E;
        border-radius: 11#{rpx};
    }

    .yuanhu-box {
        width: 640#{rpx};
        background: #FFFFFF;
        margin-top: -8#{rpx};
        box-shadow: 0 6#{rpx} 9#{rpx} 0 rgba(178, 178, 178, 0.25);
        border-radius: 0 0 10#{rpx} 10#{rpx};
        padding: 0 20#{rpx};

        .up-color {
            background-image: linear-gradient(to bottom, rgba(255,255,255,0), white);
            height: 8#{rpx};
            margin-top: -8#{rpx};
            margin: 0 -20#{rpx};
            position: relative;
            top: -8#{rpx};
        }

        .y-label {
            height: 110#{rpx};
            padding: 0 10#{rpx};
            font-size: 32#{rpx};
            color: #242424;
            border-bottom: 1px solid #E5E7EC;
        }

        .r-list {
            padding: 20#{rpx} 10#{rpx};
            font-size: 28#{rpx};

            .r-label {
                color: #99A1AA;
                margin-right: 24#{rpx};
            }

            .r-value {
                color: #242424;
                max-width: 320#{rpx};
            }

            .r-value.c:first-child {
                padding-top: 0;
            }

            .r-value.c {
                text-align: right;
                padding-top: 10#{rpx};
            }
        }
    }

    .jump-btn {
        margin-top: 40#{rpx};
        border: 1px solid #FF4544;
        border-radius: 5#{rpx};
        font-size: 24#{rpx};
        padding: 20#{rpx} 27#{rpx};
        color: #FF4544;
    }

    .no-r-error {
        .no-btn {
            width: 460#{rpx};
            height: 84#{rpx};
            background: #BEC3C7;
            border-radius: 42#{rpx};
            font-size: 32#{rpx};
            margin-top: 115#{rpx};
            color: #FFFFFF;
        }
    }

    .no-r-error, .no-r-success {
        color: #242424;
    }

    .no-icon {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 147#{rpx};
        height: 165#{rpx};
        margin-bottom: 80#{rpx};
        margin-top: 100#{rpx};
    }

    .no-label {
        font-size: 32#{rpx};
        font-weight: bold;
    }

    .no-reward {
        text-align: center;
        max-width: 474#{rpx};
        margin-top: 28#{rpx};
        font-size: 28#{rpx};
    }

    .no-price {
        font-size: 40#{rpx};
        padding-bottom: 50#{rpx};
    }
}
</style>