<!--
 * @Author: micky
 * @Date: 2024-08-16 16:07:29
 * @LastEditors: micky
 * @LastEditTime: 2024-09-03 22:06:53
 * @FilePath: \chargingpile-uniapp\src\components\staff-status-popup.vue
-->
<template>
    <u-popup :show="visible" :closeOnClickOverlay="true" @close="emit('close')">
        <view class="wrapper">
            <view class="list">
                <view
                    v-for="item in statusList"
                    :key="item.value"
                    @click="handleActiveStatus(item.value)"
                >
                    <text :class="{ active: item.value === activeStatus }">{{ item.label }}</text>
                </view>
            </view>
            <TFooterBtn text="确定" @handle-btn-click="handleConfirm" />
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref, watch, unref } from 'vue'
import { optionsMap } from '@/config/options'
import { apiUpdateReceiveStatus } from '@/api/user'
import { useUserStore } from '@/stores/user'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    modelValue: {
        type: Number,
        default: 1
    }
})
const userStore = useUserStore()
const { userInfo } = userStore

const emit = defineEmits(['update:modelValue', 'close'])
const activeStatus = ref(props.modelValue)
const visible = ref(false)
const statusList = optionsMap.receiveOrderStatusOptions

const handleActiveStatus = (val: number) => {
    activeStatus.value = val
}
const handleConfirm = async () => {
    visible.value = false
    await apiUpdateReceiveStatus({
        id: userInfo.id,
        receiveOrderStatus: unref(activeStatus)
    })
    userStore.getUser()
    emit('close')
    emit('update:modelValue', unref(activeStatus))
}

watch(
    () => props.show,
    (newVal: boolean) => {
        visible.value = newVal
    }
)
</script>
<style lang="scss" scoped>
.wrapper {
    @include flex-direction;
    .list {
        flex: 1;
        overflow: auto;
        > view {
            @include flex-center;
            height: 100rpx;
            line-height: 100rpx;
            border-bottom: 1px solid $gray-3;
            &:last-child {
                border-bottom: none;
            }
            .active {
                color: $blue-1;
            }
        }
    }
}
</style>
