<!--
 * @Author: micky
 * @Date: 2024-08-16 16:07:29
 * @LastEditors: micky
 * @LastEditTime: 2024-08-23 16:09:58
 * @FilePath: \chargingpile-uniapp\src\components\design-profile.vue
-->
<template>
    <ContractLayout title="个人中心" :left="false">
        <view class="profile">
            <w-profile-info :groupList="groupList">
                <template #status>
                    <view class="status" v-if="isShow">
                        <view class="left">
                            <text>接单状态</text>
                            <text class="value">
                                {{ receiveOrderStatusMap[activeStatus] }}
                            </text>
                        </view>
                        <view class="right">
                            <text class="btn" @click="handleToggle(false)">切换状态</text>
                        </view>
                    </view>
                </template>
            </w-profile-info>
            <tabbar />
        </view>
    </ContractLayout>
    <StaffStatusPopup :show="show" v-model="activeStatus" @close="handleToggle(true)" />
</template>

<script setup lang="ts">
import ContractLayout from '@/pages/salesman/contract/components/contract-layout.vue'
import { PropType, ref, watch } from 'vue'
import StaffStatusPopup from '@/components/staff-status-popup.vue'
import { useToggle } from '@/hooks/useLockFn'
import { useUserStore } from '@/stores/user'
import { receiveOrderStatusMap } from '@/enums/businessEnums'

const { show, handleToggle } = useToggle()
const userStore = useUserStore()
const { userInfo } = userStore
interface IGroup {
    title: string
    value: string
    isLink: boolean
    border?: boolean
    url?: string
}
defineProps({
    groupList: {
        type: Array as PropType<IGroup[]>,
        default: () => []
    },
    isShow: {
        type: Boolean,
        default: true
    }
})
const activeStatus = ref(userInfo.receiveOrderStatus)
</script>

<style lang="scss" scoped>
.status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 32rpx 0;
    padding: 24rpx 32rpx;
    background-color: $white-1;
    border-radius: 16rpx;
    .left {
        @include flex-direction;
        gap: 8rpx;
        .value {
            color: $green-1;
        }
    }
    .right {
        .btn {
            padding: 4rpx 12rpx;
            border: 1px solid $blue-1;
            color: $blue-1;
            font-size: 28rpx;
            border-radius: 8rpx;
        }
    }
}
</style>
