<template>
    <view class="order-list">
        <!-- :auth="true" 是表示需要权限登录的 -->
        <tabs
            :current="current"
            @change="handleChange"
            height="86"
            :font-size="32"
            bar-width="60"
            :barStyle="{ bottom: '0' }"
            :auth="true"
            v-bind="tabsColor"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="item.name">
                <view class="orderList pt-[20rpx]" v-if="isLogin">
                    <orderList
                        :orderStatus="item.orderStatus"
                        :i="i"
                        :index="current"
                        :refresh="item.refresh"
                    ></orderList>
                </view>
            </tab>
        </tabs>
        <!-- <view class="orderList pt-[20rpx]" v-if="isLogin">
            <orderList :orderStatus="orderStatus"></orderList>
        </view> -->

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

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

<script lang="ts" setup>
import { ref, computed, reactive, unref, provide } 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'
import { useTabs } from '@/hooks/useLockFn'

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

const tabList = ref<any>([
    {
        name: '全部',
        orderStatus: '',
        refresh: false
    },
    {
        name: '待支付',
        orderStatus: 0,
        refresh: false
    },
    {
        name: '预约中',
        orderStatus: 1,
        refresh: false
    },
    {
        name: '服务中',
        orderStatus: 2,
        refresh: false
    },
    {
        name: '已完成',
        orderStatus: 3,
        refresh: false
    },
    {
        name: '退款/售后',
        orderStatus: 4,
        refresh: false
    }
])
const current = ref<number>(0)
const totalAmount = ref(0)
const orderStatus = ref<string | number>('')
const orderlist = ref()
const handleChange = (index: number) => {
    current.value = Number(index)
    totalAmount.value = tabList
    orderStatus.value = tabList.value[index].orderStatus
    tabList.value[index].refresh = true
    setTimeout(() => {
        tabList.value[index].refresh = false
    }, 200)
}

const handlePayResult = async () => {
    payState.showPay = false
    payState.showCheck = false
    uni.redirectTo({
        url: `/pages/order/index?type=0`
    })
}
function ttpay() {
    tt.pay({
        orderInfo: {
            order_id: '7250080430677068044', //tempRes.data.order_id,
            order_token:
                'CgwIARDPKBjKMCABKAESTgpMf3uefNXACMN+Mh5dVTIFtTUqnn7HSyZgvvY00RXFonyyEsYqDnKtlyzuOSmzIcqDqCakGo00VSVuaqElEs4DMsCxomsDzrSXfbB+VhoA.W' ||
                tempRes.data.order_token
        },
        service: 5,
        success(res) {
            // payResult = res
            console.log('收到成功回调啦', res)
            if (res.code === 0) {
                console.log('支付成功啦～～')
            }
        },
        fail(res) {
            // payResult = res
            console.log('支付失败了', res)
        }
    })
}
const refresh = () => {
    console.log('refresh')

    tabList.value[current.value].refresh = true
}
onShow(() => {
    removeStorageData('selectDate')
    uni.$on('payment', (param: any) => {
        payState.orderId = param.order_id
        payState.sn = param.sn
        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`
    })
    tabList.value[current.value].refresh = true
    setTimeout(() => {
        tabList.value[current.value].refresh = false
    }, 200)
})

onLoad(async (options: { type?: any }) => {
    console.log('options', options)

    current.value = options?.type * 1 || 0
    orderStatus.value = options?.type - 1 < 0 ? '' : options?.type - 1
    if (!Object.keys(options).length) {
        // debugger
        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'])
})
provide('Order', {
    refresh
})
</script>

<style lang="scss" scoped>
// 参考 bundle\pages\service_order\index.vue 修正tabBar拉动后消失的问题
.container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
}

.main {
    flex: 1;
    min-height: 0;
    overflow: scroll;

    swiper {
        height: 100%;
    }
}

.orderList {
    height: calc(100vh - 86px - env(safe-area-inset-bottom));
    //background: #f5f5f5;
}
</style>
