<!--  -->
<template>
    <div class="report-con">
        <van-nav-bar title="周报列表" @click-left="onNavBack" left-text="返回" left-arrow>
        </van-nav-bar>
        <div class="main">
            <div class="report">
                <div class="content">
                    <div class="list" v-if="weekList.length > 0">
                        <div class="item" v-for="(item, index) in weekList" :key="index"
                            @click="onClickItem(item.recordId)">
                            <div class="left">
                                <img :src="weekImg" alt />
                                <div class="middle">
                                    <div class="title">
                                        <span>周报</span>
                                        <p>{{ item.name }}</p>
                                    </div>
                                    <div class="overall">
                                        <div class="left">
                                            <span>总评</span>
                                            <p :style="{ color: calcResultColor(item.summaryLevel) }">
                                                {{ item.summary }}
                                            </p>
                                        </div>
                                    </div>
                                    <!-- <div class="trend">
                                      <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p>
                                  </div>-->
                                </div>
                            </div>

                            <div class="right">
                                <img :src="moreImg" alt />
                            </div>
                        </div>
                    </div>
                    <div class="list no-data" v-else>
                        <img :src="noDataImg" alt />
                        <p>连续佩戴两周产生对比数据</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import ToastService from '@/services/toast-service';
export default {
    data() {
        return {
            weekImg: require('@/assets/today/icons/week_report.png'),
            moreImg: require('@/assets/today/icons/more.png'),
            noDataImg: require('@/assets/today/images/no_data_01.png'),
            weekList: []
        }
    },
    computed: {
        uid() {
            return this.$store.getters.uid
        }
    },
    created() {

    },
    mounted() {
        this.$nextTick(() => {
            this.getWeekResult();
        })
    },
    methods: {
        getWeekResult() {
            ToastService.loading({
                message: '数据加载中'
            });
            let baseUrl =
                process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
            let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
            let reqParams = {
                uid: this.uid,
                type: this.$route.query.type
            };
            axios
                .get(reqUrl, {
                    params: { ...reqParams }
                    /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
                })
                .then(res => {
                    console.log('res', res);
                    const data = res.data.response;
                    this.weekList = data
                        .map(item => {
                            return {
                                name: item.Name.replace('周报', '').replace(/-/g, '.').replace(/~/g, '-'),
                                recordId: item.RecordId,
                                summary: item.Summary,
                                summaryLevel: item.SummaryLevel,
                                type: this.emoType
                            };
                        })
                        .reverse();
                    ToastService.success({
                        message: '数据加载完成'
                    });
                });
        },
        onNavBack() {
            this.$router.push({
                name: 'Insight'
            })
        },
        onClickItem(recordId) {
            this.$router.push({
                name: 'report',
                query: {
                    recordId: recordId,
                    name: this.currentEmoName,
                    isShowLeft: true,
                    uid: this.uid,
                    type: this.$route.query.type
                }
            });
        },
        // 计算结果采用哪种颜色
        calcResultColor(value, isCallBackClass) {
            let color = '';
            let className = '';
            switch (Number(value)) {
                case 0:
                    color = '#179b3b';
                    className = 'none';
                    break;
                case 1:
                    color = '#8dc21f';
                    className = 'mid';
                    break;
                case 2:
                    color = '#2ea7e0';
                    className = 'severe';
                    break;
                case 3:
                    color = '#ff5f8b';
                    className = 'severe';
                    break;
            }
            return isCallBackClass ? className : color;
        },
    },
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.report-con {
    height: 100vh;
    overflow: hidden;

    .main {
        position: relative;
        height: calc(100vh - 100px);
        overflow: scroll;

        .report {
            position: relative;
            height: 100%;
            overflow: scroll;
            background-color: #f5f5f5;

            .content {
                position: relative;

                .list {
                    position: relative;

                    .item {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        padding: 68px 30px;
                        background-color: #fff;
                        margin-bottom: 22px;

                        .left {
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-start;

                            img {
                                height: 50px;
                                width: 50px;
                            }

                            .middle {

                                .title,
                                .overall,
                                .trend {
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;

                                    padding-left: 26px;

                                    span,
                                    p {
                                        font-size: 36px;
                                        font-family: Source Han Sans CN;
                                        font-weight: 400;
                                        color: #8d8d8d;
                                        line-height: 60px;
                                    }
                                }

                                .title {
                                    span {
                                        padding-right: 40px;
                                    }

                                    p {
                                        color: #282828;
                                    }
                                }

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

                                    .left {
                                        p {
                                            padding-left: 40px;
                                            font-weight: bold;
                                        }
                                    }

                                    .right {
                                        img {
                                            height: 30px;
                                            width: 18px;
                                        }
                                    }
                                }

                                .trend {
                                    align-items: flex-start;
                                    text-align: left;
                                }
                            }
                        }

                        .right {
                            img {
                                width: 18px;
                                height: 30px;
                            }
                        }
                    }

                    &.no-data {
                        height: calc(100vh - 200px);
                        width: 100%;
                        @include center();
                        flex-direction: column;

                        img {
                            height: 220px;
                            width: 350px;
                        }

                        p {
                            color: #999;
                            font-size: 32px;
                            padding: 40px 0 130px 0;
                        }
                    }
                }
            }
        }
    }
}
</style>