<template>
    <scrollTable :config="config2" style="width:100%;height:100%" v-if="config2.data.length"></scrollTable>
</template>
<script setup>
import scrollTable from "@/components/scrollTable.vue"
import { ref, reactive, onMounted } from "vue"
import { plantProductCountApi } from "@/api.js"
import { areaObj } from "@/store/index.js"
const userInfoStore=areaObj()
// ...userInfoStore.userInfo
const alignFn = (num) => {
    let arr = []
    for (let i = 0; i < num; i++) {
        arr.push('center')
    }
    return arr
}
const config2 = reactive({
    header: ['产品名称', '溯源码', '产品名称', '溯源码',],
    headerBGC: "#092757",
    oddRowBGC: "#0C2045",
    headerStyle: "background:#0E316B",

    align: alignFn(4),
    data: [ ]
})


const correctionListFn = (list) => {
    const originalArray = list;
    const transformedArray = originalArray.reduce((acc, curr, index) => {
        if (index % 2 === 0) {
            acc.push([curr]);
        } else {
            acc[acc.length - 1].push(curr);
        }
        return acc;
    }, []);

    return transformedArray



}

plantProductCountApi(
    {
     ...userInfoStore.userInfo


    }
).then(res => {
    correctionListFn(res.data.list).forEach(item => {
        config2.data.push(
            [item[0].kind,  `<img src=${ item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>` ,   item[1].kind,`<img src=${ item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`  ]
        )
    })
})


</script>
