<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')
        if (token) {
            globalThis.localStorage.setItem('token', token)
            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="container-wrap">
        <div class="home-container">
            <!-- 标题提示语部分 -->
            <section class="title">
                <!-- 反正背景图颜色 -->
                <img width="78px" :src="titleSrc" style="width: 78px;"/>
                <h2> <span>您好</span> {{ title }}</h2>
            </section>
            <!-- 轮播图部分 -->
            <section class="swiper">
                <!-- <van-image width="100%" :src="bannerSrc" /> -->
                <swiper-banner :list="bannerList" />
            </section>
            <!-- 服务提示语部分 -->
            <section class="tips">
                <van-icon name="info-o" />
                <span>服务项目及费用仅供参考，具体以供应商实际提供为准。</span>
            </section>
            <!-- 生态系统部分 -->
            <section class="ecosystem">
                <h3>生态服务</h3>
                <div class="service-grid">
                    <div class="service-item" style="grid-column: 1 / 16;">
                        <div>
                            <h4>健康管理</h4>
                            <p>点击下方查看更多服务</p>
                        </div>
                        <button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
                    </div>
                    <div style="grid-column: 16 / 24;">
                        <div class="line-bg" style="margin-bottom: 10px;">
                            <span>子女教育</span>
                            <button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
                        </div>
                        <div class="line-bg">
                            <span>财富管理</span>
                            <button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
                        </div>
                    </div>
                    <div class="service-item" style="grid-column: 1 / 12;">
                        <div>
                            <h4>养老服务</h4>
                            <p>点击下方查看更多服务</p>
                        </div>
                        <button class="go-btn" @click="goEcosystem(28)">去看看</button>
                    </div>
                    <div class="service-item" style="grid-column: 12 / 24;">
                        <div>
                            <h4>生活娱乐</h4>
                            <p>点击下方查看更多服务</p>
                        </div>
                        <button class="go-btn" @click="goEcosystem(55)">去看看</button>
                    </div>
                </div>
            </section>
        </div>
    </section>
</template>

<style lang="scss" scoped>
$title-height: 120px;
$primary-color: #c9202d;
$card-bg-color: #FFFFFF;
$border-radius: 12px;
$ecosystem-bg-color: linear-gradient(#fbeef0 10px, #FFF 50px);

.container-wrap {
    position: relative;
    background-color: #F5F5F5;
    min-height: 100vh;

    padding-bottom: 20px;

    .home-container {
        width: 100%;
        overflow: hidden;
        position: relative;

        .title {
            width: 100%;
            height: $title-height;
            background-color: $primary-color;
            color: white;
            padding: 15px 20px;
            position: relative;

            .logo {
                display: flex;
                align-items: center;

                span {
                    font-size: 16px;
                    font-weight: bold;
                }
            }

            h2 {
                font-size: 18px;
                font-weight: bold;

                span {
                    font-size: 25px;
                    font-weight: bold;
                }


                &::before {
                    content: "“";
                }

                &::after {
                    content: "”";
                }
            }
        }

        .swiper {
            padding: 0;
            margin-top: -70px;
            position: relative;
            // z-index: 10;

            .banner-card {
                background-color: $card-bg-color;
                border-radius: $border-radius;

                .card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;

                    span {
                        color: #8BC34A;
                        font-size: 12px;
                    }
                }

                .banner-content {
                    h3 {
                        color: #8BC34A;
                        font-size: 24px;
                        margin-bottom: 5px;
                        font-weight: bold;
                    }

                    p {
                        font-size: 12px;
                        color: #666;
                        margin: 5px 0;
                    }

                    .en-text {
                        font-size: 10px;
                        color: #999;
                        margin-bottom: 10px;
                    }
                }
            }
        }

        .tips {
            margin: 15px 10px;
            padding: 12px 15px;
            background-color: #fff;
            border-radius: $border-radius;
            display: flex;
            align-items: center;

            span {
                margin-left: 10px;
                font-size: 12px;
                color: #795548;
            }
        }

        .ecosystem {
            margin: 10px 10px;
            border-radius: $border-radius;
            padding: 15px 15px;
            background: $ecosystem-bg-color;

            h3 {
                font-size: 18px;
                font-weight: bold;
                margin: 15px 0;
                color: #333;
            }

            .service-grid {
                display: grid;
                grid-template-columns: repeat(24, 1fr);
                gap: 15px;

                .line-bg {
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    border-radius: 8px;
                    // height: 38%;
                    background: $ecosystem-bg-color;
                    font-size: 14px;
                    font-weight: bold;
                    color: #333;
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .go-btn-v {
                        width: 60px;
                        align-self: flex-end;
                        background-color: #fff;
                        color: #E53935;
                        border: 1px solid #E53935;
                        border-radius: 15px;
                        padding: 3px 10px;
                        font-size: 12px;
                    }
                }

                .service-item {
                    background: $ecosystem-bg-color;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    border-radius: 8px;
                    padding: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    min-height: 120px;

                    h4 {
                        font-size: 16px;
                        font-weight: bold;
                        color: #333;
                    }

                    p {
                        font-size: 12px;
                        color: #666;
                    }


                    .go-btn {
                        align-self: center;
                        width: 60px;
                        background-color: #E53935;
                        color: white;
                        border: none;
                        border-radius: 15px;
                        padding: 3px 10px;
                        font-size: 12px;
                    }



                }
            }
        }
    }
}
</style>
