<template>
    <div class="main">
        <Common />
        <div class="breadcrumb">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>供应链协同</el-breadcrumb-item>
                <el-breadcrumb-item to="/capacityShare">产能共享</el-breadcrumb-item>
                <el-breadcrumb-item>产品详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="topContent">
            <div class="topContentLeft">
                <div class="leftBox">
                    <div class="bigImg">
                        <img :src="detailInfo.goodsVo.img1" alt="">
                    </div>
                    <div class="smallImg">
                        <img :src="detailInfo.goodsVo.img1" alt="">
                        <img :src="detailInfo.goodsVo.img2" alt="">
                        <img :src="detailInfo.goodsVo.img3" alt="">
                    </div>
                </div>
                <div class="rightBox">
                    <div class="title">{{ detailInfo.goodsVo.title }}</div>
                    <div class="topTags">
                        <span class="tag" v-for="tag in detailInfo.tags">{{ tag }}</span>
                    </div>
                    <div class="topContentInfo">
                        <!-- <div class="topItem">
                            <span class="topItemTitle">价格</span>
                            <span class="topItemValue" style="color: #BD3124">{{ detailInfo.priceType == 1 ? '面议' : '￥' + detailInfo.price }}</span>
                        </div>
                        <div class="topItem">
                            <span class="topItemTitle">供应数量</span>
                            <span class="topItemValue">{{ detailInfo.stockType == 1 ? '无限制' : detailInfo.stock }}</span>
                        </div> -->
                        <div class="topItem">
                            <span class="topItemTitle">所属行业</span>
                            <span class="topItemValue">{{ detailInfo.goodsVo.tradeName }}</span>
                        </div>
                    </div>
                    <div class="contact">
                        <div class="people">
                            联系人: {{ detailInfo.goodsVo.contact }}
                        </div>
                        <div class="phone">
                            联系电话: {{ detailInfo.goodsVo.contactNumber }}
                        </div>
                    </div>
                    <div class="times">
                        <div class="releaseTime">
                            <el-icon><Timer /></el-icon>
                            <span>发布时间: {{ detailInfo.goodsVo.releaseTime }}</span>
                        </div>
                        <div class="deadline">
                            <el-icon><Timer /></el-icon>
                            <span>截止时间: {{ detailInfo.goodsVo.timeType == 1 ? '长期有效' : detailInfo.goodsVo.indate }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="topContentRight">
                <div class="topContentTitle">
                    <i></i>
                    <span>采购企业</span>
                    <i></i>
                </div>
                <div class="topItem">
                    <span class="label">企业名称: </span> 
                    <span class="value">{{ detailInfo.goodsVo.enterpriseName }}</span>
                </div>
                <div class="topItem">
                    <span class="label">所在地区: </span> 
                    <span class="value">{{ detailInfo.goodsVo.enterpriseArea }}</span>
                </div>
                <div class="topItem">
                    <span class="label">联系地址: </span> 
                    <span class="value">{{ detailInfo.goodsVo.registeredAddress }}</span>
                </div>
                <div class="topBtn">
                    <el-button type="primary" :icon="HomeFilled" round>进入店铺</el-button>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="left">
                <div class="title">
                    <span>产品详情</span>
                    <i></i>
                </div>
                <div class="info">
                    {{ detailInfo.goodsVo.intro }}
                </div>
            </div>
            <div class="right">
                <div class="title">
                    <span>能力推荐</span>
                    <i></i>
                </div>
                <div class="rightItem" v-for="item in recommendList">
                    <div class="itemLeft">
                        <img :src="item.goodsVo.img1" alt="">
                    </div>
                    <div class="itemRight">
                        <div class="title">{{ item.goodsVo.title }}</div>
                        <div class="tags">
                            <span class="tag" v-for="tag in item.tags">{{ tag }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="letfBottom">
            <div class="bomCon">
                <el-icon size="20"><InfoFilled /></el-icon>
                <span>联系我时，请说明是在“平江县产业发展综合服务平台”上看到的信息，谢谢。</span>
            </div>
        </div>

        <Footer />
        
    </div>
</template>
    
<script setup lang='ts'>
import Common from '../../components/common/common.vue';
import Footer from '../../components/common/footer.vue';
import { ArrowRight, HomeFilled } from '@element-plus/icons-vue';
import { ref, reactive, inject, onMounted, } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const $http:any = inject("$http");
const route = useRoute();
export interface detailInfo {
    priceType?: number,
    stockType?: number,
    stock?: number,
    price?: number,
    numType?: number,
    buyNum?: number,
    buyTypeName?: string,
    tags?: [],
    goodsVo: {
        title?: string,
        tradeName?: string,
        enterpriseName?: string,
        enterpriseArea?: string,
        registeredAddress?: string,
        intro?: string,
        trade?: string,
        contact?: string,
        contactNumber?: string,
        releaseTime?: string,
        timeType?: number,
        indate?: string,
        img1?: string,
        img2?: string,
        img3?: string,
    }
}
export interface recommendList {
    tags?: [],
    goodsVo: {
        title: string,
        img1?: string,
    }
}

    const detailInfo = ref<detailInfo>({
        goodsVo: {}
    })

    function getDetailInfo(){
        $http.get(`/mall/webPortal/capacitySharing/${route.query.id}`)
        .then((res: any) => {
            if (res.data.goodsVo.keyWord) {
                res.data.tags = res.data.goodsVo.keyWord.split(",");
            }
            detailInfo.value = res.data;
        })
    }
    getDetailInfo();

    const recommendList = ref<recommendList[]>([])
    function getRecommendList() {
        $http({
            url: '/mall/webPortal/capacitySharing/queryPageByCondition',
            params: {
                pageNum: 1,
                pageSize: 5,
                state: 3, 
            }
        })
        .then((res:any) => {
            const data = res.rows.filter((item: any) => {
                if(item.goodsVo.keyWord) {
                    item.tags = item.goodsVo.keyWord.split(",");
                }
                return item;
            })
            recommendList.value = data;
        })
    }
    getRecommendList()

</script>
    
<style scoped lang="less">
    
.main {
    width: 100%;
    background-color: #f5f5f5;
    user-select: none;
}

.breadcrumb {
    margin: 0 auto;
    padding: 25px 0;
    width: 1200px;
    display: flex;
}

.topContent {
    margin: 0 auto;
    padding: 25px 0;
    width: 1200px;
    height: 400px;
    display: flex;
    .topContentLeft {
        width: 900px;
        box-sizing: border-box;
        background-color: #fff;
        border-right: 1px solid #ccc;
        padding: 30px;
        display: flex;
        .leftBox {
            margin-right: 20px;
            width: 300px;
            display: flex;
            flex-wrap: wrap;
            .bigImg {
                width: 300px;
                height: 280px;
                display: flex;
                img {
                    display: block;
                    width: 100%;
                    height: 280px; 
                }
            }
            .smallImg {
                margin-top: 15px;
                width: 100%;
                display: flex;
                img {
                    margin-right: 15px;
                    width: 50px;
                    height: 50px;
                }
            }
        }
        .rightBox {
            width: 580px;
            .title {
                margin-top: 10px;
                color: #000;
                font-size: 16px;
                font-weight: 700;
            }
            .topTags {
                margin-top: 30px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .tag {
                    margin-right: 5px;
                    box-sizing: border-box;
                    height: 28px;
                    line-height: 28px;
                    color: #000;
                    padding: 0 5px;
                    background-color: #f2f2f2;
                }
            }
            .topContentInfo {
                margin-top: 35px;
                width: 490px;
                height: 125px;
                background-color: #f2f2f2;
                display: flex;
                align-items: center;
                .topItem {
                    width: 200px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .topItemTitle {
                        width: 100%;
                        text-align: center;
                    }
                    .topItemValue {
                        margin-top: 10px;
                        width: 100%;
                        text-align: center;
                    }
                }
            }
            .contact {
                margin: 35px 0 25px 0;
                width: 100%;
                display: flex;
                font-size: 14px;
                color: #666;
                .people {
                    margin-right: 100px;
                }
            }
            .times {
                width: 100%;
                display: flex;
                font-size: 14px;
                .releaseTime {
                    display: flex;
                    align-items: center;
                    margin-right: 30px;
                    span {
                        margin-left: 5px;
                    }
                }
                .deadline {
                    display: flex;
                    align-items: center;
                    span {
                        margin-left: 5px;
                    }
                }
            }
        }
        
    }   
    .topContentRight {
        width: 300px;
        background-color: #fff;
        padding: 30px 25px;
        box-sizing: border-box;
        .topContentTitle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                margin: 0 30px;
                font-size: 16px;
                font-weight: 700;
            }
            i {
                width: 30px;
                height: 2px;
                background-color: #f2f2f2;
            }
        }
        .topItem {
            margin-top: 25px;
            width: 100%;
            display: flex;
            .label {
                width: 80px;
            }
            .value {
                width: 170px;
            }
        }
        .topBtn {
            margin-top: 50px;
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            .el-button {
                width: 200px;
                height: 50px;
                font-size: 16px;
                border-radius: 50px;
                background-color: #fff;
                color: @baseColor;
            }
        }
    }   
}

