<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: PoJun
 * @LastEditTime: 2023-12-21 14:24:01
 * @Message: 产品列表
-->
<template>
    <view class="products">
        <uv-vtabs :chain="true" :list="list" :height="height" @change="change">
            <template v-for="(item, index) in list">
                <uv-vtabs-item :index="index" :key="index">
                    <view
                        class="products-item uv-flex uv-border-bottom"
                        v-for="(item2, index2) in item.childrens"
                        :key="index2"
                    >
                        <uv-image src="" width="66px" height="66px"></uv-image>
                        <view class="uv-m-l-26 uv-flex-1">
                            <view class="uv-font-28">{{ item2.name }}</view>
                            <view class="uv-font-26 uv-m-t-12 uv-info">{{ item2.sub }}</view>
                            <view class="uv-font-26 uv-m-t-22 uv-info">{{ item2.desc }}</view>
                        </view>
                    </view>
                    <view v-if="index < list.length - 1">
                        <uv-gap bg-color="#f1f1f1" height="5"></uv-gap>
                    </view>
                </uv-vtabs-item>
            </template>
            <!-- 为了撑起来最后的分类 -->
            <uv-gap bg-color="#fff" height="600"></uv-gap>
        </uv-vtabs>
    </view>
</template>

<script>
const getList = [
    {
        name: "原材料",
        childrens: [
            {
                name: "化工类",
                sub: "春晓",
                desc: "春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。",
            },
            {
                name: "建筑结构类",
                desc: "碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。",
                sub: "咏柳",
            },
            {
                name: "型材类",
                desc: "独在异乡为异客，每逢佳节倍思亲。遥知兄弟登高处，遍插茱萸少一人。",
                sub: "九月九日忆山东兄弟",
            },
        ],
    },
    {
        name: "工程材料",
        childrens: [
            {
                name: "管道及配件",
                sub: "副标题",
                desc: "一些简单的描述",
            },
            {
                name: "风管机配件",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "阀门",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "保温吸音材料",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "电工电器",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "仪器仪表",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "工程设备",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "成品支吊架",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "园林景观",
                desc: "一些简单的描述",
                sub: "副标题",
            },
        ],
    },
    {
        name: "服务",
        childrens: [
            {
                name: "外包",
                sub: "副标题",
                desc: "一些简单的描述",
            },
            {
                name: "分包",
                desc: "一些简单的描述",
                sub: "副标题",
            },
        ],
    },
    {
        name: "资产",
        childrens: [
            {
                name: "车辆",
                sub: "副标题",
                desc: "一些简单的描述",
            },
            {
                name: "房地产",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "办公家具",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "办公电子设备",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "检测设备",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "厂房设备",
                desc: "一些简单的描述",
                sub: "副标题",
            },
        ],
    },
    {
        name: "低值易耗品",
        childrens: [
            {
                name: "施工材料",
                sub: "副标题",
                desc: "一些简单的描述",
            },
            {
                name: "工具",
                desc: "一些简单的描述",
                sub: "副标题",
            },
            {
                name: "办公生活用品",
                desc: "一些简单的描述",
                sub: "副标题",
            },
        ],
    },
    {
        name: "安全消防",
        childrens: [
            {
                name: "安全消防防护",
                sub: "副标题",
                desc: "一些简单的描述",
            },
            {
                name: "安全消防防护",
                sub: "副标题",
                desc: "一些简单的描述",
            },
            {
                name: "安全消防防护",
                sub: "副标题",
                desc: "一些简单的描述",
            },
        ],
    },
];
export default {
    data() {
        return {
            list: [],
        };
    },
    computed: {
        height() {
            return uni.getSystemInfoSync().windowHeight;
        },
    },
    onReady() {
        // 模拟接口请求数据
        uni.showLoading({
            title: "加载中",
        });
        setTimeout(() => {
            this.list = getList;
            uni.hideLoading();
        }, 500);
    },
    methods: {
        change(index) {
            console.log("选项改变：", index);
        },
    },
};
</script>
<style scoped lang="scss">
.products {
    &-item {
        padding: 25rpx;
    }

    /deep/ .uv-vtabs__content {
        overflow: hidden;
    }
}
</style>
