<template>
    <div class="conatiner">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="Breadcrumb">
            <template v-for="(item,index) in hrefHistory">
                <el-breadcrumb-item v-if="index<hrefHistory.length-1" :replace='true'>
                    <a href="javaScript:void(0)" @click="goHistory(index)"> {{item.name}}</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-else>{{item.name}}</el-breadcrumb-item>
            </template>

        </el-breadcrumb>

        <div class="goods">
            <div class="goodsImg" :style="{backgroundImage:'url('+shopInfo.image+')'}">

            </div>

            <div class="infos">
                <div class="title">
                    {{shopInfo.title}}
                </div>
                <div class="price" v-if="shopInfo.productPriceList.length>0">
                    <div class="left">
                        <div class="price-text">价格</div>
                        <div class="price-text">起定量</div>
                    </div>
                    <div class="price-item" v-for="item in shopInfo.productPriceList">
                        <div class="priceNum">
                            <small>¥</small>{{item.price}}</div>
                        <div class="price-text" v-if="item.maxCounts&&(item.minCounts||item.minCounts==0)">{{item.minCounts}}-{{item.maxCounts}}张</div>
                        <div class="price-text" v-else-if='item.minCounts||item.minCounts==0'>{{item.minCounts}}张以上</div>
                        <div class="price-text" v-else-if='item.maxCounts'>{{item.maxCounts}}张以下</div>
                    </div>

                </div>

                <div v-else style="font-size:24px;color:rgba(251,110,8,1);line-height:26px;margin-top:10px;">¥{{shopInfo.price}}</div>

                <div class="comment">
                    <span>评价</span>
                    <el-rate allow-half class="star" disabled v-model="commentVal" :colors="['#E96400', '#E96400', '#E96400']" disabled-void-color="#D4D4D4"></el-rate>
                    <span style="color:#999999;">{{commentCount}}个评价</span>
                    <span style="color:#666;margin-left:12px;">已售</span>
                    <span style="color:#FB6E08;margin-left:5px;">{{shopInfo.salesVolume}}份</span>
                </div>
                <!-- <div class="comment">

                </div> -->
                <div class="comment">
                    <span>数量</span>
                    <el-input-number class="buyNum" size="mini" v-model="num" :min="1"></el-input-number>
                    <span style="margin-left:20px">库存</span>
                    <span style="color:#FB6E08;margin-left:5px;">{{shopInfo.inventory||0}}</span>
                </div>

                <!-- <button  @click="buy">立即购买</button> -->
                <el-button type="warning" class="buy-btn" @click="buy">立即购买</el-button>
            </div>
            <div class="goodsInfo">
                <div class="goodsTop">
                    <div class="kuai"></div>
                    <span>商家信息</span>
                </div>
                <div class="title">
                    <div class="name">{{storeInfo.storeName}}</div>
                    <img src="../assetsPre/location_pre.png" alt="">
                    <div class="address">{{storeInfo.citye}}</div>
                </div>
                <div class="titlesub">
                    {{storeInfo.description}}
                </div>
                <div class="subtitle">
                    <span>响应时间 :</span>
                    <span>{{storeInfo.responseTime}}分钟</span>
                </div>
                <div class="subtitle">
                    <span>返片率 :</span>
                    <span>{{storeInfo.reworkRate}}%</span>
                </div>

                <div class="ask" v-if="storeFlag">
                    <img src="../assetsPre/kefu.png" alt="">
                    <span>在线咨询</span>
                </div>

                <!-- <img src="../assetsPre/levelA.png" alt="" class="level"> -->
                <div class="level" :style="{backgroundImage:'url('+require('../assetsPre/startLogo.png')+')'}">{{storeInfo.credit}}</div>
            </div>

        </div>

        <div class="goodsList">
            <el-tabs class="goodsTab" v-model="activeName">
                <el-tab-pane label="商品详情" name="first">
                    <div class="imgList productInfo">
                        <div v-html="shopInfo.productDetail"></div>
                        <!-- <img :src="item.image" v-for="item in shopInfo.productImageList" alt=""> -->
                    </div>
                </el-tab-pane>
                <el-tab-pane label="服务详情" name="second">
                    <div class="serviceDetai">
                        {{shopInfo.serviceDetail}}
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'product',
    data() {
        return {
            shopInfo: {
                productPriceList: []
            },
            activeName: 'first',
            goodsList: [],
            commentCount: 0,
            commentVal: 4,
            num: 1,
            storeInfo: {},
            hrefHistory: []
        }
    },
    computed: {
        ...mapState(['userInfo']),
        storeFlag() {
            var result = false
            if (this.userInfo) {
                if (this.userInfo.storeFlag == 'N') {
                    result = true
                }
            }
            return result
        }
    },
    mounted() {
        console.log(this.userInfo)
        console.log(this.$route.query.breHref)
        var breHrefs = this.$route.query.breHref.split('_;')
        breHrefs.forEach(item => {
            if (item) {
                var jsonp = {
                    name: item.split(',')[0],
                    href: item.split(',')[1]
                }
                this.hrefHistory.push(jsonp)
            }
        })

        this.$http.get({
            url: '/productInfo/getOne',
            data: {
                id: this.$route.query.id
            }
        }).then(res => {
            if (res.success) {
                this.shopInfo = res.data
                this.storeInfo = res.data.storeInfo
                document.title = res.data.title
                var jsonp = {
                    name: res.data.title,
                    href: this.$route.name
                }
                this.hrefHistory.push(jsonp)

            }
        }).catch(e => {
            console.log(e)
        })

        this.$http.get({
            url: '/productComment/count',
            data: {
                productId: this.$route.query.id,
                typeFlag: 0
            }
        }).then(res => {
            if (res.success) {
                this.commentCount = res.data.commentCount
                this.commentVal = parseFloat(res.data.starLevel)
            }
        }).catch(e => {
            console.log(e)
        })


        // this.$http.get({
        //     url: '/productInfo/all',
        //     data: {
        //         storeId: this.$route.query.id,
        //         onShelf: 'Y',
        //         useFlag: 'Y'
        //     }
        // }).then(res => {
        //     if (res.success) {
        //         this.goodsList = res.data
        //     }
        // }).catch(e => {
        //     console.log(e)
        // })

    },
    methods: {
        scrollMenu() {

        },
        goHistory(i) {
            this.$router.go(i - this.hrefHistory.length + 1)
        },
        buy() {
            if (!this.userInfo) {
                this.$router.push({
                    name: 'login'
                })
                return
            }

            var inventory = this.shopInfo.inventory || 0

            if (this.num > inventory) {
                this.$message({
                    message: '库存不足不能购买',
                    type: 'warning'
                });
            }
            else {
                this.$router.push({
                    name: 'submit',
                    query: {
                        productId: this.shopInfo.id,
                        storeId: this.shopInfo.storeId,
                        num: this.num
                    }
                })
            }

        }
    }
}
</script>

