import { product } from '@domains/product/di/productModule';
import { ProductType } from '@domains/product/domain/type/ProductType';
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'

interface storeType {
    item: ProductType
    id: number
}

export default defineComponent({
    setup() {
        const route = useRoute();
        const productService = product.createProductApplicationService();

        const state = reactive<storeType>({
            item: {} as ProductType,
            id: 0
        })

        onMounted(() => {
            if (!route.query.id) {
                throw new Error("缺少id参数");
            }

            state.id = Number(route.query.id)
            console.log("id: ", state.id);
            loadProductDetail()
        })

        const loadProductDetail = async () => {
            state.item = await productService.getProductInfo(state.id);
            console.log("state.item: ", state.item);
        }

        return () => (
            <div class="ProductDetail">
                <h1>商品领域模块 - 商品详情页面</h1>
                <hr/>
                <p>商品id：{ state.id }</p>
                { state.item.name }
                <ul>
                    {
                        Object.entries(state.item).map(([ key, value ]) =>
                            <li>{ key }: { value }</li>
                        )
                    }
                </ul>
            </div>
        )
    }
})

// export default defineComponent({
//     setup() {
//         return () => (
//             <div>商品详情</div>
//         )
//     }
// })