<template>
    <div class="level">
        <div class="level-title">
            <div class="text1">绿洲宇宙元力等级系统</div>
            <div class="text2">
                在绿洲宇宙中使用绿洲石，绿洲石将会产生原力，原力是绿洲藏家晋升之路的基础。原力越高，境界与头衔越高。
            </div>
        </div>
        <level-card :levelInfo="levelInfo" :isMore="isMore" :money="money"></level-card>
        <div class="level-title">
            <div class="text1">勋章展示</div>
            <div class="text2">10级以上(包含10级)将会获得勋章奖励，最高等级Lv99</div>
        </div>
        <template v-if="showSwiper">
            <swiper
                :initialSlide="prevIndex"
                :options="swiperOption"
                slidesPerView="auto"
                :spaceBetween="16"
                class="box-swiper"
            >
                <template v-for="(item, index) in medals" :key="index">
                    <swiper-slide
                        class="box"
                        :style="{
                            background: `linear-gradient(180deg, ${item.startColor} 0%, ${item.endColor} 100%)`
                        }"
                        v-if="!item.hide"
                    >
                        <van-image
                            class="box-bg-img"
                            :src="require('../../assets/diwen-gongyong-png.png')"
                            width="88"
                            height="100"
                        />

                        <div class="box-content">
                            <div class="box-bg">
                                <van-image width="40" height="40" :src="item.icon" />
                                <span class="text1" :style="{ color: item.color }">**</span>
                            </div>
                            <div class="box-text" :style="{ color: item.color }">Lv{{ item.start }}-{{ item.end }}</div>
                        </div>
                    </swiper-slide>
                </template>
            </swiper>
        </template>

        <div class="table-title">原力级别详情</div>

        <div class="table">
            <div class="tr">
                <div class="th">原力级别</div>
                <div class="th">境界</div>
                <div class="th">头衔</div>
            </div>

            <div class="tr" v-for="(item, index) in levels" :key="index">
                <div class="td">
                    Lv{{ item.endLevel !== 0 ? item.startLevel + '~' : item.startLevel }} {{ item.endLevel || '' }}级
                </div>
                <div class="td">{{ item.realm || '/' }}</div>
                <div class="td">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';
import level from '../../mixins/level';
import LevelCard from '../../components/level/LevelCard';
import SwiperCore from 'swiper';

// install Swiper modules
export default {
    data() {
        return {
            swiperOption: {
                on: {
                    init: swiper => {
                        console.log(swiper);
                    }
                }
            }
        };
    },
    computed: {
        prevIndex() {
            return this.levelInfo.level ? Math.floor(this.levelInfo.level / 10) - 1 : 0;
        }
    },
    mixins: [level],
    components: {
        Swiper,
        SwiperSlide,
        LevelCard
    }
};
</script>

<style lang="less" scoped>
.level-title {
    padding: 10px 16px;
    .text1 {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
    }

    .text2 {
        font-size: 12px;
        color: #939599;
        line-height: 17px;
    }
}
/deep/.box-swiper {
    padding: 6px 0 30px 16px;
    .swiper-slide {
        // background-color: @bg3;
        height: 100px;
        width: 88px;
    }
}
.table-title {
    font-size: 12px;
    color: #939599;
    line-height: 17px;
    .flex();
    justify-content: center;
    &::before,
    &::after {
        content: '';
        background: rgba(147, 149, 153, 0.5);
        width: 42px;
        height: 1px;
        display: block;
        margin: 0 10px;
    }
}
.table {
    margin: 16px;
    border-radius: 12px;
    overflow: hidden;
    .tr {
        height: 32px;
        .flex();

        & > div {
            width: 33%;
            padding: 0 6.4vw;
            box-sizing: border-box;

            &.th {
                font-size: 12px;
                color: #000000;
                line-height: 17px;
                white-space: nowrap;
            }

            &.td {
                font-size: 12px;
                color: #939599;
                line-height: 17px;
                white-space: nowrap;
                flex-shrink: 0;
                &:first-child {
                    color: #000000;
                }
            }
        }

        &:nth-child(2n + 1) {
            background: #f5f7fa;
        }
    }
}

.box {
    position: relative;
    border-radius: 8px;

    .box-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .flex-col();
        align-items: center;

        .box-text {
            white-space: nowrap;
            font-size: 12px;
            line-height: 20px;
            padding: 0 6px;
            background-color: rgba(255, 255, 255, 0.3);
            margin-top: 8px;
            border-radius: 12px;
        }
    }

    .box-bg {
        position: relative;
        .van-image {
            display: block;
        }

        .text1 {
            position: absolute;
            top: 18px;
            left: 19px;
            font-size: 12px;
            font-weight: bold;
            line-height: 10px;
            transform: scale(0.8);
        }
    }

    .box-bg-img {
        display: block;
    }
}
</style>