.content {
    margin: 40px auto 0;
    width: 1200px;
    display: flex;
    
    .title {
        width: 100%;
        font-size: 16px;
        display: flex;
        align-items: center;
        span {
            width: 100px;
            font-weight: 700;
            font-size: 16px;
        }
        i {
            margin-left: 20px;
            width: 100%;
            height: 2px;
            background-color: #f2f2f2;
        }
    }
    .left {
        width: 900px;
        padding: 40px;
        box-sizing: border-box;
        background-color: #fff;
        .info {
            margin-top: 50px;
            color: #666;
            height: fit-content;
            overflow: hidden;
        }
    }
    .right {
        margin-left: 20px;
        width: 280px;
        background-color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        height: fit-content;
        .rightItem {
            margin-top: 10px;
            padding-bottom: 10px;
            cursor: pointer;
            display: flex;
            border-bottom: 1px solid #f2f2f2;
            .itemLeft {
                width: 60px;
                height: 60px;
                img {
                    width: 60px;
                    height: 60px;
                }
            }
            .itemRight {
                margin-left: 10px;
                .title {
                    color: #000;
                }
                .tags {
                    margin-top: 8px;
                    width: 100%;
                    height: 28px;
                    overflow: hidden;
                    display: flex;
                    flex-wrap: wrap;
                    .tag {
                        margin-right: 5px;
                        box-sizing: border-box;
                        height: 28px;
                        line-height: 28px;
                        color: #000;
                        padding: 0 5px;
                        background-color: #f2f2f2;
                    }
                }
            }
        }
    }
}
.letfBottom {
    margin: 0 auto 50px;
    width: 1200px;
    .bomCon {
        width: 900px;
        height: 72px;
        line-height: 72px;
        padding: 0 40px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        background-color: #ccc;
        font-size: 14px;
        .el-icon {
            line-height: 72px;
        }
        span {
            margin-left: 10px;
        }
    }
}

</style>