<script>
import { Image as VanImage, Icon, Dialog } from 'vant';
import Swiper from './components/swiper/swiper.vue';
import { getEcosystem } from '@/assets/js/utils/ecosystem'
import { fetchUserInfo } from '@/api/user/token'
import { getParamsFromUrl } from '@/assets/js/utils/get-url'

export default {
    name: "home",
    components: {
        VanImage,
        VanIcon: Icon,
        SwiperBanner: Swiper
    },
    data() {
        return {
            bannerList: [
                {
                    imgUrl: require("./img/swiper-image.svg")
                },
                {
                    imgUrl: require("./img/swiper-image.svg")
                }
            ],
            name: "",
            sex: "",
            type: "",
            permission: {
                goNext: true
            },
            titleSrc: require("@/assets/images/logo.png"),
            bannerSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg",
        }
    },
    computed: {
        title() {
            if (!Number(this.type)) return "欢迎使用幸福人寿生态系统！"
            return `亲爱的${this.name}${Number(this.sex) === 1 ? '女士' :
                Number(this.sex) === 0 ? '先生' : ''}`
        }
    },
    methods: {
        goEcosystem(ecosystem, swe) {
            this.permission.goNext && this.$router.push({
                name: 'service',
                params: {
                    ecosystem: getEcosystem(ecosystem)
                },
                query: {
                    swe: swe
                }
            })
        },
        showErrorDialog(msg) {
            Dialog({
                message: msg,
            }).then(() => {
                this.$router.go(-1)
            })
        }
    },
    mounted() {

        const params = getParamsFromUrl(globalThis.location.href)
        const token = params.get('token')
        const stoken = globalThis.sessionStorage.getItem('token')
        if (token || stoken) {
            globalThis.sessionStorage.setItem('token', token || stoken)
            fetchUserInfo().then(res => {
                const { content } = res.content
                this.name = content.name
                this.sex = Number(content.sex)
                this.type = Number(content.type)
            }).catch(() => {
                this.showErrorDialog("您的登录已过期，请退出重试")
            })
        }
        else this.showErrorDialog("页面访问有误，请重试")
    }
}
</script>

<template>
    <section class="home-container">
        <div class="nav">
            <!-- <img src="../../assets/images/sunful/sunful-bg.svg" alt=""> -->
            <!-- 标题提示语部分 -->
            <section class="title">
                <!-- <img width="78px" :src="titleSrc" /> -->
                <h2> <span>您好~</span>{{ title }}</h2>
            </section>
        </div>

        <div class="content">
            <div>
                <!-- 服务提示语部分 -->
                <!-- <section class="tips"> -->
                <!-- 消息提醒图标 -->
                <!-- <img :src="require('@/assets/images/sunful/msg.svg')" /> -->
                <!-- <p>服务项目及费用仅供参考，具体以供应商实际提供为准。</p> -->
                <!-- <button>点击了解</button> -->
                <!-- </section> -->

                <!-- 服务提示语部分 -->
                <section class="tips">
                    <van-icon name="info-o" />
                    <div class="text">服务项目及费用仅供参考，具体以供应商实际提供为准。</div>
                </section>
                <!-- banner图 -->
                <img src="@/assets/images/sunful/banner.webp" alt="">

                <!-- 生态系统部分 -->
                <section class="ecosystem">
                    <div>
                        <h3>
                            <img :src="require('@/assets/images/sunful/sunful-eco.svg')" alt="生态服务">
                            <div>生态服务</div>
                        </h3>
                        <div class="flex">
                            <div class="service-item health">
                                <h4>健康管理</h4>
                              <p>&nbsp;</p>
                                <button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
                            </div>

                            <div class="flex flex-column">
                                <div class="service-item children">
                                    <h4>子女教育</h4>
                                  <p>&nbsp;</p>
                                    <button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
                                </div>
                                <div class="service-item wealth">
                                    <h4>财务管理</h4>
                                  <p>&nbsp;</p>
                                    <button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex service-row">
                        <div class="service-item old">
                            <div>
                                <h4>养老服务</h4>
                              <p>&nbsp;</p>
                            </div>
                            <button class="go-btn" @click="goEcosystem(28)">去看看</button>
                        </div>
                        <div class="service-item life">
                            <div>
                                <h4>生活娱乐</h4>
                              <p>&nbsp;</p>
                            </div>
                            <button class="go-btn" @click="goEcosystem(55)">去看看</button>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
</template>

<style lang="scss" scoped>
$inset-padding: 17px;
$bg-color: #f5f5f5;


