<template>
    <view class="page-container">
        <view class="header-section">
            <view class="greeting-area">
                <view class="bubble-box">
                    <view class="bubble-text">尊敬的顾客，欢迎您来到广誉源！</view>
                    <view class="sub-text">你好，我是小源</view>
                </view>
                <view class="avatar-box">
                    <u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg" size="70" shape="circle"></u-avatar>
                </view>
            </view>

            <view class="header-actions">
                <u-grid :border="false" col="4">
                    <u-grid-item v-for="(item, index) in headerActions" :key="index">
                        <view class="icon-box">
                            <u-icon :name="item.icon" color="#fff" size="56rpx"></u-icon>
                        </view>
                        <text class="grid-text">{{ item.title }}</text>
                    </u-grid-item>
                </u-grid>
            </view>
        </view>

        <view class="content">
            <view class="category-section">
                <u-grid :border="false" col="4">
                    <u-grid-item v-for="(item, index) in categories" :key="index">
                        <u-avatar :src="item.img" size="112rpx" shape="circle" bgColor="#e0f2f1"></u-avatar>
                        <text class="grid-text">{{ item.title }}</text>
                    </u-grid-item>
                </u-grid>
            </view>

            <view class="rights-section">
                <view class="card-header">
                    <view class="header-left">
                        <u-icon name="gift-fill" color="#ff5e5e" size="64rpx"></u-icon>
                        <text class="text">权益礼包</text>
                    </view>
                    <u-button color="linear-gradient( 180deg, #FD7355 0%, #FDA790 100%)" 
                        shape="circle" text="去使用"
                        :customStyle="{ width: 'auto', height: '50rpx', margin: 0, padding: '0 36rpx' }"
                    ></u-button>
                </view>
                <view class="coupon-row">
                    <view class="coupon-item" v-for="(ticket, index) in tickets" :key="index">
                        <text class="price">{{ ticket }}元</text>
                    </view>
                </view>
            </view>

            <u-row gutter="10" customStyle="margin-bottom: 30rpx;">
                <u-col span="5">
                    <view class="content-card left-card">
                        <view>
                            <view class="card-title">
                                <text class="mtitle">项目推荐</text>
                                <text class="stitle">全部</text>
                            </view>
                            <u-image src="https://via.placeholder.com/60" width="100%" height="200rpx" radius="2rpx" mode="aspectFill"></u-image>
                        </view>
                        <view>
                            <view class="project-name">新中式香薰</view>
                            <view class="project-desc">放松身心，缓解疲劳</view>
                            <view class="project-price">
                                <text class="price">¥ <text class="big">198</text></text>
                                <text class="sales">近期已售 50+</text>
                            </view>
                        </view>
                    </view>
                </u-col>

                <u-col span="7">
                    <view class="content-card right-card">
                        <view class="card-title">
                            <text class="mtitle">新人上线</text>
                            <text class="stitle">更多</text>
                        </view>
                        <view class="card-list">
                            <view class="avatar-item" v-for="(p, i) in newComers" :key="i">
                                <u-avatar :src="p.avatar" size="80rpx" shape="circle"></u-avatar>
                                <text class="name">{{ p.name }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="content-card right-card">
                        <view class="card-title">
                            <text class="mtitle">极速达</text>
                            <text class="stitle">更多</text>
                        </view>
                        <view class="card-list">
                            <view class="avatar-item" v-for="(p, i) in speedyList" :key="i + 's'">
                                <u-avatar :src="p.avatar" size="80rpx" shape="circle"></u-avatar>
                                <text class="name">{{ p.name }}</text>
                            </view>
                        </view>
                    </view>
                </u-col>
            </u-row>

            <view class="mlist-section">
                <view class="section-header">
                    <text class="title">推荐商户</text>
                    <text class="more">更多</text>
                </view>
                <view class="merchant-card" v-for="(item, index) in merchantList" :key="index">
                    <view class="left-avatar">
                        <view class="badge">HOT</view>
                        <u-avatar :src="item.avatar" size="136rpx" shape="circle"></u-avatar>
                        <view class="status-pill green-bg">{{ item.status }}</view>
                    </view>
                    <view class="right-content">
                        <view>
                            <view class="row-header">
                                <text class="name">{{ item.name }}</text>
                                <text class="avail-time">最早可约: <text class="highlight">{{ item.earliestTime }}</text></text>
                            </view>
                            <view class="row-info flex">
                                <text class="score">{{ item.score }}分</text>
                                <u-line direction="col" length="18rpx" margin="0 16rpx"></u-line>
                                <text class="shop-name">{{ item.shopName }}</text>
                                <u-line direction="col" length="18rpx" margin="0 16rpx"></u-line>
                                <text>服务 {{ item.serviceCount }} 单</text>
                            </view>
                        </view>
                        <view>
                            <view class="row-tags">
                                <u-icon name="heart-fill" color="#ff6b81" size="14"></u-icon> 
                                <text class="tag-text">{{ item.likes }}</text>
                                <u-line direction="col" length="18rpx" margin="0 16rpx"></u-line>
                                <u-icon name="rmb-circle-fill" color="#f1c40f" size="14"></u-icon> 
                                <text class="tag-text">{{ item.coins }}</text>
                                <u-line direction="col" length="18rpx" margin="0 16rpx"></u-line>
                                <view class="text-tag" v-if="item.freeTravel">免出行费</view>
                            </view>
                            <view class="action-btn">
                                <u-button text="去下单" color="#00cba3" shape="circle" size="small"
                                    :customStyle="{ width: '138rpx', height: '56rpx', fontSize: '30rpx' }"
                                ></u-button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
import {
    windows,
    ranking,
    project,
    getBannerList,
    brightSpot,
    couponReceive,
    getAccessToken,
} from '@/api/index';
export default {
    data() {
        return {
            query: {},
            headerActions: [
                { title: '充值卡包', icon: 'coupon-fill' },
                { title: '商户入驻', icon: 'home-fill' },
                { title: '收藏商户', icon: 'star-fill' },
                { title: '我浏览过', icon: 'account-fill' }
            ],
            categories: [
                { title: '资深', img: 'https://cdn.uviewui.com/uview/album/1.jpg' },
                { title: '专家', img: 'https://cdn.uviewui.com/uview/album/2.jpg' },
                { title: '保健', img: 'https://cdn.uviewui.com/uview/album/3.jpg' },
                { title: '全部', img: 'https://cdn.uviewui.com/uview/album/4.jpg' }
            ],
            tickets: ['40', '30', '20', '10'],
            newComers: [
                { name: '赵青青', avatar: 'https://cdn.uviewui.com/uview/album/5.jpg' },
                { name: '都眉', avatar: 'https://cdn.uviewui.com/uview/album/6.jpg' },
                { name: '杨丽', avatar: 'https://cdn.uviewui.com/uview/album/7.jpg' }
            ],
            speedyList: [
                { name: '赵青青', avatar: 'https://cdn.uviewui.com/uview/album/5.jpg' },
                { name: '都眉', avatar: 'https://cdn.uviewui.com/uview/album/6.jpg' },
                { name: '杨丽', avatar: 'https://cdn.uviewui.com/uview/album/7.jpg' }
            ],
            merchantList: [
                { name: '赵青青', avatar: 'https://cdn.uviewui.com/uview/album/1.jpg', status: '可预约', score: '5.0', shopName: '小雨养生', serviceCount: 32, likes: 29, coins: 12, freeTravel: true, earliestTime: '今15:30' },
                { name: '赵青青', avatar: 'https://cdn.uviewui.com/uview/album/2.jpg', status: '可服务', score: '5.0', shopName: '小雨养生', serviceCount: 32, likes: 29, coins: 12, freeTravel: true, earliestTime: '今15:30' }
            ]
        };
    },
    onLoad(query) {
        this.query = query;
        // 静默登录
        if (query.code) this.onLogin();
    },
    onShow() {
        // 获取城市
        this.getCity();
        // 获取banner
		this.getBanner();
    },
    methods: {
        // 静默登录
		onLogin() {
			let params = {
				code: this.query.code
			}
            getAccessToken(params).then(res => {
                if (res.data.code == 200) {
                    uni.setStorageSync('wx_copenid', res.data.data.copenid);
                    uni.setStorageSync('access-token', res.data.data.token);
                }
            });
		},
        // 获取城市
        getCity() {
            uni.request({
                url: 'https://restapi.amap.com/v3/ip',
                data: {
                    key: '5457092e6c62b83c1b2e45dbe973d858'
                },
                success: (res) => {
                    uni.setStorageSync('selectCity', res.data.city.slice(0, 2));
                    if (res.data.status == 1 && res.data.rectangle) {
                        const parts = res.data.rectangle.split(';');
                        const [lon1, lat1] = parts[0].split(',').map(Number); // 转为数字
                        const [lon2, lat2] = parts[1].split(',').map(Number); // 转为数字
                        
                        // 计算中心点
                        const centerLon = (lon1 + lon2) / 2;
                        const centerLat = (lat1 + lat2) / 2;

                        console.log(`所在城市: ${res.data.province} ${res.data.city}`);
                        console.log(`计算出的中心坐标: [${centerLon}, ${centerLat}]`);
                    }
                }
            });
        },
        // 获取banner
        getBanner() {
            getBannerList({
				current: 1,
				size: 10,
			}).then(res => {
                if (res.data.code == 200) {
                    this.list = res.data.data.map(item => this.$globalData.publicUrl + item.cImgUrl);
                }
			});
        },
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    background-color: #f8f8f8;

    .header-section {
        overflow: hidden; 
        /* 使用椭圆裁剪出弧形 */
        clip-path: ellipse(120% 100% at 50% 0);
        background: linear-gradient(to right, #4ecdc4, #2bb9a9);

        .greeting-area {
            padding: 20rpx 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .bubble-box {
                padding: 16rpx 24rpx;

                .bubble-text {
                    font-size: 26rpx;
                    font-weight: 500;
                    color: #0D9F97;
                    padding: 6rpx 24rpx;
                    margin-bottom: 16rpx;
                    background: linear-gradient(90deg, #E8FDFD 0%, #AAEEE2 100%);
                    border-radius: 40rpx;
                }

                .sub-text {
                    font-size: 24rpx;
                    color: #fff;
                    opacity: 0.9;
                    padding: 0 24rpx;
                }
            }
        }

        .header-actions {
            margin: 0 32rpx;
            padding: 20rpx 0 40rpx;
            border-radius: 32rpx;
            background: linear-gradient(182deg, #26C3BC 0%, #0BBBC1 100%);

            .icon-box {
                margin-bottom: 10rpx;
            }

            .grid-text {
                color: #fff;
                font-size: 24rpx;
            }
        }
    }

    .content {
        padding: 30rpx;
        position: relative;
        z-index: 10;
    }

    .category-section {
        margin-bottom: 30rpx;

        .grid-text {
            font-weight: 500;
            font-size: 24rpx;
            color: #333333;
            margin-top: 16rpx;
        }
    }

    .rights-section {
        padding: 24rpx;
        margin-bottom: 30rpx;
        background: #FBECE7;
        border-radius: 20rpx;

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

            .header-left {
                display: flex;
                align-items: center;
            }

            .text {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-left: 10rpx;
            }
        }

        .coupon-row {
            display: flex;
            justify-content: space-between;

            .coupon-item {
                width: 22%;
                color: #FA5039;
                font-weight: bold;
                font-size: 32rpx;
                text-align: center;
                padding: 20rpx 0;
                border-radius: 12rpx;
                background-color: #fff;
                box-shadow: 0 4rpx 12rpx rgba(255, 94, 94, 0.1);
            }
        }
    }

    .content-card {
        height: 450rpx;
        padding: 24rpx;
        border-radius: 20rpx;
        background-color: #fff;

        .card-title {
            margin-bottom: 10rpx;
            display: flex;
            align-items: baseline;
            justify-content: space-between;

            .mtitle {
                font-size: 30rpx;
                font-weight: bold;
                color: #000;
            }

            .stitle {
                font-size: 24rpx;
                color: #999;
            }
        }

        &.left-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .project-name {
                font-size: 28rpx;
                font-weight: bold;
                color: #333;
            }

            .project-desc {
                font-size: 20rpx;
                color: #999;
                margin: 2rpx 0 10rpx;
            }

            .project-price {
                display: flex;
                align-items: baseline;
                justify-content: space-between;

                .price {
                    color: #ff5e5e;
                    font-size: 24rpx;

                    .big {
                        font-size: 36rpx;
                        font-weight: bold;
                    }
                }

                .sales {
                    font-size: 20rpx;
                    color: #ccc;
                }
            }
        }

        &.right-card {
            height: 220rpx;
            margin-bottom: 12rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            &:last-child {
                margin-bottom: 0;
            }

            .card-list {
                display: flex;
                justify-content: space-between;

                .avatar-item {
                    display: flex;
                    align-items: center;
                    flex-direction: column;

                    .name {
                        font-size: 22rpx;
                        color: #333;
                        margin-top: 8rpx;
                    }
                }
            }
        }
    }

    .mlist-section {
        .section-header {
            padding: 0 6rpx;
            margin-bottom: 16rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .more {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}

.merchant-card {
    padding: 24rpx 32rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;
    display: flex;
    position: relative;

    .left-avatar {
        width: 120rpx;
        margin-right: 24rpx;
        display: flex;
        align-items: center;
        flex-direction: column;

        .badge {
            color: #fff;
            font-size: 22rpx;
            position: absolute;
            top: 0;
            left: 0;
            padding: 4rpx 16rpx;
            border-radius: 8rpx 0 8rpx 0;
            background: linear-gradient(to right, #ff5e5e, #ff8a8a);
            z-index: 10;
        }

        .status-pill {
            font-size: 24rpx;
            color: #fff;
            margin-top: 8rpx;
            padding: 4rpx 24rpx;
            z-index: 5;
            border-radius: 20rpx;

            &.green-bg {
                background-color: #00cba3;
            }
        }
    }

    .right-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8rpx;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: #333;
            }

            .avail-time {
                font-size: 22rpx;
                color: #00cba3;
                padding: 6rpx 32rpx;
                background: linear-gradient(90deg, rgba(27, 214, 205, 0.1) 0%, rgba(27, 214, 205, 0.3) 100%);

                .highlight {
                    margin-left: 6rpx;
                }
            }
        }

        .row-info {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 12rpx;

            .score {
                color: #ff6b81;
                font-weight: bold;
            }

            .shop-name {
                
            }
        }

        .row-tags {
            font-size: 24rpx;
            color: #666;
            padding: 4rpx 0;
            display: flex;
            align-items: center;

            .tag-text {
                margin-left: 6rpx;
            }

            .text-tag {
                color: #F35031;
            }
        }

        .action-btn {
            position: absolute;
            right: 20rpx;
            bottom: 24rpx;
        }
    }
}
</style>