<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>基本情况</title>
    <script src="/js/mp_base/base.js"></script>

    <style>



       
 
        .loading {
            text-align: center;
            padding: 50px;
            color: #999;
        }

        .error {
            text-align: center;
            padding: 50px;
            color: #ff4d4f;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else class="content-div">
            <table class="form">
                <tr>
                    <th>名称</th>
                    <td>{{ wpmc || formData.wpid || '-' }}</td>
                </tr>
                <tr>
                    <th>使用人数</th>
                    <td>{{ formData.syrs || '-' }}</td>
                </tr>
                <tr>
                    <th>目的地</th>
                    <td>{{ formData.mdd || '-' }}</td>
                </tr>
                <tr>
                    <th>描述</th>
                    <td>{{ formData.syyq || '-' }}</td>
                </tr>
                <tr>
                    <th>开始时间</th>
                    <td>{{ formData.kssj || '-' }}</td>
                </tr>
                <tr>
                    <th>结束时间</th>
                    <td>{{ formData.jssj || '-' }}</td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        // 等待SS框架加载完成
        window.SS.ready(function () {
            window.SS.dom.initializeFormApp({
                el: '#app',
                data() {
                    return {
                        pageParams: {},
                        loading: false,
                        error: '',
                        formData: {},
                        wpmc: '' // 物品名称（通过wpid转换得到）
                    }
                },
                mounted() {
                    // 获取URL参数
                    this.pageParams = this.getUrlParams()
                    console.log('📄 mp_clClyd_baseInfo 页面参数:', this.pageParams)

                    // 加载数据
                    this.loadData()
                },
                methods: {
                    // 获取URL参数
                    getUrlParams() {
                        const params = {}
                        const urlSearchParams = new URLSearchParams(window.location.search)
                        for (const [key, value] of urlSearchParams) {
                            params[key] = decodeURIComponent(value)
                        }
                        return params
                    },

                    // 加载数据
                    async loadData() {
                        const service = this.pageParams.service
                        const paramStr = this.pageParams.param

                        if (!service) {
                            this.error = '缺少 service 参数'
                            console.error('❌ 缺少 service 参数')
                            return
                        }

                        this.loading = true
                        this.error = ''

                        try {
                            console.log('📋 调用 service:', service)
                            console.log('📋 原始 param:', paramStr)

                            // 解析 param 参数
                            let paramObj = {}
                            if (paramStr) {
                                try {
                                    // 尝试直接解析
                                    paramObj = JSON.parse(paramStr)
                                    console.log('✅ 解析后的 param:', paramObj)
                                } catch (e) {
                                    console.warn('⚠️ param 格式有误，尝试修复:', paramStr)
                                    try {
                                        // 修复常见的 JSON 格式问题：bdlbm:1 -> "bdlbm":1
                                        const fixedParamStr = paramStr.replace(/([,{]\s*)([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1"$2":')
                                        paramObj = JSON.parse(fixedParamStr)
                                        console.log('✅ 修复后解析成功:', paramObj)
                                    } catch (e2) {
                                        console.error('❌ param 解析失败:', e2, '原始字符串:', paramStr)
                                        paramObj = {}
                                    }
                                }
                            }

                            // 调用 service 接口
                            const response = await request.post(
                                `/service?ssServ=${service}&ssDest=data`,
                                paramObj,
                                { loading: false, formData: true }
                            )

                            console.log('✅ service 响应:', response)

                            // 处理响应数据
                            if (response && response.data && response.data.clClyd) {
                                const data = response.data.clClyd
                                console.log('📊 clClyd 数据:', data)

                                // 直接使用响应数据
                                this.formData = data

                                // 格式化时间字段
                                if (data.kssj && window.H5FieldFormatter) {
                                    this.formData.kssj = window.H5FieldFormatter.formatDate(data.kssj, 'yyyy-MM-dd HH:mm:ss')
                                }
                                if (data.jssj && window.H5FieldFormatter) {
                                    this.formData.jssj = window.H5FieldFormatter.formatDate(data.jssj, 'yyyy-MM-dd HH:mm:ss')
                                }

                                // 转换 wpid 为物品名称
                                if (data.wpid && window.getDictTranslation) {
                                    this.translateWpid(data.wpid)
                                }

                                console.log('✅ 表单数据已更新:', this.formData)
                            } else {
                                this.error = '未获取到数据'
                                console.warn('⚠️ 响应数据中没有 clClyd 字段')
                            }

                        } catch (error) {
                            console.error('❌ 加载数据失败:', error)
                            this.error = '加载数据失败：' + (error.message || '未知错误')
                        } finally {
                            this.loading = false
                        }
                    },

                    // 转换 wpid 为物品名称
                    async translateWpid(wpid) {
                        try {
                            console.log('🔄 转换 wpid:', wpid)

                            const dictCache = new Map()
                            const cacheKey = `wp_${wpid}`

                            // 调用字典转换
                            await window.getDictTranslation(
                                'wp',           // cbName
                                wpid,           // value
                                cacheKey,       // cacheKey
                                dictCache,      // dictCache
                                () => {         // updateCallback
                                    // 更新物品名称
                                    this.wpmc = dictCache.get(cacheKey) || wpid
                                    console.log('✅ 物品名称已更新:', this.wpmc)
                                }
                            )
                        } catch (error) {
                            console.error('❌ wpid 转换失败:', error)
                            this.wpmc = wpid // 转换失败显示原值
                        }
                    }
                }
            })
        })
    </script>
</body>
</html>
