<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    import { getCalculateAge } from '@/utils/date'
    import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
    import ConfirmDialog from '@/components/ConfirmDialog/index.vue'

    const pageData = reactive({
        loading: false,
        villageName: '',
        villageFullName: '',
        workersParam: [],
        contactMobile: '',
        contactName: '',
        showConfirmDialog: false,
    })
    // 字典值
    const DictData = reactive({
        sexArr: [], // 性别
        educationArr: [], // 学历
    })
    onLoad((options) => {
        const param = JSON.parse(decodeURIComponent(options.param))
        pageData.villageName = param.villageName
        uni.setNavigationBarTitle({
            title: '劳动力池详情',
        })
        getLaborAppDetail(param.id)
    })
    async function getLaborAppDetail(id: string) {
        pageData.loading = true
        try {
            const sexRes = await LinghuoyonggongAPI.gitListByCodeDict({ code: 'sex' })
            DictData.sexArr = sexRes
            
            const eduRes = await LinghuoyonggongAPI.gitListByCodeDict({ code: 'education' })
            DictData.educationArr = eduRes
            
            const detailRes = await LinghuoyonggongAPI.getLaborAppDetail({ id })
            pageData.villageFullName = detailRes.villageFullName
            pageData.workersParam = detailRes.workers || []
            pageData.contactMobile = detailRes.contactMobile
            pageData.contactName = detailRes.contactName ? 
                (detailRes.contactName.substring(0, 1) + '**') : '负责人'
        } finally {
            pageData.loading = false
        }
    }
    // 返回字典中的中文值
    function returnDictZhVel(type: any, val: any) {
        let valText = ''
        const arr = type === 'gender' ? DictData.sexArr : DictData.educationArr
        const item = arr.find(i => Number(i.itemValue) === val)
        return item ? item.itemText : ''
    }
    function makePhoneCall() {
        uni.makePhoneCall({
            phoneNumber: pageData.contactMobile,
        })
    }
</script>

<template>
    <view class="details_page">
        <!-- 沉浸式头部 -->
        <view class="immersive-header">
            <view class="header-bg"></view>
            <view class="header-content">
                <view class="village-info">
                    <text class="village-label">所在位置：{{ pageData.villageFullName || '正在加载...' }}</text>
                    <text class="village-name">{{ pageData.villageName }}</text>
                </view>
                <view class="stats-float-card">
                    <view class="stat-box">
                        <text class="stat-num">{{ pageData.workersParam.length }}</text>
                        <text class="stat-label">待工人员</text>
                    </view>
                    <view class="stat-divider"></view>
                    <view class="stat-box">
                        <text class="stat-num">认证</text>
                        <text class="stat-label">平台审核</text>
                    </view>
                    <view class="stat-divider"></view>
                    <view class="stat-box">
                        <text class="stat-num">高效</text>
                        <text class="stat-label">本地直连</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="list-section">
            <view class="section-header">
                <text class="section-title">可调配工友名录</text>
                <text class="section-subtitle">基于地理位置及技能匹配</text>
            </view>
            
            <view v-if="!pageData.workersParam.length && !pageData.loading" class="empty-state">
                <fui-empty marginTop="60" src="/static/images/no-data.png" title="当前村落暂无登记工友" />
            </view>

            <!-- 优化后的人员列表卡片 -->
            <view class="worker-card-v2" v-for="(item, index) in pageData.workersParam" :key="index">
                <view class="card-top">
                    <view class="avatar-circle" :style="{ backgroundColor: ['#E6F5E8', '#E6F7FF', '#FFF7E6', '#FFF1F0'][index % 4] }">
                        <text class="avatar-text" :style="{ color: ['#5DB66F', '#1890FF', '#FA8C16', '#F5222D'][index % 4] }">
                            {{ item.name.substring(0, 1) }}
                        </text>
                    </view>
                    <view class="worker-core">
                        <view class="name-line">
                            <text class="worker-name">{{ item.name }}</text>
                            <text class="tag-outline">{{ item.attr || '熟练工' }}</text>
                        </view>
                        <view class="info-line">
                            <text>{{ getCalculateAge(item.birthday) }}岁</text>
                            <view class="dot-sep"></view>
                            <text>{{ returnDictZhVel('gender', item.gender) }}</text>
                            <view class="dot-sep"></view>
                            <text>{{ returnDictZhVel('edu', item.edu) }}</text>
                        </view>
                    </view>
                </view>
                <view class="card-bottom">
                    <text class="skill-hint">擅长领域：</text>
                    <view class="skill-flow">
                        <text class="skill-chip" v-for="(skill, sIdx) in (item.skill ? item.skill.split(/[,，、/]/) : ['通用农活'])" :key="sIdx">
                            {{ skill }}
                        </text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 悬浮固定底部栏 -->
        <view v-if="pageData.workersParam.length" class="action-footer">
            <view class="footer-inner">
                <view class="info-group">
                    <text class="main-text">直接与负责人沟通</text>
                    <text class="sub-text">调配周期约 1-2 小时</text>
                </view>
                <view class="primary-call-btn" @tap="pageData.showConfirmDialog = true">
                    <fui-icon name="mobile" :size="36" color="#fff"></fui-icon>
                    <text class="btn-text">立即沟通</text>
                </view>
            </view>
        </view>

        <ConfirmDialog
            v-model:show="pageData.showConfirmDialog"
            title="联系确认"
            :content="`系统将为您拨通该劳动力池负责人【${pageData.contactName}】的电话，是否继续？`"
            @confirm="makePhoneCall"
        />
        
        <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(255, 255, 255, 0.6)" />
    </view>
