<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{backgroundColor: '#ffcb57'}"
                :border-bottom="false"
                title="售后管理"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <view class="u-tabs-box">
                <view class="pl">
                    <!-- <u-image src="/static/images/common/search.png" height="48rpx" width="48rpx"></u-image> -->
                    <u-tabs-swiper
                        activeColor="#ffcb57"
                        font-size="26"
                        ref="tabs"
                        :list="list"
                        :current="current"
                        @change="change"
                    ></u-tabs-swiper>
                </view>
            </view>
            <swiper
                class="swiper-box"
                :current="swiperCurrent"
                @transition="transition"
                @animationfinish="animationfinish"
            >
                <swiper-item class="swiper-item" v-for="itx in 4" :key="itx">
                    <scroll-view
                        scroll-y
                        style="height: 100%;width: 100%;"
                        @scrolltolower="reachBottom"
                    >
                        <view class="page-box">
                           <u-empty text="暂无数据" mode="list"></u-empty>
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    name: '全部'
                },
                {
                    name: '处理中'
                },
                {
                    name: '已完结'
                },
                {
                    name: '关闭'
                }
            ],
            current: 0,
            swiperCurrent: 0,
            tabsHeight: 0,
            dx: 0,
            loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore']
        };
    },
    onLoad() {},
    computed: {
        // 价格小数
        priceDecimal() {
            return val => {
                if (val !== parseInt(val)) return val.slice(-2);
                else return '00';
            };
        },
        // 价格整数
        priceInt() {
            return val => {
                if (val !== parseInt(val)) return val.split('.')[0];
                else return val;
            };
        }
    },
    methods: {
        reachBottom() {
            return;
            // 此tab为空数据
            if (this.current != 2) {
                this.loadStatus.splice(this.current, 1, 'loading');
                setTimeout(() => {
                    this.getOrderList(this.current);
                }, 1200);
            }
        },
        // 页面数据
        getOrderList(idx) {
            for (let i = 0; i < 5; i++) {
                let index = this.$u.random(0, this.dataList.length - 1);
                let data = JSON.parse(JSON.stringify(this.dataList[index]));
                data.id = this.$u.guid();
                this.orderList[idx] && this.orderList[idx].push(data);
            }
            this.loadStatus.splice(this.current, 1, 'loadmore');
        },
        // 总价
        totalPrice(item) {
            let price = 0;
            item.map(val => {
                price += parseFloat(val.price);
            });
            return price.toFixed(2);
        },
        // 总件数
        totalNum(item) {
            let num = 0;
            item.map(val => {
                num += val.number;
            });
            return num;
        },
        // tab栏切换
        change(index) {
            this.swiperCurrent = index;
            this.getOrderList();
        },
        transition({ detail: { dx } }) {
            this.$refs.tabs.setDx(dx);
        },
        animationfinish({ detail: { current } }) {
            this.$refs.tabs.setFinishCurrent(current);
            this.swiperCurrent = current;
            this.current = current;
        },
        hireMan() {
            this.$u.route('/pages/hire/index');
        }
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    }
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .page-box {
            .orderHd {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    /deep/.u-image {
                        margin-right: 12rpx;
                        background-color: #fff;
                    }
                    .contact {
                        .line {
                            font-size: 24rpx;
                            color: #262626;
                        }
                    }
                }
                .right {
                    .status {
                        font-size: 24rpx;
                        color: #434343;
                    }
                }
            }
            .orderBd {
                .item {
                    display: flex;
                    margin: 20rpx 0 0;
                    border-bottom: 1rpx dashed #d9d9d9;
                    &::last-child {
                        border-bottom: none;
                    }
                    .left {
                        margin-right: 20rpx;
                        image {
                            width: 200rpx;
                            height: 200rpx;
                            border-radius: 10rpx;
                        }
                    }
                    .content {
                        .title {
                            font-size: 28rpx;
                            line-height: 50rpx;
                        }
                        .type {
                            margin: 10rpx 0;
                            font-size: 24rpx;
                            color: $u-tips-color;
                        }
                        .delivery-time {
                            color: #595959;
                            font-size: 24rpx;
                        }
                    }
                    .right {
                        margin-left: 10rpx;
                        padding-top: 20rpx;
                        text-align: right;
                        .decimal {
                            font-size: 24rpx;
                            margin-top: 4rpx;
                        }
                        .number {
                            color: $u-tips-color;
                            font-size: 24rpx;
                        }
                    }
                }
                .workmans {
                    padding: 12rpx 0;
                    .mtitle {
                        font-size: 24rpx;
                        color: #262626;
                    }
                    .number {
                        font-size: 24rpx;
                        font-weight: 600;
                        color: #ffcb57;
                    }
                }
            }
            .orderFt {
                .actions {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    /deep/.u-btn {
                        margin-left: 6rpx;
                    }
                }
            }
        }
    }
    .swiper-box {
        flex: 1;
    }
    .swiper-item {
        height: 100%;
    }
}
</style>
