<template>
    <div class="enterprise-demand-detail">
        <div style="display: flex;justify-content: space-between;align-items: center;">
            <h1 class="demand-title" style="margin: 0 0;">
                {{ productDetailInfo.product_name }}

            </h1>
            <span style="color: red;font-weight: bold;font-size: 20px;">￥{{ productDetailInfo.discount_price }}{{
                productDetailInfo.unit }}</span>
            <button v-if="!isApprove" class="consult-btn" @click="openTalk">立即咨询</button>
        </div>
        <!-- 标题区域 -->
        <ul class="title-section">

            <li class="info-item" style="margin:5px  0;margin-top: 15px;">
                <span class="mylabel">企业名称：</span>
                <span class="value">{{ productDetailInfo.company_name }}</span>
            </li>
            <!-- <li class="info-item" style="margin:5px  0;">
                <span class="mylabel"> <span v-if="productDetailInfo.publish_type === '1'   ">商品价格：</span> <span
                        v-else>预期价格：</span></span>
                <span class="value">￥{{ productDetailInfo.discount_price }}</span> -->
            <!-- </li> -->
            <li class="info-item" style="margin:5px  0;">
                <span class="mylabel">所属类别：</span>
                <span class="value">{{ productDetailInfo.product_category }}</span>
            </li>
            <li class="info-item" style="margin:5px  0;">
                <span class="mylabel">企业类别：</span>
                <span class="value">{{ productDetailInfo.company_type }}</span>
            </li>
        </ul>

        <!-- 联系信息区域 -->
        <ul class="infoUl">
            <li class="contact-item">
                <span class="mylabel">联系人：</span>
                <span class="value">{{ productDetailInfo.contact_person }} </span>
            </li>
            <li class="contact-item">
                <span class="mylabel">手机号码：</span>
                <span class="value">{{ productDetailInfo.phone_number }}</span>
            </li>
            <li class="contact-item">
                <span class="mylabel">邮箱：</span>
                <span class="value">{{ productDetailInfo.email }}</span>
            </li>
            <li class="contact-item">
                <span class="mylabel">职务：</span>
                <span class="value">{{ productDetailInfo.job_title ? productDetailInfo.job_title : '--' }}</span>
            </li>
            <li class="contact-item">
                <span class="mylabel">发布日期：</span>
                <span class="value">{{ productDetailInfo.create_at ? productDetailInfo.create_at : '暂未发布' }}</span>
            </li>
        </ul>
        <div v-if="productDetailInfo.cart_flag === '1'" style="position: relative;width: 100%;padding-left: 16px;"
            class="mysection my">
            <div class="section-title">配置数据</div>
            <div class="section-content">

            </div>
        </div>
        <ul v-if="productDetailInfo.cart_flag === '1'" class="adUl">
            <li>
                <div class="leftBox">
                    <img src="https://www.kaiyuancloud.cn/idfile?path=firstpagehot/ssc2x.png" alt="">
                </div>
                <div class="rightBox">
                    <span class="subTitle">CPU</span>
                    <span class="subDescription">{{ productDetailInfo.cpu }}</span>
                </div>
            </li>
            <li>
                <div class="leftBox">
                    <img src="https://www.kaiyuancloud.cn/idfile?path=firstpagehot/cpu2x.png" alt="">
                </div>
                <div class="rightBox">
                    <span class="subTitle">内存</span>
                    <span class="subDescription">{{ productDetailInfo.memory }}</span>
                </div>
            </li>
            <li>
                <div class="leftBox">
                    <img src="https://www.kaiyuancloud.cn/idfile?path=firstpagehot/sdcard2x.png" alt="">
                </div>
                <div class="rightBox">
                    <span class="subTitle">GPU</span>
                    <span class="subDescription">{{ productDetailInfo.gpu }}</span>
                </div>
            </li>
            <li>
                <div class="leftBox">
                    <img src="https://www.kaiyuancloud.cn/idfile?path=firstpagehot/ssdr2x.png" alt="">
                </div>
                <div class="rightBox">
                    <span class="subTitle">系统盘</span>
                    <span class="subDescription">{{ productDetailInfo.data_disk }}</span>
                </div>
            </li>
            <li>
                <div class="leftBox">
                    <img src="https://www.kaiyuancloud.cn/idfile?path=firstpagehot/servermini2x.png" alt="">
                </div>
                <div class="rightBox">
                    <span class="subTitle">数据盘</span>
                    <span class="subDescription">{{ productDetailInfo.sys_disk }}</span>
                </div>
            </li>
            <li>
                <div class="leftBox">
                    <img src="https://www.kaiyuancloud.cn/idfile?path=firstpagehot/serverpath2x.png" alt="">
                </div>
                <div class="rightBox">
                    <span class="subTitle">网卡</span>
                    <span class="subDescription">{{ productDetailInfo.net_card }}</span>
                </div>
            </li>
        </ul>
        <!-- 配置数据区域 -->


        <!-- 需求描述区域 -->
        <div class="demand-section">
            <div class="demand-content">
                <div class="section-title">  {{ productDetailInfo.publish_type == '1' ? '商品描述' : '需求概述' }}</div>
                {{ productDetailInfo.requirement_summary ? productDetailInfo.requirement_summary : '--' }}
            </div>
        </div>

        <!-- 相关参数区域 -->
        <div class="params-section">
            <div class="params-content">
                <div class="section-title">相关参数</div>
                {{ productDetailInfo.related_parameters ? productDetailInfo.related_parameters : '--' }}
            </div>
        </div>

        <!-- 预期目标区域 -->
        <div class="goals-section">

            <div class="goals-content">
                <div class="section-title">应用场景</div>
                {{ productDetailInfo.application_scenario ? productDetailInfo.application_scenario : '--' }}
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: 'proDetail',
    props: {
        isApprove: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

        }
    },
    computed: {
        ...mapState({
            productDetailInfo: state => state.ncmatch.productDetail,
            showProductDetail: state => state.ncmatch.showProductDetail
        })
    },
    methods: {
        openTalk() {
            this.$store.commit('setShowTalk', true);
        }
    }
}
</script>