</template>

<style lang="scss" scoped>
    .details_page {
        background-color: #f8fafc;
        min-height: 100vh;
        font-family: 'DingTalk Sans', sans-serif;
        padding-bottom: 160rpx;
    }

    .immersive-header {
        position: relative;
        height: 380rpx;
        .header-bg {
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 320rpx;
            background: linear-gradient(135deg, #5db66f 0%, #3a944c 100%);
            border-bottom-left-radius: 40rpx;
            border-bottom-right-radius: 40rpx;
        }
        .header-content {
            position: relative;
            padding: 40rpx 40rpx 0;
            .village-info {
                .village-label {
                    font-size: 24rpx;
                    color: rgba(255,255,255,0.8);
                    display: block;
                }
                .village-name {
                    font-size: 48rpx;
                    font-weight: bold;
                    color: #fff;
                    margin-top: 8rpx;
                    display: block;
                }
            }
        }
    }

    .stats-float-card {
        background-color: #fff;
        margin-top: 40rpx;
        border-radius: 24rpx;
        padding: 32rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 12rpx 30rpx rgba(0,0,0,0.06);
        .stat-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            .stat-num {
                font-size: 36rpx;
                font-weight: bold;
                color: #333;
            }
            .stat-label {
                font-size: 22rpx;
                color: #999;
                margin-top: 4rpx;
            }
        }
        .stat-divider {
            width: 1rpx;
            height: 48rpx;
            background-color: #f0f0f0;
        }
    }

    .list-section {
        padding: 0 32rpx;
        .section-header {
            margin: 40rpx 0 24rpx;
            .section-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #1a1a1a;
                display: block;
            }
            .section-subtitle {
                font-size: 22rpx;
                color: #94a3b8;
                margin-top: 4rpx;
                display: block;
            }
        }
    }

    .worker-card-v2 {
        background-color: #fff;
        border-radius: 24rpx;
        padding: 28rpx;
        margin-bottom: 24rpx;
        border: 1rpx solid #f1f5f9;
        
        .card-top {
            display: flex;
            align-items: center;
            padding-bottom: 24rpx;
            border-bottom: 1rpx dashed #f1f5f9;
            
            .avatar-circle {
                width: 88rpx;
                height: 88rpx;
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                .avatar-text {
                    font-size: 36rpx;
                    font-weight: bold;
                }
            }
            
            .worker-core {
                flex: 1;
                margin-left: 24rpx;
                .name-line {
                    display: flex;
                    align-items: center;
                    .worker-name {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #1e293b;
                    }
                    .tag-outline {
                        font-size: 20rpx;
                        color: #5db66f;
                        border: 1rpx solid #5db66f;
                        padding: 2rpx 12rpx;
                        border-radius: 6rpx;
                        margin-left: 16rpx;
                    }
                }
                .info-line {
                    margin-top: 8rpx;
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;
                    color: #64748b;
                    .dot-sep {
                        width: 4rpx;
                        height: 4rpx;
                        background-color: #cbd5e1;
                        border-radius: 50%;
                        margin: 0 12rpx;
                    }
                }
            }
        }
        
        .card-bottom {
            padding-top: 24rpx;
            .skill-hint {
                font-size: 22rpx;
                color: #94a3b8;
                margin-bottom: 16rpx;
                display: block;
            }
            .skill-flow {
                display: flex;
                flex-wrap: wrap;
                .skill-chip {
                    font-size: 22rpx;
                    color: #475569;
                    background-color: #f1f5f9;
                    padding: 6rpx 20rpx;
                    border-radius: 30rpx;
                    margin-right: 12rpx;
                    margin-bottom: 12rpx;
                }
            }
        }
    }

    .action-footer {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background-color: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
        box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.05);
        z-index: 100;
        
        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .info-group {
                .main-text {
                    font-size: 28rpx;
                    color: #334155;
                    font-weight: bold;
                    display: block;
                }
                .sub-text {
                    font-size: 22rpx;
                    color: #94a3b8;
                    margin-top: 4rpx;
                    display: block;
                }
            }
            
            .primary-call-btn {
                background-color: #5db66f;
                height: 88rpx;
                padding: 0 48rpx;
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                box-shadow: 0 8rpx 20rpx rgba(93, 182, 111, 0.3);
                &:active { opacity: 0.9; transform: scale(0.98); }
                
                .btn-text {
                    font-size: 30rpx;
                    color: #fff;
                    font-weight: bold;
                    margin-left: 12rpx;
                }
            }
        }
    }

    .empty-state { padding: 100rpx 0; }
</style>
