<template>
    <div class="conatiner">
        <div class="top" v-if="userInfo">
            <div class="top-item" style="width:28%;text-align:left">
                <div class="icon" :style="{backgroundImage:'url('+userInfo.icon+')'}"></div>
                <div class="name">
                    <div class="title">{{userInfo.nickname}}</div>
                    <div class="level">
                        <i class="el-icon-star-on"></i>
                        <span class="sub">1</span>
                    </div>
                </div>
            </div>
            <router-link :to="{name:'memberMoney'}" class="top-item" style="width:15%">
                <div>账户余额</div>
                <div style="color:rgb(253, 149, 1);font-size:16px;margin-top:3px;font-weight:bold;">{{userInfo.moneyCoin}}</div>
            </router-link>
            <router-link :to="{name:'shopOrder'}" class="top-item" style="width:15%;line-height:45px;">
                店铺订单
            </router-link>
            <div class="top-item" style="width:38%;line-height:45px;">
                存储空间
                <div class="line">
                    <div class="use" :style="{width:useWidth+'%'}">
                        <span style="position: absolute;">已用 {{isUseSize}}G</span>
                    </div>
                    <span style="position: absolute;right:0;">可用{{canUse}}G</span>

                </div>
                <img style="width:17px;height:17px; vertical-align: middle;" src="../assetsPre/add.png" alt="">
            </div>
        </div>
        <template v-if="orderList.length>0">
            <div class="contentTitle">
                最新订单进展
            </div>

            <div class="content">
                <div class="orderList">
                    <order-item @changeorderinfo='changeorderinfo' v-for="item in orderList" :info='item' :type='"shop"'></order-item>
                </div>

                <el-pagination style="padding:20px 0" v-if="totalNumber>3" background @current-change="currentPageChange" :current-page="currentPage" :page-size="3" layout="total, prev, pager, next" :total="totalNumber">
                </el-pagination>
            </div>
        </template>

    </div>
</template>

<script>
import { mapState } from 'vuex'
import orderItem from '../components/OrderItem'
export default {
    name: 'order',
    data() {
        return {
            orderList: [],
            isUseSize: 0,
            currentPage: 1,
            totalNumber: 0
        }
    },
    computed: {
        ...mapState(['userInfo', 'myStoreInfo']),
        canUse() {
            var num = this.myStoreInfo.memorySpace / 1024
            num = num - parseFloat(this.isUseSize)

            return num.toFixed(0)
        },
        useWidth() {
            var num = 0
            num = parseFloat(this.isUseSize) / parseFloat(this.myStoreInfo.memorySpace / 1024)
            return (num * 100).toFixed(0)
        }
    },
    mounted() {
        // this.$http.get({
        //     url: '/userOrder/page',
        //     data: {
        //         storeId: this.userInfo.storeInfo.id,
        //         pageNumber: 1,
        //         currentPage: 1
        //     }
        // }).then(res => {
        //     if (res.success) {
        //         res.data.pp.forEach(item => {
        //             if (item.productComment.starLevel) {
        //                 item.productComment.starLevel = Number(item.productComment.starLevel)
        //             }
        //             else {
        //                 item.productComment.starLevel = 0
        //             }
        //         })
        //         this.orderList = res.data.pp
        //     }
        // }).catch(e => {
        //     console.log(e)

        // })
        this.getData({})



        this.$http.get({
            url: '/orderImage/getMemorySize',
            data: {
                storeId: this.userInfo.storeInfo.id
            }
        }).then(res => {
            if (res.success) {
                this.isUseSize = (res.data.totalSize / 1024).toFixed(2)
            }
        }).catch(e => {
            console.log(e)

        })

    },
    methods: {
        getData(jsonp) {
            var data = jsonp
            data.storeId = this.myStoreInfo.id
            data.pageNumber = 3
            data.currentPage = this.currentPage
            data.statusStr = '0,1,2,3,4'
            // data.commentFlag = 0
            // if (this.searchKey) {
            //     data.advancedQuery = 'AND_,product_name_,like_,' + this.searchKey
            // }
            this.$http.get({
                url: '/userOrder/page',
                data: data
            }).then(res => {
                if (res.success) {
                    this.totalNumber = res.data.page.totalNumber;
                    res.data.pp.forEach(item => {
                        if (item.productComment.starLevel) {
                            item.productComment.starLevel = Number(item.productComment.starLevel)
                        }
                        else {
                            item.productComment.starLevel = 0
                        }
                    })
                    this.orderList = res.data.pp
                }
            }).catch(e => {
                console.log(e)
            })
        },
        changeorderinfo(id) {
            this.$http.get({
                url: '/userOrder/getOne',
                data: {
                    id: id
                }
            }).then(res => {
                if (res.success) {
                    this.orderList.forEach((item, index) => {
                        if (item.id == id) {
                            if (res.data.productComment.starLevel) {
                                res.data.productComment.starLevel = Number(res.data.productComment.starLevel)
                            }
                            else {
                                res.data.productComment.starLevel = 0
                            }
                            this.$set(this.orderList, index, res.data)
                        }
                    })
                }
            }).catch(e => {
                console.log(e)
            })
        },
        currentPageChange(page) {
            this.currentPage = page
            this.getData({})
        }

    },
    components: {
        orderItem
    }
}
</script>

<style lang="less" scoped>
.top {
    height: 95px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);
    font-size: 0;
    line-height: 95px;

    .top-item {
        display: inline-block;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(51, 51, 51, 1);
        line-height: 19px;
        vertical-align: middle;
        text-align: center;
        box-sizing: border-box;

        .icon {
            width: 55px;
            height: 55px;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 100%;
            display: inline-block;
            vertical-align: middle;
            margin-left: 27px;
        }

        .name {
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
            .title {
                display: block;
                font-size: 16px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 21px;
            }

            .level {
                color: #e2b83a;
                display: block;
                margin-top: 8px;
                font-size: 0;
                i {
                    font-size: 20px;
                }

                .sub {
                    font-size: 16px;
                    vertical-align: bottom;
                    display: inline-block;
                    transform: scale(0.5, 0.5);
                }
            }
        }

        &:not(:first-child) {
            border-left: 1px solid #ebebeb;
        }

        .line {
            width: 254px;
            height: 16px;
            background: rgba(234, 234, 234, 1);
            border-radius: 12px;
            display: inline-block;
            vertical-align: middle;
            font-size: 0;
            text-align: left;
            margin: 0 10px;
            position: relative;
            line-height: 16px;

            .use {
                width: 180px;
                height: 16px;
                background: linear-gradient(134deg, rgba(250, 145, 34, 1) 0%, rgba(247, 107, 28, 1) 100%);
                border-radius: 12px;
                display: inline-block;

                span {
                    color: #fff;
                    float: left;
                    margin-left: 10px;
                    text-shadow: #666 0.1em 0.1em 0.2em;
                }
            }
            span {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(255, 94, 0, 1);
                line-height: 16px;
                text-align: right;
                vertical-align: middle;
                float: right;
                margin-right: 10px;
                // text-shadow: black 0.1em 0.1em 0.2em
            }
        }
    }
}

.contentTitle {
    font-size: 14px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 19px;
    padding: 20px 0 17px;
}

.content {
    min-height: 455px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);

    .orderList {
        margin-top: 23px;
    }
}
</style>
