<template>
    <div class="conatiner">
        <div class="top" v-if="userInfo">
            <div class="top-item" style="width:34%;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:'userSet',query:{activeName:'second'}}" class="top-item" style="width:22%;line-height:45px;">
                我的收货地址
            </router-link>
            <router-link :to="{name:'memberMoney'}" class="top-item" style="width:22%">
                <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:'memberPoint'}" class="top-item" style="width:22%;line-height:45px;">
                我的积分
            </router-link>
        </div>

        <div class="contentTitle">
            最新订单进展
        </div>

        <div class="content">
            <div class="orderList">
                <order-item v-for="item in orderList" :info='item' @startChat='startChat' @changeData='changeData'></order-item>
            </div>

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

<script>
import { mapState } from 'vuex'
import orderItem from '../components/OrderItem'
export default {
    name: 'order',
    data() {
        return {
            orderList: [],
            currentPage: 1
        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        this.$http.get({
            url: '/userOrder/page',
            data: {
                userId: this.userInfo.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({})

    },
    methods: {
        startChat(id) {
            this.$emit('startChat', id)
        },
        changeData(json) {
            this.orderList.forEach((item, index) => {
                if (item.id == json.id) {
                    this.$set(this.orderList, index, json)
                }
            })
        },
        getData(jsonp) {
            var data = jsonp
            data.userId = this.userInfo.id
            data.pageNumber = 3
            data.currentPage = this.currentPage

            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)
            })
        },
        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;
        min-height: 45px;

        .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;
        }
    }
}

.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>
