<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-18 11:10:00
 * @Message: 产品列表
-->
<template>
    <view class="products">
        <uv-vtabs :chain="true" :list="vuex_products" :height="height" @change="change">
            <template v-for="(item, index) in vuex_products">
                <uv-vtabs-item :index="index" :key="index">
                    <view
                        class="products-item uv-flex uv-border-bottom"
                        v-for="(item2, index2) in item.children"
                        :key="index2"
                    >
                        <uv-image :src="getImageUrl(item2.image)" 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.code }}</view>
                            <view class="uv-font-26 uv-m-t-22 uv-info">{{ item2.remark }}</view>
                        </view>
                    </view>
                    <view v-if="index < vuex_products.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>
export default {
    data() {
        return {
            list: [],
        };
    },
    computed: {
        height() {
            return uni.getSystemInfoSync().windowHeight;
        },
    },
    onLoad() {
        console.log(this.vuex_products);
    },
    methods: {
        change(index) {
            console.log("选项改变：", index);
        },
        getImageUrl(id) {
            return id ? process.env.VUE_APP_BASE_API + `/files/${id}/show_image` : "";
        },
    },
};
</script>
<style scoped lang="scss">
.products {
    &-item {
        padding: 25rpx;
    }

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