<!--
 * @Author: micky
 * @Date: 2024-08-13 21:23:21
 * @LastEditors: micky
 * @LastEditTime: 2024-10-08 10:04:19
 * @FilePath: \chargingpile-uniapp\src\pages\repair\pool\index.vue
-->

<template>
    <TContainer class="overhaul-pool">
        <w-navbarComp title="工单池" :titleStyle="titleStyle" />
        <img src="@/static/images/bg.png" alt="" class="page-bg-img" />
        <view class="content-wrapper">
            <view class="search flex justify-between items-center px-5">
                <view class="flex">
                    <view
                        v-for="item in optionsMap.orderPoolSearch"
                        :key="item.value"
                        class="search-item"
                        :class="formSearch.queryType == item.value ? 'active' : ''"
                        @click="changeType(item.value)"
                    >
                        {{ item.label }}
                    </view>
                </view>
                <view @click="addOrder" v-if="isRepairManager">
                    <TIcon name="icon-Cooperation" :size="24" color="#457AF7" />
                </view>
            </view>
            <view class="location-tips" v-if="!checkAuthLocation">
                <text>请开启位置权限，以便为您展示附近的工单记录</text>
                <view class="text-primary flex" @click="openLocation">
                    去开启
                    <TIcon name="icon-right" color="#0E66FB"></TIcon>
                </view>
            </view>
            <z-paging
                ref="paging"
                v-model="dataList"
                @query="queryList"
                :fixed="false"
                refresher-only
                class="flex-1 overflow-auto mt-3 px-5"
            >
                <template v-show="dataList.length > 0">
                    <block v-for="(item, index) in dataList" :key="`${index} + 'unique'`">
                        <w-order-card>
                            <template #title>
                                <view class="flex items-center justify-between">
                                    <view>工单编号：{{ item.orderNo }}</view>
                                    <text
                                        class="text-warning"
                                        v-if="item.priorityId == PriorityEnum.UTGENT"
                                    >
                                        加急
                                    </text>
                                </view>
                            </template>
                            <template #content>
                                <view class="order-content-wrapper" @click="toPage(item.id)">
                                    <view>
                                        <text>创建人</text>
                                        <text>{{ item.creatorName }}</text>
                                    </view>
                                    <view>
                                        <text>创建时间</text>
                                        <text>{{ item.createTime }}</text>
                                    </view>

                                    <view>
                                        <text>是否回寄</text>
                                        <view :style="{ color: yesOrNoColor[item.returnOrNot] }">
                                            {{ yesOrNoMap[item.returnOrNot] }}
                                        </view>
                                    </view>
                                    <view>
                                        <text>故障描述</text>
                                        <text>{{ item.faultDescription }}</text>
                                    </view>
                                    <view>
                                        <text>模块代码</text>
                                        <text>{{ item.moduleNumber }}</text>
                                    </view>
                                    <view>
                                        <text>模块品牌</text>
                                        <text>{{ item.brand }}</text>
                                    </view>
                                    <view>
                                        <text>距离</text>
                                        <text>{{ item.practicalDistance }}</text>
                                    </view>
                                </view>
                            </template>
                            <template #btns>
                                <view class="order-btns-wrapper">
                                    <u-button
                                        shape="circle"
                                        type="primary"
                                        class="w-[180rpx]"
                                        @click="confirmTaking(item)"
                                    >
                                        抢单
                                    </u-button>
                                </view>
                            </template>
                        </w-order-card>
                    </block>
                </template>
                <view v-show="dataList.length === 0" class="mt-24">
                    <w-empty />
                </view>
            </z-paging>
        </view>
        <w-confirm-popup
            contentText="确认抢单吗？"
            v-model="popupShow"
            @confirm="confirmTakeOrder"
        />
    </TContainer>
</template>

<script setup lang="ts">
import { ref, watch, unref, computed } from 'vue'
import { optionsMap } from '@/config/options'
import { apiPoolList, apiRepairGrabOrder } from '@/api/repair'
import { yesOrNoMap, yesOrNoColor, PriorityEnum } from '@/enums/businessEnums'
import { onShow } from '@dcloudio/uni-app'
import { useLocation } from '@/hooks/useLocation'
import { toast } from '@/utils/util'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const { userInfo } = userStore

const titleStyle = {
    'text-align': 'left',
    'font-size': '18px',
    'padding-left': '32rpx'
}
const formSearch = ref({
    queryType: optionsMap.orderPoolSearch[0].value,
    orderStatus: 0,
    longitude: '',
    latitude: ''
})
const popupShow = ref(false)
const activeItem = ref({})
const isRepairManager = computed(() => {
    return userInfo?.roles?.find(item => item.id == 10) ? true : false
})

const dataList = ref<any>([])

const paging = ref()
const queryList = () => {
    if (checkAuthLocation) {
        uni.getLocation({
            // #ifndef APP
            type: 'gcj02',
            // #endif
            success: async res => {
                console.log('当前位置', res)
                fetchData({
                    queryType: optionsMap.orderPoolSearch[0].value,
                    orderStatus: 0,
                    longitude: res.longitude,
                    latitude: res.latitude
                })
            }
        })
    } else {
        fetchData({
            queryType: optionsMap.orderPoolSearch[0].value,
            orderStatus: 0,
            longitude: '',
            latitude: ''
        })
    }
}
/**获取列表数据 */
async function fetchData(payload: any) {
    try {
        uni.showLoading({
            title: '加载中...'
        })
        const params = {
            ...payload
        }
        const res = await apiPoolList(params)
        paging.value.complete(res)
    } catch (e) {
        paging.value.complete(false)
    }
    uni.hideLoading()
}
const { openLocation, checkAuthLocation } = useLocation()

const changeType = val => {
    formSearch.value.queryType = val
    paging?.value?.reload()
}

const confirmTaking = val => {
    popupShow.value = true
    activeItem.value = val
}
const confirmTakeOrder = async () => {
    await apiRepairGrabOrder({ id: unref(activeItem)?.id })
    toast('抢单成功')
    paging.value?.reload()
}
const addOrder = () => {
    uni.navigateTo({
        url: `/bundle/pages/scan/scan?type=4`
    })
}
const toPage = (id: string) => {
    uni.navigateTo({
        url: `/bundle/pages/repair/pool-detail?id=${id}`
    })
}

onShow(async () => {
    queryList()
})

watch(
    formSearch,
    val => {
        console.log('val', val)
    },
    {
        deep: true
    }
)
</script>
<style scoped lang="scss">
.content-wrapper {
    @apply py-3 relative flex-1 overflow-auto flex flex-col;
    .search {
        @apply relative;
        .search-item {
            @apply bg-white rounded-sm px-2 py-1 mr-2 text-lightblack;
            &.active {
                @apply bg-[#E4F1FF] text-primary;
            }
        }
    }
    .location-tips {
        @apply w-full h-[33px] leading-[33px] bg-white mt-[10px] flex justify-between px-3 text-sm;
    }
}
</style>
