<!--
 * @Author: PoJun
 * @Date: 2023-12-19 14:57:48
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-18 10:53:10
 * @Message: 产品列表, 只展示5个
-->
<template>
    <uv-cell-group :border="false" :customStyle="{ padding: '5px 0' }">
        <uv-cell :border="false" :arrow="false" value="查看更多" :isLink="true" url="/subpkg/home/products">
            <uv-text slot="title" text="产品目录" :customStyle="{ 'font-weight': 'bold' }"></uv-text>
        </uv-cell>

        <template v-if="productsList.length">
            <uv-cell
                v-for="(item, index) in productsList"
                :key="index"
                :border="false"
                :label="item.code"
                :value="item.name"
            ></uv-cell>
        </template>

        <view v-else class="uv-m-b-50">
            <uv-empty marginTop="30" mode="data" text="暂无数据"></uv-empty>
        </view>
    </uv-cell-group>
</template>

<script>
import { getProductsTreeNoAuth } from "@/config/http.js";
export default {
    data() {
        return {
            productsList: [],
        };
    },
    methods: {
        // 获取产品目录, 缓存下后续直接用
        async getList() {
            try {
                const data = await getProductsTreeNoAuth();
                this.$uv.vuex("vuex_products", data ? data : []);
                this.resetData(data);
            } catch (error) {
                console.log(error);
            }
        },
        // 展开下数组处理数据,选个大概5条?
        resetData(data = []) {
            try {
                this.productsList = this.treeToArray(JSON.parse(JSON.stringify(data))).slice(0, 5);
            } catch (error) {
                console.log(error);
            }
        },
        treeToArray(list, newArr = []) {
            list.forEach(item => {
                const { children } = item;
                if (children) {
                    delete item.children;

                    if (children.length) {
                        newArr.push(item);
                        return this.treeToArray(children, newArr);
                    }
                }
                newArr.push(item);
            });
            return newArr;
        },
    },
    created() {
        this.getList();
    },
};
</script>

<style lang="scss" scoped></style>
