<?php 

include './head.php';

?>
 
 <div id="main" class="mdui-card mdui-list" style="padding:0px">
 
 
 <div class="mdui-progress">
  <div class="mdui-progress-indeterminate"></div>
</div>
 
  </div>
  

<script>
    // 定义一个函数用来获取产品数据并生成HTML
    function fetchProducts() {
        // 使用fetch API从API端点获取数据
        fetch('./get_my_products.fx')
            .then(response => response.json())
            .then(data => {
                const productList = document.getElementById('main');

                        productList.innerHTML = "";
                // 遍历每个产品对象并生成HTML
                for (const id in data) {
                    if (data.hasOwnProperty(id)) {
                        const product = data[id];
                        const name = product.name || '未知产品';
                        const status = product.status || '未知状态';

                        // 根据status选择颜色
                        let colorClass;
                        switch (status) {
                            case '已激活':
                                colorClass = 'mdui-color-blue';
                                break;
                            case '待开通':
                                colorClass = 'mdui-color-yellow';
                                break;
                            case '已到期':
                                colorClass = 'mdui-color-red';
                                break;
                            default:
                                colorClass = 'mdui-color-grey';
                                break;
                        }

                        // 创建每个产品的HTML结构
                        const productItem = `
                            <a href="./show_product.fx?id=${id}" class="mdui-list-item mdui-ripple">
                                <i class="mdui-list-item-avatar ${colorClass} mdui-icon material-icons mdui-text-color-white">dns</i>
                                <div class="mdui-list-item-content">
                                    <div class="mdui-list-item-title">${name}</div>
                                    <div class="mdui-list-item-text">${id}</div>
                                </div>
                                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">assistant_photo</i>
                            </a>
                        `;

                        // 将生成的HTML插入到列表中
                        productList.innerHTML += productItem;
                    }
                }
            })
            .catch(error => {
                console.error('获取产品数据时出错:', error);
            });
    }

    // 页面加载完毕后获取产品数据
    document.addEventListener('DOMContentLoaded', fetchProducts);
</script>
