<template>
    <div class="conatiner">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="getOrder">
            <el-menu-item index="1">所有订单</el-menu-item>
            <el-menu-item index="2">待付款</el-menu-item>
            <el-submenu index="3">
                <template slot="title">{{getTypeName('3',activeIndex)}}</template>
                <el-menu-item index="3-1">待上传</el-menu-item>
                <el-menu-item index="3-2">待修图</el-menu-item>
                <el-menu-item index="3-3">待审核</el-menu-item>
                <el-menu-item index="3-4">返修中</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">{{getTypeName('4',activeIndex)}}</template>
                <el-menu-item index="4-1">待发货</el-menu-item>
                <el-menu-item index="4-2">待收货</el-menu-item>
            </el-submenu>
            <el-menu-item index="5">待评价</el-menu-item>
            <el-menu-item index="6">退款中</el-menu-item>
            <el-menu-item index="7">订单回收站</el-menu-item>
        </el-menu>

        <el-input size="mini" placeholder="商品名称" v-model="searchKey" class="orderSearch">
            <el-button slot="append" icon="el-icon-search" @click="currentPageChange(1)"></el-button>
        </el-input>

        <div class="list">
            <template v-if="orderList.length>0">
                <div class="list-top">
                    <div class="left" style="width:687px">
                        <span style="width:270px">商品名称</span>
                        <span style="width:56px">单价</span>
                        <span style="width:56px">数量</span>
                    </div>
                    <div class="right" style="width:265px;">
                        <span>实付款</span>
                        <span>状态</span>
                        <span>操作</span>
                    </div>
                </div>
                <div class="orderList" style="min-height:562px">

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

                </div>
            </template>

            <div v-else class="nothing">
                <img src="../assetsPre/nothingImg.png" alt="">
                <p>还有下订单哦~</p>
            </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 {
            activeIndex: '1',
            list: [{

            }],
            searchKey: '',
            orderList: [],
            currentPage: 1,
            totalNumber: 0
        }
    },
    computed: {
        ...mapState(['userInfo', 'myStoreInfo'])
    },
    mounted() {
        this.getData({})
    },
    methods: {
        currentPageChange(page) {
            this.currentPage = page;
            this.getData({});
        },
        getOrder(key, keyPath) {
            this.activeIndex = key
            this.currentPage = 1
            var jsonp = {
                statusFlag: '',
                productType: ''
            }
            switch (key) {
                case '2':
                    jsonp.statusFlag = 0
                    break
                case '3-1':
                    jsonp.productType = 0
                    jsonp.statusFlag = 1
                    break
                case '3-2':
                    jsonp.productType = 0
                    jsonp.statusFlag = 2
                    break
                case '3-3':
                    jsonp.productType = 0
                    jsonp.statusFlag = 3
                    break
                case '3-4':
                    jsonp.productType = 0
                    jsonp.statusFlag = 4
                    break
                case '4-1':
                    jsonp.productType = 1
                    jsonp.statusFlag = 1
                    break
                case '4-2':
                    jsonp.productType = 1
                    jsonp.statusFlag = 2
                    break
                case '5':
                    jsonp.statusFlag = 5
                    break
                case '6':
                    jsonp.statusFlag = 7
                    break
                case '7':
                    jsonp.statusFlag = 8
                    break
            }

            this.getData(jsonp);
        },
        getTypeName(index, now) {
            if (index == '4') {
                if (now == '4-1') {
                    return '待发货'
                } else if (now == '4-2') {
                    return '待收货'
                }
                else {
                    return '实体商品'
                }
            }

            if (index == '3') {
                if (now == '3-1') {
                    return '待上传'
                } else if (now == '3-2') {
                    return '待修图'
                } else if (now == '3-3') {
                    return '待审核'
                } else if (now == '3-4') {
                    return '返修中'
                }
                else {
                    return '修图商品'
                }
            }

            return ''
        },
        search() {
            console.log('aaaa')
        },
        getData(jsonp) {
            var data = jsonp
            data.storeId = this.myStoreInfo.id
            data.pageNumber = 3
            data.currentPage = this.currentPage
            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)
            })
        }

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

<style lang="less" scoped>
.conatiner {
    min-height: 734px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);
    padding: 0 25px 0 39px;

    position: relative;

    .orderSearch {
        position: absolute;
        width: 220px;
        height: 28px;
        right: 25px;
        top: 20px;
    }

    .list {
        padding-bottom: 20px;
    }

    .list-top {
        height: 37px;
        line-height: 37px;
        background: rgba(244, 244, 244, 1);
        margin: 20px 0 17px;
        font-size: 0;

        .left {
            display: inline-block;
            font-size: 0;
            vertical-align: middle;
        }

        .right {
            display: inline-block;
            font-size: 0;
            vertical-align: middle;
            span {
                width: 33%;
            }
        }

        span {
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(108, 108, 108, 1);
            line-height: 16px;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
        }
    }
}

.nothing {
    margin-top: 130px;
    img {
        width: 167px;
        height: 167px;
        display: block;
        margin: auto;
    }

    p {
        font-size: 14px;
        text-align: center;
        color: rgba(51, 51, 51, 1);
        line-height: 19px;
        margin-top: 24px;
    }
}
</style>