<style lang="less" scoped>
.Breadcrumb {
    padding: 21px 0 14px;
    margin: auto;
    width: 1190px;
}

.goods {
    margin: auto;
    width: 1146px;
    overflow: hidden;
    height: 270px;
    padding: 22px;
    position: relative;
    font-size: 0;
    height: 268px;
    background-color: #fff;
    display: block;
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);

    .shop {
        width: 350px;
        display: inline-block;
        height: 274px;
        vertical-align: middle;
        border-left: 1px solid #eaeaea;
    }

    .level {
        display: inline-block;
        vertical-align: top;

        position: absolute;
        right: 0;
        top: 0;

        width: 50px;
        height: 30px;

        background-position: center center;
        background-size: cover;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
        padding-right: 8.5px;
        text-align: right;
    }

    .goodsImg {
        width: 360px;
        height: 270px;
        border-radius: 4px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        display: inline-block;
        vertical-align: middle;
    }

    .infos {
        width: 385px;
        height: 270px;
        display: inline-block;
        vertical-align: middle;
        padding: 0 26px 0 21px;

        .title {
            font-size: 24px;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 31px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 385px;
        }

        .price {
            padding: 0 17px;
            width: 324px;
            height: 88px;
            background: rgba(254, 168, 60, 0.15);
            margin-top: 15px;

            .left {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(102, 102, 102, 1);
                line-height: 44px;
                display: inline-block;
                vertical-align: middle;
                width: 60px;
            }

            .price-item {
                width: 88px;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(102, 102, 102, 1);
                line-height: 44px;
                display: inline-block;
                vertical-align: middle;

                .priceNum {
                    font-size: 20px;
                    color: #fb6e08;

                    small {
                        font-size: 14px;
                        margin-right: 5px;
                    }
                }
            }
        }

        .comment {
            margin-top: 15px;
            span {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(102, 102, 102, 1);
                line-height: 16px;
                vertical-align: middle;
            }

            .star {
                display: inline-block;
                vertical-align: middle;
                margin-left: 16px;
            }
        }

        .buyNum {
            display: inline-block;
            vertical-align: middle;
            margin-left: 20px;
            width: 103px;
            height: 27px;
        }

        .buy-btn {
            display: block;
            margin: 15px 0 0 44px;
            width: 106px;
            // height: 36px;
            // background: rgba(251, 110, 8, 1);
            border-radius: 3px;
            font-size: 14px;
        }
    }

    .goodsInfo {
        padding-left: 32px;
        width: 320px;
        display: inline-block;
        vertical-align: middle;
        height: 270px;
        overflow: hidden;
        position: relative;
        border-left: 1px solid #eaeaea;
        .goodsTop {
            .kuai {
                width: 4px;
                height: 14px;
                background: rgba(11, 158, 192, 1);
                display: inline-block;
                vertical-align: middle;
            }
            span {
                font-size: 16px;
                font-family: MicrosoftYaHei;
                color: rgba(11, 158, 192, 1);
                line-height: 21px;
                vertical-align: middle;
                margin-left: 8px;
            }
        }
        .title {
            overflow: hidden;
            margin-top: 10px;

            .name {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 18px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 24px;
                vertical-align: middle;
                max-width: 250px;
            }

            img {
                width: 12px;
                height: 15px;
                margin: 0 6px 0px 8px;
                vertical-align: middle;
            }

            .address {
                display: inline-block;
                font-size: 12px;
                font-family: PingFangSC;
                font-weight: bold;
                color: rgba(11, 158, 192, 1);
                line-height: 17px;
                vertical-align: middle;
            }
        }

        .titlesub {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            line-height: 19px;
            margin-top: 12px;
        }

        .subtitle {
            margin-top: 10px;
            span {
                font-size: 14px;
                font-family: MicrosoftYaHei;

                line-height: 16px;
                &:first-child {
                    color: #666666;
                }
                &:last-child {
                    color: #fb6e08;
                }
            }
        }

        .collection {
            width: 152px;
            height: 39px;
            border-radius: 3px;
            border: 1px solid rgba(253, 149, 1, 1);
            text-align: center;
            line-height: 39px;
            margin-top: 20px;
            cursor: pointer;
            span {
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: #fb6e08;
                line-height: 19px;
                vertical-align: middle;
            }

            img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
                vertical-align: middle;
            }
        }
        .ask {
            line-height: 32px;
            position: absolute;
            bottom: 0;
            left: 32px;
            cursor: pointer;
            span {
                font-size: 12px;
                font-family: PingFangSC;
                font-weight: 500;
                color: rgba(153, 153, 153, 1);
                line-height: 17px;
                vertical-align: middle;
                margin-left: 10px;
            }

            img {
                width: 38px;
                height: 32px;
                vertical-align: middle;
            }
        }
    }
}

