<!--  -->
<template>
    <div class="pageContent achieveDetails">
        <NavBar title="成就详情" @on-click-left="$router.back()"></NavBar>
        <div class="content" v-if="detail">
            <div class="banner">
                <div class="item">
                    <div class="left">
                        <img :src="detail.imgPath" alt="">
                        <p v-if="detail.isText">{{ detail.target }}</p>
                    </div>
                    <div class="right">
                        <p class="percent">
                            <span>{{ calcStatus(detail.status) }}</span><span class="notAchievedText">{{
                                (detail.taskData.percent.toFixed(1))
                                * 100
                            }}%</span>

                        </p>
                        <div class="result">
                            <div class="reach" v-if="detail.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: detail.taskData.percent * 100 + '%' }"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="left">
                    <img :src="achieve.leftImg" alt="">
                    <p>{{ detail.completionDesc }}</p>
                </div>
                <div class="right">
                    <div class="taskList">
                        <div class="taskItem" v-for="item in detail.taskData.taskList" :key="item.id">
                            <div class="top">
                                <img :src="activeImg" alt="" v-if="item.status === 2">
                                <img :src="unActiveImg" alt="" v-else>
                                <p>{{ item.name }}</p>
                            </div>
                            <div class="taskBottom">
                                <div class="taskCheck">
                                    <p>任务回看</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <p class="title">目标</p>
                <p class="text">{{ detail.target }}</p>
                <p class="title">目标解释</p>
                <div class="text explain" v-for="(item, index) in tasks" :key="index">{{ item }}</div>
                <!-- <p class="text explain">{{ detail.targetDesc }}</p> -->
            </div>
        </div>
    </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import develeopMent from '@/api/development';
export default {
    components: {
        NavBar
    },
    computed: {
        tasks() {
            return this.detail ? this.detail.targetDesc.split('\r\n') : [];
        }
    },
    data() {
        return {
            achieve: {
                percent: 0.22,
                status: 1,
                isText: false,
                imgPath: require('@/assets/development/images/achieve/1.png'),
                target: '美好开始',
                leftImg: require('@/assets/development/images/achieve/d_01.png')
            },
            detail: null,
            activeImg: require('@/assets/development/images/active.png'),
            unActiveImg: require('@/assets/development/images/unactive.png'),
            id: ''
        }
    },
    created() {

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


            };
            return result
        },
        async initData() {
            this.$toast.loading({
                message: '加载中'
            })
            let re = await develeopMent.LevelDetail({
                levelId: this.id
            });
            if (re) {
                if (re.succeed) {
                    this.detail = re.data;
                    this.detail.imgPath = require(`@/assets/development/images/achieve/${re.data.level}.png`);
                    this.detail.isText = re.data.level !== 1 && re.data.level !== 10;
                    this.$toast.success({
                        message: '加载完成'
                    })
                    console.log("this.detail", this.detail);
                } else {
                    this.$toast(re.message);
                }
            }
        }

    },
}
</script>
<style scoped lang="scss">
@import './include.scss';

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


    .content {
        .banner {
            .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;
                        font-weight: bold;
                        /* 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;
                        }
                    }
                }
            }
        }

        .main {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                width: 25%;
                /* padding-top: 100px; */
                display: flex;
                justify-content: flex-end;
                align-items: center;
                flex-direction: column;

                img {
                    object-fit: contain;
                }

                p {
                    padding-top: 10px;
                    font-size: 36px;
                    color: $green;
                }
            }

            .right {
                width: 75%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                flex-direction: column;

                .taskList {
                    .taskItem {
                        .top {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            padding: 10px 0;

                            img {
                                height: 50px;
                                width: 50px;
                                margin-right: 20px;
                                object-fit: contain;
                            }

                            p {
                                font-size: 32px;
                                font-weight: bold;

                            }
                        }

                        .taskBottom {
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;

                            .taskCheck {
                                width: 60%;
                                border-radius: 40px;
                                background-color: #000;
                                color: #fff;
                                font-size: 32px;
                                padding: 10px 30px;
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }

        .bottom {
            margin-top: 60px;
            padding: 30px;
            border-radius: 40px;
            border: 5px solid #000;

            .title {
                font-size: 36px;
                font-weight: bold;

            }

            .text {
                font-size: 32px;
                color: #434144;
                padding-top: 10px;
                padding-bottom: 20px;

                &.explain {
                    padding-bottom: 0;
                }
            }
        }
    }
}
</style>