<script setup lang="ts">
import { ref } from 'vue';
import { useRenderIcon } from '../ReIcon/src/hooks';
import { httpProductDetail } from '/@/api/invoiceInOut/inventoryCheck';
import { useTask } from '/@/hooks/core';
import ProductDetail from "/@/components/ProductDetail/index.vue"

defineProps<{ ProductRela: any[] }>()

const productVisible = ref(false)
const productIndex = ref(0)
const productDetailTask = useTask()

function handleShowDetail(id, index) {
    productVisible.value = true
    productIndex.value = index
    productDetailTask.run(httpProductDetail({ id }))
}
</script>

<template>
    <div class="w-full">
        <ElTable size="small" border :data="ProductRela">
            <ElTableColumn label="商品ID" prop="product_id" width="60px" show-overflow-tooltip />
            <ElTableColumn label="商品编号" prop="skuCode" show-overflow-tooltip />
            <ElTableColumn label="商品名称" prop="goodName" show-overflow-tooltip />
            <ElTableColumn label="操作数量" prop="num" width="80px" show-overflow-tooltip />
            <ElTableColumn label="操作人" prop="apply_name" width="80px" show-overflow-tooltip />
            <ElTableColumn label="创建时间" prop="create_time" show-overflow-tooltip />
            <ElTableColumn label="操作" width="100px">
                <template #="scope">
                    <ElTooltip content="查看详情">
                        <ElButton type="primary" link :icon="useRenderIcon('eye-view')"
                            @click="handleShowDetail(scope.row.product_id, scope.$index)" />
                    </ElTooltip>
                </template>
            </ElTableColumn>
        </ElTable>


        <ElDialog center title="商品详情" v-model="productVisible" style="overflow: hidden">
            <div v-loading="productDetailTask.loading">
                <ProductDetail 
                    v-if="productDetailTask.data" 
                    :data="productDetailTask.data"
                    :num="ProductRela[productIndex].num" :time="ProductRela[productIndex].create_time"
                    :name="ProductRela[productIndex].apply_name" />
            </div>
        </ElDialog>
    </div>
</template>
