<template>
    <div
        class="level-card"
        :style="{ background: `linear-gradient(228deg, ${levelInfo.startColor} 0%, ${levelInfo.endColor} 100%)` }"
    >
        <div class="level-line">
            <level-line :startColor="levelInfo.startColor" :endColor="levelInfo.endColor"></level-line>

            <div class="level-line-bg">
                <div
                    class="active"
                    :style="{ backgroundColor: levelInfo.textColor || levelInfo.color, width: rate + '%' }"
                ></div>
            </div>
        </div>
        <img src="../../assets/dadiwen-o1ceng-png.png" alt="" class="bg-img" />
        <div class="level-icon">
            <div class="level-item" v-for="(item, index) in levelList" :key="index">
                <span :style="{ color: levelInfo.textColor || levelInfo.color }">Lv{{ item.val }}</span>
            </div>
        </div>
        <div class="level-text">
            <div class="top" v-if="(levelInfo.level || 0) < 9">
                <div class="top-content">
                    <div class="text1">
                        <div class="top-num">
                            <van-image class="top-icon" width="28" height="28" :src="levelInfo.vicon" />
                            <div class="num-val" :style="{ color: levelInfo.textColor || levelInfo.color }">
                                {{ levelInfo.level }}
                            </div>
                        </div>
                        <span
                            class="tips1"
                            v-if="levelInfo.realm"
                            :style="{ color: levelInfo.textColor || levelInfo.color }"
                            >{{ levelInfo.realm }}</span
                        >
                        <span
                            class="tips2"
                            :style="{
                                color: levelInfo.textColor || levelInfo.color
                            }"
                            >{{ levelInfo.title }}</span
                        >
                    </div>
                    <div class="nowTips" :style="{ color: levelInfo.textColor || levelInfo.color }">
                        {{ now }}个拉索宇宙石
                    </div>

                    <div class="text2" :style="{ color: (levelInfo.textColor || levelInfo.color) + '70' }">
                        每十级将获得新的勋章奖励哦～
                    </div>
                </div>
            </div>
            <div class="top" v-else>
                <div class="num">
                    <van-image width="52" height="52" :src="levelInfo.icon" />
                    <span class="num-val" :style="{ color: levelInfo.textColor || levelInfo.color }">{{
                        levelInfo.level
                    }}</span>
                </div>
                <div class="top-content">
                    <div class="text1">
                        <span class="tips1" :style="{ color: levelInfo.textColor || levelInfo.color }">{{
                            levelInfo.realm
                        }}</span>
                        <span
                            class="tips2"
                            :style="{
                                color: levelInfo.textColor || levelInfo.color
                            }"
                            >{{ levelInfo.title }}</span
                        >
                    </div>
                    <div class="nowTips" :style="{ color: levelInfo.textColor || levelInfo.color }">
                        {{ now }}个拉索宇宙石
                    </div>

                    <div class="text2" :style="{ color: (levelInfo.textColor || levelInfo.color) + '70' }">
                        每十级将获得新的勋章奖励哦～
                    </div>
                </div>
            </div>

            <div class="right" :style="{ backgroundColor: levelInfo.color }">当前等级</div>

            <div class="bottom" v-if="!isMore">
                <div class="text1" :style="{ color: levelInfo.textColor || levelInfo.color }">
                    距离等级Lv{{ levelInfo.level ? levelInfo.level + 1 : 1 }}还差
                </div>
                <div class="text2" :style="{ backgroundColor: levelInfo.color + 'DD' }">{{ need }}个拉索宇宙石</div>
            </div>
        </div>
    </div>
</template>

