<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: XuanJi
 * @LastEditTime: 2024-05-21 10:46:35
 * @Message: 供应商详情页面
-->
<template>
    <view class="supplier-detail">
        <uv-navbar :border="false" :autoBack="true" bgColor="transparent" :placeholder="false"></uv-navbar>
        <uv-swiper :list="getImages(item.image)" height="400" indicator circular></uv-swiper>
        <view class="supplier-detail-cont">
            <uv-cell-group :border="false">
                <uv-cell title="名称" :label="item.name" :border="false" :cellStyle="{ padding: '15px' }"></uv-cell>
                <uv-cell title="评分" :label="item.mark" :border="false" :cellStyle="{ padding: '15px' }"></uv-cell>
                <uv-cell
                    title="联系人"
                    :label="item.personName"
                    :border="false"
                    :cellStyle="{ padding: '15px' }"
                ></uv-cell>
                <uv-cell
                    title="联系方式"
                    :label="item.phone"
                    :border="false"
                    :cellStyle="{ padding: '15px' }"
                ></uv-cell>
                <uv-cell
                    title="供应商类型"
                    :label="item.type"
                    :border="false"
                    :cellStyle="{ padding: '15px' }"
                ></uv-cell>
                <uv-cell
                    title="公司地址"
                    :label="item.address"
                    :border="false"
                    :cellStyle="{ padding: '15px' }"
                ></uv-cell>
                <uv-cell
                    title="公司简介"
                    :label="item.intro"
                    :border="false"
                    :cellStyle="{ padding: '15px' }"
                ></uv-cell>
                <uv-cell
                    title="产品分类"
                    :label="getShowNames(item.product)"
                    :border="false"
                    :cellStyle="{ padding: '15px' }"
                ></uv-cell>
                <uv-cell
                    title="优势产品"
                    :label="item.superiorProduct ? item.superiorProduct : '暂无'"
                    :border="false"
                    :cellStyle="{ padding: '15px' }"
                ></uv-cell>
                <uv-cell title="营业执照" :border="false" :cellStyle="{ padding: '15px' }">
                    <uv-album
                        v-if="item.businessLicense"
                        slot="label"
                        :urls="getImages(item.businessLicense)"
                    ></uv-album>
                </uv-cell>
                <uv-cell title="权威证书" :border="false" :cellStyle="{ padding: '15px' }">
                    <uv-album v-if="item.certificates" slot="label" :urls="getImages(item.certificates)"></uv-album>
                </uv-cell>
            </uv-cell-group>
        </view>
    </view>
</template>

<script>
import { getSupplierInfo, getMySupplierInfo,getProductsTreeNoAuth } from "@/config/http.js";

export default {
    data() {
        return {
            list: [],
            item: {},
            showBtn: false,
        };
    },
    methods: {
        async initPage(id) {
            const res = id ? await getSupplierInfo(id) : await getMySupplierInfo();
            this.item = Object.assign({}, res);
        },
        getImageUrl(id) {
            return process.env.VUE_APP_BASE_API + `/files/${id}/show_image`;
        },
        async getProductsList() {
            if (!this.vuex_products.length) {
                const data = await getProductsTreeNoAuth();
                this.$uv.vuex("vuex_products", data ? data : []);
            }
        },
    },
    computed: {
        getImages() {
            return ids => {
                if (!ids) {
                    return [];
                }
                if (typeof ids === "string") {
                    ids = [ids];
                }
                if (ids.length == 0) {
                    return [];
                }
                console.log(ids.map(v => this.getImageUrl(v)));
                return ids.map(v => this.getImageUrl(v));
            };
        },
        getShowNames() {
            return (rv = []) => {
                if (!rv || !rv.length) return "";
                let names = [];
                this.vuex_products.map(item => {
                    let itemNs = [];
                    if (item.children && item.children.length) {
                        item.children.map(v => {
                            if (rv.includes(v.id)) {
                                itemNs.push(v.name);
                            }
                        });
                    }
                    names = names.concat(itemNs);
                });
                return names.join("，");
            };
        },
    },
    onLoad(e) {
        this.showBtn = e.id ? false : true;
        this.initPage(e.id);
        this.getProductsList();
    },
    onReady() {
        uni.$on("refreshSupplierDetail", () => {
            this.initPage();
        });
    },
    beforeDestroy() {
        uni.$off("refreshSupplierDetail");
    },
};
</script>

<style lang="scss" scoped>
page {
    background-color: $uv-bg-color;
}
.supplier-detail {
    &-cont {
        margin: 0 25rpx -75rpx;
        background-color: #fff;
        border-radius: 14rpx;
        overflow: hidden;
        z-index: 9;
        position: relative;
        bottom: 100rpx;
    }
}
.uv-cell {
    /deep/ .uv-cell__title {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}
</style>