<style scoped lang="scss">
.my {
   .section-title::before {
        top: 6px !important;
    }
}

.consult-btn {
    width: fit-content;
    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
    }
}

.mylabel {
    font-weight: 500;
    color: #252424;
    min-width: 80px;
}

.infoUl {
    * {
        font-size: 16px !important;
    }

    border-top: 1px solid #e5e5e5;
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    li {

        margin-bottom: 10px;
    }
}

.adUl {
    margin-bottom: 30px;
    background: url("../../../homePage/detail/img/liBg.png");
    background-position: top;
    background-size: cover;
    width: 100%;
    min-width: 800px;
    display: flex !important;
    flex-wrap: wrap !important;

    justify-content: space-between !important;
    align-items: center !important;

    li {
        margin: 15px 0;

        width: 49%;
        display: flex !important;
        justify-content: flex-start;
        align-items: center;

        .leftBox {
            width: 65px;
            height: 65px;
            padding: 10px;
            min-width: 65px;
            min-height: 65px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .rightBox {

            padding-left: 25px;
            display: flex !important;
            flex-direction: column !important;

            .subTitle {
                font-size: 18px;
                color: #333;
            }

            .subDescription {
                margin-top: 10px;
                font-size: 16px;
                color: #999;
            }
        }
    }


}

.enterprise-demand-detail {
    margin: 0 auto;
    padding: 16px;
    padding-top: 0;
    background: #fff;
    font-family: 'Microsoft YaHei', sans-serif;
}

// 头部区域
.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;

    .header-left {
        .demand-icon {
            display: flex;
            align-items: center;
            gap: 10px;

            i {
                background: #67c23a;
                color: white;
                padding: 8px;
                border-radius: 4px;
                font-size: 16px;
            }

            span {
                font-size: 16px;
                font-weight: 500;
                color: #333;
            }
        }
    }

    .header-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;

        .consult-btn {
            background: #67c23a;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.3s;

            &:hover {
                background: #5daf34;
            }
        }

        .demand-number {
            font-size: 12px;
            color: #666;
        }
    }
}

// 标题区域
.title-section {
    margin-bottom: 30px;

    * {
        font-size: 16px !important;
    }

    .demand-title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin: 0;
    }
}

// 公司信息区域
.company-info {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;

    .info-item {
        width: 120px;
        display: flex;
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }

        .label {
            font-weight: 500;
            color: #666;
            min-width: 80px;
        }

        .value {
            color: #333;
        }
    }
}

// 联系信息区域
.contact-info {
    margin-bottom: 30px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;

    .contact-item {
        display: flex;
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }

        .label {
            font-weight: 500;
            color: #666;
            min-width: 80px;
        }

        .value {
            color: #333;
        }
    }
}

// 合作方式区域
.collaboration-section {
    margin-bottom: 30px;

    .collab-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
    }

    .collab-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .collab-btn {
            padding: 8px 16px;
            background: #e8f5e8;
            color: #67c23a;
            border: 1px solid #67c23a;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                background: #67c23a;
                color: white;
            }
        }
    }
}

// 通用区域样式
.mysection,
.config-section,
.demand-section,
.params-section,
.goals-section {
    margin-bottom: 30px;

    .section-title {
        margin-bottom: 10px;
        font-size: 18px;
        color: #333;
        font-weight: bold !important;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 9px;
            left: -4px;
            display: block;
            width: 2px;
            height: 16px;
            background: #666;
        }
    }
}

// 配置数据区域
.config-section {
    .config-content {
        padding: 20px;
        background: #f8f9fa;
        border-radius: 8px;

        .config-item {
            display: flex;
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;
            }

            .config-label {
                font-weight: 500;
                color: #666;
                min-width: 80px;
            }

            .config-value {
                color: #333;
            }
        }
    }
}

// 需求描述、相关参数、预期目标区域
.demand-section,
.params-section,
.goals-section {

    .demand-content,
    .params-content,
    .goals-content {
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
        line-height: 1.8;
        color: #333;
        text-align: justify;
        font-size: 16px;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .enterprise-demand-detail {
        padding: 15px;
    }

    .header-section {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .collab-buttons {
        justify-content: center;
    }

    .info-item,
    .contact-item,
    .config-item {
        flex-direction: column;
        gap: 5px;

        .label {
            min-width: auto;
        }
    }
}
</style>