<template>
    <ion-page ref="page">
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back(-1)"></ion-back-button>
                </ion-buttons>
                <ion-title>{{ $t('order.my') }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content :fullscreen="true">
            <ion-item-divider class="tabs" sticky>
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div
                            class="tab"
                            v-for="item in statusOptions"
                            :key="item.value"
                            :class="{ active: status === item.value }"
                            @click="status = item.value"
                        >
                            {{ $t('order.status.' + item.value) }}
                        </div>
                        <div class="line" :style="{ left: linePosition + 'px' }"></div>
                    </div>
                </div>
            </ion-item-divider>
            <div class="tabs-placeholder"></div>
            <van-empty v-if="finished && list.length === 0" :image="emptyImg"></van-empty>
            <van-list
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('common.loadFinish')"
                @load="loadmore"
            >
                <order-item v-for="item in list" :key="item.id" :info="item"></order-item>
            </van-list>
        </ion-content>
    </ion-page>
</template>
<script>
import { mapState } from 'pinia'
import { useUserStore } from '@/stores/user'
import OrderItem from '@/components/OrderItem.vue'
import { parse } from 'date-fns'
import { useWindowSize } from '@vueuse/core'
import emptyImg from '@/assets/img_empty_order.png'
export default {
    name: 'OrderPage',
    components: { OrderItem },
    data() {
        return {
            priceDirection: 0,
            list: [],
            refreshing: false,
            loading: false,
            finished: false,
            statusOptions: [
                { title: '全部', value: 'ALL' },
                { title: '待支付', value: 'NOT_PAID' },
                { title: '待上架', value: 'CONFIRMED' },
                { title: '已上架', value: 'SELLING' },
                { title: '已售出', value: 'SOLD' }
            ],
            status: 'ALL',
            page: 0,
            size: 20,
            windowSize: useWindowSize(),
            emptyImg
        }
    },
    computed: {
        ...mapState(useUserStore, ['user']),
        linePosition() {
            const { width } = this.windowSize
            const tabSize = width / this.statusOptions.length
            return this.statusOptions.findIndex(i => i.value == this.status) * tabSize + (tabSize - 36) / 2
        }
    },
    created() {
        if (this.$route.query.status) {
            this.status = this.$route.query.status
        }
        this.$http
            .post(
                '/order/my',
                {
                    query: {
                        status: 'SELLING'
                    },
                    page: 0,
                    size: 1
                },
                { body: 'json' }
            )
            .then(res => {
                if (res.totalElements > 0) {
                    this.SELLINGNUM = res.totalElements
                } else {
                    this.SELLINGNUM = ''
                }
            })
            .catch(() => {
                this.finished = true
            })
        this.loading = true
        this.getData()
    },
    methods: {
        refresh() {
            this.loading = true
            this.page = 0
            this.finished = false
            this.getData()
        },
        loadmore() {
            this.page++
            this.getData()
        },
        getData() {
            return this.$http
                .post(
                    '/order/my',
                    {
                        query: {
                            status: this.status === 'ALL' ? undefined : this.status
                        },
                        page: this.page,
                        size: 20,
                        sort: 'createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    if (res.first) {
                        this.list = []
                    }
                    this.list = this.list.concat(res.content)
                    this.refreshing = false
                    this.loading = false
                    this.finished = res.last
                })
                .catch(() => {
                    this.finished = true
                })
        }
    },
    watch: {
        status() {
            this.list = []
            this.page = 0
            this.finished = false
            this.$router
                .replace({
                    query: {
                        ...this.$route.query,
                        status: this.status
                    }
                })
                .catch(() => {})
            this.refresh()
        }
    }
}
</script>
<style lang="less" scoped>
ion-content {
    position: relative;
}
ion-item-divider.tabs {
    padding: 0;
    background: none;
    --padding-start: 0;
    --padding-end: 0;
    --inner-padding-start: 0;
    --inner-padding-end: 0;
}
.tabs-wrapper {
    height: 40px;
    position: sticky;
    width: 100%;
    .tabs {
        .f();
        height: 40px;
        background: var(--ion-color-step-0);
        position: relative;
        .tab {
            height: 40px;
            flex-basis: 0;
            flex-grow: 1;
            .f();
            font-size: 13px;
            justify-content: center;
            &.active {
                .gt();
            }
        }
        .line {
            width: 36px;
            height: 2px;
            position: absolute;
            bottom: 0;
            background: #ed1e31 linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
            transition: left 0.2s;
        }
    }
}
</style>