<script>
import LevelLine from './LevelLine.vue';
export default {
    props: {
        levelInfo: {
            type: Object,
            default: () => {
                return {};
            }
        },
        money: {
            type: Number,
            default: 0
        },
        isMore: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            rates: [2, 34, 63, 89, 100]
        };
    },
    computed: {
        levelList() {
            let list = [];
            let start = this.levelInfo.level;
            let end = this.levelInfo.end;
            if (end > start + 3) {
                end = start + 3;
            }
            if (start > end - 3) {
                start = end - 3;
            }
            for (let i = start; i <= end; i++) {
                list.push({
                    val: i,
                    start: this.$rating * i,
                    end: this.$rating * (i + 1) - 1
                });
            }
            return list;
        },
        rate() {
            let list = [...this.levelList];
            let rate = 0;
            list.forEach((item, index) => {
                if (this.money > item.start) {
                    rate = this.rates[index];

                    if (this.money <= item.end) {
                        rate += Math.ceil(
                            ((this.money - item.start) * (this.rates[index + 1] - this.rates[index])) / this.$rating
                        );
                    }
                }
            });

            return rate;
        },
        need() {
            return Math.ceil(this.$rating - (this.now % this.$rating));
        },
        now() {
            return Math.floor(this.money);
        }
    },
    components: {
        LevelLine
    }
};
</script>

<style lang="less" scoped>
.level-card {
    margin: 16px;
    border-radius: 16px;
    position: relative;
}

.level-line {
    // background-color: #fff;
    position: relative;
    z-index: 1;
    svg {
        z-index: 1;
        position: relative;
        display: block;
    }

    .level-line-bg {
        position: absolute;
        height: 25vw;
        width: 79.2vw;
        display: block;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.3);
        z-index: 0;

        .active {
            height: 100%;
        }
    }
}
.level-icon {
    position: absolute;
    height: 25vw;
    width: 79.2vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    .level-item {
        position: absolute;
        font-size: 12px;
        line-height: 17px;
        .item-bg {
            content: '';
            width: 8px;
            height: 8px;
            background: rgba(255, 255, 255, 0.5);
            position: absolute;
            top: -15px;
            border-radius: 8px;
        }
        &:first-child {
            top: 20vw;
            left: 0;
        }
        &:nth-child(2) {
            top: 19.5vw;
            left: 31%;
        }
        &:nth-child(3) {
            top: 15.5vw;
            left: 61%;
        }
        &:nth-child(4) {
            top: 8.5vw;
            left: 88%;
        }
    }
}

.level-text {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 3;

    .nowTips {
        font-size: 12px;
        line-height: 18px;
        transform: scale(0.8) translate(-21px, -4px);
        color: #fff;
        font-weight: bold;
    }

    .top {
        padding: 20px;
        .flex();

        .num {
            position: relative;
            .van-iamge {
                display: block;
            }

            .num-val {
                position: absolute;
                left: 24px;
                top: 17px;
                font-weight: bold;
                line-height: 16px;
                font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
            }
        }

        .top-content {
            .text1 {
                .flex();
                .tips1 {
                    font-size: 16px;
                    font-weight: bold;
                    line-height: 24px;
                    margin-right: 4px;
                }
                .tips2 {
                    display: inline-block;
                    font-size: 12px;
                    line-height: 18px;
                    transform: scale(0.8) translate(-6px, 0);
                    border-radius: 2px;
                    padding: 0 8px;
                    background: rgba(255, 255, 255, 0.3);
                }
                .top-num {
                    .flex();
                    // align-items: flex-end;
                    .num-val {
                        font-size: 20px;
                        font-weight: bold;
                        line-height: 20px;
                    }
                    margin-right: 5px;
                }
            }
            .top-icon {
                transform: translateY(-3px);
                display: block;
            }
            .text2 {
                font-size: 12px;
                transform: scale(0.8) translate(-21px, -4px);
                line-height: 17px;
            }
        }
    }

    .right {
        font-size: 12px;
        color: #ffffff;
        line-height: 24px;
        padding: 0 14px;
        border-radius: 0px 16px 0px 12px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bottom {
        .flex();
        position: absolute;
        bottom: 16px;
        right: 10px;
        .text1 {
            font-size: 12px;
            line-height: 12px;
            transform: translateX(15px) scale(0.8);
        }
        .text2 {
            font-size: 12px;
            font-weight: bold;
            color: #ffffff;
            line-height: 12px;
            padding: 5px 12px;
            border-radius: 100px;
            transform: scale(0.8);
        }
    }
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
</style>
