//
//  UserView.swift
//  demo
//
//  Created by Jason on 2024/1/23.
//

import SwiftUI

struct UserView: View {
    var body: some View {
        ScrollView {
            Header
            ToVip

            VStack(spacing: 16) {
                InfoList
                Notice
                OrderShow
                Coupons
                tj
            }
            .padding(16)
            .background(LinearGradient(colors: [Color.orange, Color.gray], startPoint: .top, endPoint: UnitPoint(x: 0, y: 0.5)))
            .cornerRadius(12)
            .offset(y: -76)
        }
    }

    var Header: some View {
        HStack {
            Image("Images/logo")
                .resizable()
                .frame(width: 64, height: 64)
                .cornerRadius(32)
                .overlay(
                    RoundedRectangle(cornerRadius: 32, style: .continuous)
                        .stroke(Color.red, lineWidth: 2)
                )

            VStack(alignment: .leading, spacing: 12, content: {
                Text("用户名称")
                    .font(.title2)
                    .fontWeight(.regular)
                Text("我的用户简介，超出部分需要隐藏，隐藏需要自动设置，这个文字长度也要有约束")
                    .font(.caption)
                    .foregroundColor(Color.gray)
                    .lineLimit(1)
            })

            Image(systemName: "gearshape")
                .foregroundColor(Color.gray)
        }
        .padding(.horizontal, 16)
    }

    var ToVip: some View {
        HStack(spacing: /*@START_MENU_TOKEN@*/nil/*@END_MENU_TOKEN@*/, content: {
            Spacer()
            Button("立即开通") {}
                .foregroundColor(Color.red)
                .font(.subheadline)
                .padding(.vertical, 8)
                .padding(.horizontal, 16)
                .background(Color.gray)
                .cornerRadius(32)
        })
        .padding(16)
        .padding(.bottom, 64)
        .frame(maxWidth: .infinity)
        .background(
            Image("Images/banner3").resizable(resizingMode: .tile)
//                .overlay(
//            UnevenRoundedRectangle(cornerRadii: RectangleCornerRadii(topLeading: 12, topTrailing: 12))
//            )
        )
        .cornerRadius(12)
        .padding(.horizontal, 16)
    }

    var InfoList: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 16) {
                ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
                    VStack {
                        HStack {
                            Image(systemName: "star")
                            Text("我的积分")
                        }
                        Text("共8888分")
                            .font(.caption)
                    }
                    .padding(12)
                    .background(Color.white)
                    .cornerRadius(8)
                }
            }
        }
    }

    var Notice: some View {
        HStack {
            Text("资讯")
                .padding(4)
                .background(Color.red)
                .foregroundColor(Color.white)
            Text("平台与2024年1余额开始更新，敬请期待@@@")
                .foregroundColor(Color.gray)
                .frame(maxWidth: .infinity)
                .multilineTextAlignment(/*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/)
                .lineLimit(1)
            Text("更多")
                .foregroundColor(Color.secondary)
        }
        .frame(maxWidth: .infinity)
        .padding(8)
        .background(Color.white)
        .cornerRadius(8)
    }

    var OrderShow: some View {
        VStack(spacing: 16) {
            HStack {
                Text("订单中心")
                Spacer()
                ShowMore()
            }
            .padding(8)
            HStack {
                Spacer()
                ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
                    VStack {
                        Image(systemName: "wallet.pass")
                        Text("待付款")
                            .font(.system(size: 12))
                    }
                    Spacer()
                }
            }
        }
        .background(Color.white)
        .cornerRadius(6)
    }

    var Coupons: some View {
        VStack(spacing: 16) {
            HStack {
                Spacer()
                ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
                    VStack {
                        Image(systemName: "wallet.pass")
                        Text("优惠券")
                            .font(.system(size: 12))
                    }
                    Spacer()
                }
            }
        }
        .padding(12)
        .background(Color.white)
        .cornerRadius(6)
    }

    let columns = [GridItem(.flexible()), GridItem(.flexible())]

    var tj: some View {
        LazyVGrid(columns: columns, alignment: .center) {
            Section {
                ForEach(0 ..< 20, id: \.self) { _ in
                    GoodsCard()
                }
            }
            header: {
                Text("推荐广场")
            }
        }
    }
}

//
// #Preview {
//    UserView()
// }