<template>
    <view class="order-list">
        <!-- :auth="true" 是表示需要权限登录的 -->
        <tabs
            :current="current"
            @change="handleChange"
            height="80"
            bar-width="60"
            :barStyle="{ bottom: '0' }"
            :auth="true"
            bgColor="#F36161"
            activeColor="#fff"
            inactiveColor="#fff"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="item.name"> </tab>
        </tabs>
        <view class="orderList pt-[20rpx]" v-if="isLogin">
            <orderList :orderStatus="orderStatus"></orderList>
        </view>
       <view v-if="!isLogin" class="mt-[300rpx] flex flex-col items-center w-full">
            <u-button shape="circle" @click="toLogin">登录</u-button>
            <view class="text-info mt-2">抱歉，您尚未登录！</view>
        </view>

        <!-- Component 支付 -->
        <payment
            v-if="payState.showPay || payState.showCheck"
            v-model:show="payState.showPay"
            v-model:show-check="payState.showCheck"
            :order-id="payState.orderId"
            :order_amount="payState.order_amount"
            :from="payState.from"
            :redirect="payState.redirect"
            @success="handlePayResult"
        />

        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app'
import orderList from './components/order-list.vue'
import tab from '@/components/tab/tab.vue'
import tabs from '@/components/tabs/tabs.vue'
import { useUserStore } from '@/stores/user'
import { removeStorageData } from '@/utils/util'

const userStore = useUserStore()
const payState = reactive({
    order_amount: '',
    orderId: '',
    from: '',
    showPay: false,
    showCheck: false,
    redirect: '/pages/order/index?type=0'
})
// 是否登录
const isLogin = computed(() => userStore.token)

const tabList = ref<any>([
    {
        name: '全部',
        orderStatus: ''
    },
    {
        name: '待支付',
        orderStatus: 0
    },
    {
        name: '预约中',
        orderStatus: 1
    },
    {
        name: '服务中',
        orderStatus: 2
    },
    {
        name: '已完成',
        orderStatus: 3
    },
    {
        name: '已关闭',
        orderStatus: 4
    }
])
const current = ref<number>(0)
const totalAmount = ref(0)
const orderStatus = ref<string | number>('')
const handleChange = (index: number) => {
    current.value = Number(index)
    totalAmount.value = tabList
    orderStatus.value = tabList.value[index].orderStatus
}

const handlePayResult = async () => {
    payState.showPay = false
    payState.showCheck = false
    uni.redirectTo({
        url: `/pages/order/index?type=0`
    })
}

//跳转至登录
const toLogin = () => {
    uni.redirectTo({ url: '/pages/login/login' })
}

onShow(() => {
    removeStorageData('selectDate')
    uni.$on('payment', (param: any) => {
        payState.orderId = param.order_id
        payState.from = param.from
        payState.order_amount = param.order_amount
        payState.showPay = true
        payState.redirect =
            payState.redirect + `?order_id=${param.order_id}&from=${param.from}&checkPay=true`
    })
})

onLoad(async (options: any) => {
    current.value = options?.type * 1 || 0
    orderStatus.value = options?.type - 1 < 0 ? '' : options?.type - 1
    if (!Object.keys(options).length) {
        current.value = 0
        orderStatus.value = ''
    }
    // h5支付用于弹起手动确认支付弹窗
    if (options?.checkPay) {
        payState.orderId = options.order_id
        payState.from = options.from
        payState.showCheck = true
        return
    }
})

onUnload(() => {
    uni.$off(['payment'])
    payState.showPay = false
})

onHide(() => {
    uni.$off(['payment'])
})
</script>

<style lang="scss" scoped>
.element.style {
    background-color: red;
}

.orderList {
    height: calc(100vh - 44px - 100rpx - env(safe-area-inset-bottom));
}
</style>
