<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">
                    <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.icon+')'}"></div>
            <div class="goodsInfo">
                <div class="title">
                    <div class="name">{{shopInfo.storeName}}</div>
                    <img src="../assetsPre/location_pre.png" alt="">
                    <div class="address">{{shopInfo.citye}}</div>
                </div>
                <div class="titlesub">
                    {{shopInfo.description}}
                </div>
                <div class="subtitle">
                    <span>响应时间 :</span>
                    <span>{{shopInfo.responseTime}}分钟</span>
                </div>
                <div class="subtitle">
                    <span>返片率 :</span>
                    <span>{{shopInfo.reworkRate}}%</span>
                </div>

                <!-- <div class="collection">
                    <img src="../assetsPre/Star.png" alt="">
                    <span>收藏店铺</span>
                </div> -->

                <el-button v-if="collectID" type="warning" icon="el-icon-star-on" @click="collect" class="collection" size="mini">已收藏</el-button>
                <el-button v-else type="warning" icon="el-icon-star-off" @click="collect" class="collection" size="mini" plain>收藏店铺</el-button>

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

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

        <div class="goodsList" id='goodsList'>
            <el-tabs class="goodsTab" v-model="activeName">
                <el-tab-pane label="在售商品" name="first">
                    <div class="allGoods">
                        <template v-for="(item,index) in goodsList">
                            <router-link :to='{name:"product",query:{id:item.id,breHref:breHref,storeId:item.storeId}}' class="goods-item">
                                <div class="icon" :style="{backgroundImage:'url('+item.image+')'}"></div>
                                <div class="title">{{item.title}}</div>
                                <div class="subTitle">
                                    <span>¥{{item.price}}</span>
                                    <span style="margin-left:3px;">已售</span>
                                    <span style="color:#FB6E08">{{item.salesVolume}}</span>
                                </div>
                            </router-link>

                            <div class="line" v-if="(index+1)%4==0"></div>
                        </template>
                        <div style="padding:20px " v-if="totalProduct>8">
                            <el-pagination background @current-change="productCurrentChange" :current-page="productCurrent" :page-size="8" layout="total, prev, pager, next" :total="totalProduct">
                            </el-pagination>
                        </div>
                    </div>

                </el-tab-pane>
                <el-tab-pane :label="'店铺评价 ('+totalComment+')'" name="second">
                    <commentItem v-for="item in commentList" :type='"store"' style="border-bottom:1px solid #ebebeb" :info='item'></commentItem>
                    <div style="padding:20px " v-if="totalComment>8">
                        <el-pagination background @current-change="commentCurrentChange" :current-page="commentCurrent" :page-size="8" layout="total, prev, pager, next" :total="totalComment">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="最近成单" name="third">
                    <template>
                        <el-table class="pointTable" :data="orderList" style="width:95%;margin: 0 0 20px 0;">
                            <el-table-column prop="createTime" label="交易时间" width="180" align="center">
                                <template slot-scope="scope">
                                    <span>{{getTime(scope.row.createTime)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="productInfo.title" label="商品名称" width="180" align="center">
                            </el-table-column>
                            <el-table-column prop="userInfo.nickname" label="交易人" align="center">
                                <!-- <template slot-scope="scope">
                                    <span>{{scope.row.userInfo.nickname}}</span>
                                </template> -->
                            </el-table-column>
                            <el-table-column prop="totlePrice" label="交易金额" align="center">
                            </el-table-column>
                        </el-table>
                        <div style="padding:20px " v-if="totalOrder>8">
                            <el-pagination background @current-change="orderCurrentChange" :current-page="orderCurrent" :page-size="8" layout="total, prev, pager, next" :total="totalOrder">
                            </el-pagination>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import commentItem from '../pagesPre/CommentItem'
export default {
    name: 'shop',
    data() {
        return {
            shopInfo: {},
            activeName: 'first',
            goodsList: [],
            hrefHistory: [],
            collectID: 0,
            commentCurrent: 1,
            commentList: [],
            totalComment: 0,
            productCurrent: 1,
            totalProduct: 0,
            orderCurrent: 1,
            totalOrder: 0,
            orderList: []
        }
    },
    computed: {
        ...mapState(['userInfo']),
        breHref() {
            var str = this.$route.query.breHref
            str += this.shopInfo.storeName + ',' + this.$route.name + '_;'
            return str
        },
        storeFlag() {
            var result = false
            if (this.userInfo) {
                if (this.userInfo.storeFlag == 'N') {
                    result = true
                }
            }
            return result
        }
    },
    mounted() {
        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: '/storeInfo/getOne',
            data: {
                id: this.$route.query.id
            }
        }).then(res => {
            if (res.success) {
                this.shopInfo = res.data
                document.title = res.data.storeName
                var jsonp = {
                    name: res.data.storeName,
                    href: this.$route.name
                }
                this.hrefHistory.push(jsonp)
                // this.$store.commit('updateHrefHistory', list)
                if (this.userInfo) {
                    this.$http.get({
                        url: '/storeCollection/getOne',
                        data: {
                            userId: this.userInfo.id,
                            targetId: this.shopInfo.id
                        }
                    }).then(res => {
                        if (res.success) {
                            if (res.data) {
                                this.collectID = res.data.id
                            }

                        }
                    })
                }


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



        this.getProduct()
        this.getComment()
        this.getOrder()






    },
    methods: {
        scrollMenu() {

        },
        goHistory(i) {
            this.$router.go(i - this.hrefHistory.length + 1)
        },
        collect() {
            console.log('aaaaaa')
            if (!this.userInfo) {
                this.$confirm('<img src="' + require('../assetsPre/fail.png') + '" style="width:48px;height:47px;vertical-align: middle;"><span style="font-size:24px;font-family:MicrosoftYaHei;color:rgba(51,51,51,1);margin-left:12px;line-height:17px;vertical-align: middle;">用户未登录</span>', '', {
                    confirmButtonText: '去登录',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    center: true,
                    cancelButtonClass: 'btn-cancel',
                    confirmButtonClass: 'btn-confirm',
                    closeOnClickModal: false,
                }).then(() => {
                    this.$router.push({
                        name: 'login'
                    })

                }).catch(() => {
                });
            }
            else {

                if (this.collectID) {
                    this.$http.post({
                        url: '/storeCollection/del',
                        data: {
                            id: this.collectID
                        }
                    }).then(res => {
                        if (res.success) {
                            this.$message({
                                message: '取消收藏成功',
                                type: 'success'
                            });

                            this.collectID = 0

                        }
                    })
                }
                else {
                    this.$http.post({
                        url: '/storeCollection/save',
                        data: {
                            userId: this.userInfo.id,
                            targetId: this.shopInfo.id,
                            createUser: this.userInfo.nickname
                        }
                    }).then(res => {
                        if (res.success) {
                            this.$message({
                                message: '收藏成功',
                                type: 'success'
                            });

                            this.collectID = res.data


                        }
                    })
                }


            }
        },
        productCurrentChange(page) {
            this.productCurrent = page;
            this.getProduct();
        },
        orderCurrentChange(page) {
            this.orderCurrent = page;
            this.getOrder();
        },
        commentCurrentChange(page) {
            this.commentCurrent = page;
            this.getComment();
        },
        getOrder() {
            this.goodsList = []
            this.$http.get({
                url: '/userOrder/page',
                data: {
                    storeId: this.$route.query.id,
                    onShelf: 'Y',
                    useFlag: 'Y',
                    currentPage: this.orderCurrent,
                    pageNumber: 8
                }
            }).then(res => {
                if (res.success) {
                    this.orderList = res.data.pp
                    this.totalOrder = res.data.page.totalNumber
                }
            }).catch(e => {
                console.log(e)
            })
        },
        getProduct() {
            this.goodsList = []
            this.$http.get({
                url: '/productInfo/page',
                data: {
                    storeId: this.$route.query.id,
                    onShelf: 'Y',
                    useFlag: 'Y',
                    currentPage: this.productCurrent,
                    pageNumber: 8
                }
            }).then(res => {
                if (res.success) {
                    this.goodsList = res.data.pp
                    this.totalProduct = res.data.page.totalNumber
                }
            }).catch(e => {
                console.log(e)
            })
        },
        getComment() {
            this.commentList = []
            this.$http.get({
                url: '/productComment/page',
                data: {
                    storeId: this.$route.query.id,
                    onShelf: 'Y',
                    useFlag: 'Y',
                    currentPage: this.commentCurrent,
                    pageNumber: 8,
                    typeFlag: 0
                }
            }).then(res => {
                if (res.success) {
                    this.totalComment = res.data.page.totalNumber
                    this.commentList = res.data.pp
                }
            }).catch(e => {
                console.log(e)
            })

        },
        chat() {
            this.$emit("startChat", this.$route.query.id)
        }
    },
    components: {
        commentItem
    }
}
</script>

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

.goods {
    margin: auto;
    width: 1146px;
    overflow: hidden;
    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);

    .level {
        display: inline-block;
        vertical-align: top;
        // width: 58.5px;
        // height: 30px;
        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: 268px;
        border-radius: 4px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        display: inline-block;
        vertical-align: middle;
    }

    .goodsInfo {
        display: inline-block;
        vertical-align: middle;
        margin-left: 24px;
        height: 268px;
        width: 700px;
        overflow: hidden;
        position: relative;
    }

    .title {
        overflow: hidden;

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

        img {
            width: 12px;
            height: 15px;
            margin: 0 6px 2px 17px;
            vertical-align: bottom;
        }

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

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

    .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;
        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: 0;
        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;
        }
    }
}
</style>