.home-container {
    position: relative;

    .nav {
        position: relative;
        z-index: 1; // 最底层
        background-image: url("../../assets/images/sunful/sunful-bg.webp");
        background-size: 100%;
        background-position: center top;
        background-repeat: no-repeat;

        padding: $inset-padding;

        h2 {
            margin: 52px 0 60px 7px;

            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #FFFFFF;
            line-height: 24px;
            text-align: left;
            font-style: normal;
        }
    }

    .content {
        background-color: $bg-color;
        position: absolute;
        top: 132px;
        left: 0;
        z-index: 3; // 最顶层
    }
}

.content {
    padding: 0 0 20px 0;
    width: 100vw;
    border-radius: 12px;

    &>div {
        position: relative;
        top: -19px;
        padding: 0 10px;
    }
}

.tips {
    margin: 0 0 10px 0;
    border-radius: 11px;
    padding: 13px 11px 15px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;

    &+img {
        width: 100%;
    }

    &>img {
        width: 51px;
        height: 14px;
        margin-right: 3px;
    }

    &>p {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 11px;
        color: #6B6B6B;
        line-height: 16px;
        text-align: left;
        font-style: normal;

        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    &>button {
        outline: none;
        border: none;
        padding: 6px 9px;
        height: 26px;
        width: 58px;
        border-radius: 6px;

        background-image: url("../../assets/images/sunful/bt-bg.svg");
        background-size: contain;
        background-repeat: no-repeat;

        overflow-wrap: break-word;
        color: rgba(142, 80, 33, 1);
        font-size: 10px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 14px;
    }

    .text {
        margin-left: 3%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 11px;
        color: #6B6B6B;
        line-height: 16px;
        text-align: left;
        font-style: normal;

        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.ecosystem {
    margin: 14px 0;

    h3 {
        display: flex;
        gap: 5px;
        margin-bottom: 14px;
    }

    button {
        background-color: #CA2736;
        color: #fff;
        border-radius: 13px;
        border: none;
        padding: 5px 8px;
        margin-bottom: 19px;

        font-family: PingFangSC;
        font-size: 11px;
        color: #FFFFFF;
        line-height: 16px;
        text-align: left;
        font-style: normal;
    }

    h4 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #000000;
        line-height: 14px;
        text-align: left;
        font-style: normal;
    }

    p {
        margin-top: 10px;
        margin-bottom: 19px;

        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 11px;
        color: #A1A1A1;
        line-height: 10px;
        text-align: left;
        font-style: normal;
    }
}

.service-grid {
    display: grid;
    align-items: stretch;
    gap: 10px 5px;
    grid-template-areas:
        "a a a b b b b b"
        "a a a c c c c c"
        "d d d d e e e e";

    .service-item {
        &:nth-of-type(1) {
            grid-area: a;
        }

        &:nth-of-type(2) {
            grid-area: b;
        }

        &:nth-of-type(3) {
            grid-area: c;
        }

        &:nth-of-type(4) {
            grid-area: d;
        }

        &:nth-of-type(5) {
            grid-area: e;
        }
    }
}

.health {
    // border-radius: 15px;
    // border-right: 2px solid #fce4e4;
    // // border-bottom: 2px solid #fce4e4;

    background-image: url("../../assets/images/sunful/book.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left top;

    padding: 86px 0 0 11px;
    width: 37%;
    margin-right: 10px;
}

.children,
.wealth {
    background-image: url("../../assets/images/sunful/hat.webp");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left top;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    padding: 18px 0 0 77px;

    h4 {
        text-align: center;
    }

    p {
        margin-top: 8px;
        margin-bottom: 7px;
    }

    button {
        color: #D8AF70;
        background: transparent;
        border: 1px solid #D8AF70;
        padding: 1px 4px;
    }
}

.wealth {
    transform: translateY(-18px);

    background-image: url("../../assets/images/sunful/treasure.webp");

    p {}

    button {}
}

.old,
.life {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left top;

    padding: 21px 0 0 15px;
    width: 53%;

    p {
        margin-bottom: 46px;
        margin-top: 10px;
    }

    button {
        margin-bottom: 30px;
    }
}

.old {
    background-image: url("../../assets/images/sunful/old.webp");

    button {
        background-color: #D8AF70;
    }
}

.life {
    background-image: url("../../assets/images/sunful/card.webp");

    p {}

    button {}
}
.flex {
    &.flex-column {
        flex-flow: column nowrap;
        width: 65%;
        gap: 4vw;
    }

    &.service-row {
        gap: 10px;
        margin-top: -20px;
        justify-content: center;
        align-items: center;
    }
}
</style>