.goodsList {
    width: 1190px;
    margin: 22px auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);

    .goodsTab {
        margin-left: 20px;
    }

    .allGoods {
        font-size: 0;
        .goods-item {
            display: inline-block;
            width: 25%;
            padding: 35px 0 68px;
            box-sizing: border-box;
            -moz-box-sizing: border-box; /* Firefox */
            -webkit-box-sizing: border-box; /* Safari */

            .icon {
                width: 176px;
                height: 100px;
                border-radius: 4px;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                margin: auto;
            }

            .title {
                margin: auto;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 19px;
                margin-top: 8.6px;
                width: 176px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .subTitle {
                margin: auto;
                line-height: 26px;
                margin-top: 7px;
                width: 176px;
                span {
                    &:first-child {
                        font-size: 20px;
                        font-family: MicrosoftYaHei;
                        color: rgba(251, 110, 8, 1);
                        line-height: 20px;
                        vertical-align: bottom;
                    }
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    color: rgba(102, 102, 102, 1);
                    line-height: 16px;
                    vertical-align: bottom;
                }
            }

            &:not(:last-child) {
                border-right: 1px solid #eaeaea;
            }

            &:nth-child(4n) {
                border-right: 0;
            }
        }

        .line {
            width: 100%;
            height: 1px;
            background: #eaeaea;
        }
    }
}

.imgList {
    padding-right: 20px;
    padding-bottom: 20px;
    img {
        display: block;
        width: 100%;
        height: auto;
    }
}

.serviceDetai {
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    line-height: 19px;
}
</style>
