<!--  -->
<template>
    <div class="pageContent achieveList">
        <NavBar title="成就列表" @on-click-left="$router.back()"></NavBar>
        <div class="content">
            <div class="list">
                <div class="item" v-for="item in conList" :key="item.id" @click="onRouterTo(item.id)">
                    <div class="left">
                        <img :src="item.imgPath" alt="">
                        <p v-if="item.isText">{{ item.target }}</p>
                    </div>
                    <div class="right">
                        <p class="percent">
                            <span>{{ calcStatus(item.status) }}</span><span class="notAchievedText">{{ (item.percent) * 100
                            }}%</span>

                        </p>
                        <div class="result">
                            <div class="reach" v-if="item.status == 2">
                                <p>达成<span>REACH</span></p>
                            </div>
                            <div class="notAchieved" v-else>
                                <span>NOT ACHIEVED</span>
                            </div>

                        </div>
                        <div class="progress">
                            <div class="progressIn" :style="{ width: item.percent * 100 + '%' }"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import develeopMent from '@/api/development';
export default {
    components: {
        NavBar
    },
    data() {
        return {
            conList: null
        }
    },
    computed: {
        personId() {
            return this.$store.getters.personId
        }
    },
    created() {

    },
    mounted() {
        this.getAchieveList();
    },
    methods: {
        calcStatus(value) {
            let result = '';
            switch (value) {
                case 1:
                    result = '进行中';
                    break;
                case 0:
                    result = '未开始';
                    break;
                case 2:
                    result = '已完成';
                    break;
                default:
                    break;


            };
            return result
        },
        async getAchieveList() {
            this.$toast.loading({
                message: '加载中'
            })
            let re = await develeopMent.AchieveList({
                personId: this.personId
            });
            if (re) {
                if (re.succeed) {
                    console.log("成就列表", re);

                    // 创建一个新的数组，将arr1和arr2对应项合并
                    let list = re.data.map(item => {

                        return {
                            id: item.id,
                            level: item.level,
                            percent: item.percent,
                            target: item.target,
                            isText: item.id !== 1 && item.id !== 10,
                            imgPath: require(`@/assets/development/images/achieve/${item.level}.png`),

                            status: item.status,
                        };
                    });
                    this.conList = list
                    this.$toast.success({
                        message: '加载完成'
                    })
                    console.log("新数组", this.conList);
                } else {
                    this.$toast(re.message);
                }
            }
        },
        onRouterTo(id) {
            this.$router.push({
                name: 'achieveDetails',
                query: {
                    id: id
                }
            })
        }
    },
}
</script>
<style scoped lang="scss">
@import './include.scss';

/* @import url(); 引入css类 */
.achieveList {


    .content {
        /* padding: 0 40px; */

        .list {



            overflow: scroll;

            .item {
                height: 300px;
                padding: 30px 50px;
                margin: 30px 0;
                border-radius: 60px;
                background-color: #000000;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    height: 100%;
                    width: 35%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    flex-direction: column;

                    img {
                        height: 80%;
                        width: 100%;
                        object-fit: contain;
                    }

                    p {
                        font-size: 24px;
                        color: #fff;
                        /* padding: 20px 0; */
                    }
                }

                .right {
                    height: 100%;
                    width: 60%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-end;
                    flex-direction: column;
                    color: $green;
                    font-weight: bold;

                    p {
                        font-size: 52px;
                    }

                    .percent {
                        @include center();
                        color: $green;

                        span {
                            font-size: 42px;
                            color: #fff;
                        }

                        .notAchievedText {
                            margin-left: 10px;
                            font-size: 52px;
                        }

                    }

                    .result {
                        font-size: 42px;

                        .reach {
                            span {
                                font-size: 52px;
                                color: #fff;
                                margin-left: 10px;
                            }
                        }

                        .notAchieved {
                            font-size: 42px;
                            color: gray;

                        }

                    }

                    .progress {
                        position: relative;
                        margin-top: 20px;
                        height: 40px;
                        width: 100%;
                        background-color: gray;
                        border-radius: 30px;

                        .progressIn {
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 40px;
                            width: 60%;
                            background-color: $green;
                            border-radius: 30px;
                        }
                    }
                }
            }
        }
    }
}
</style>