<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">
            <w-top-tab
                :tabList="tabList"
                v-model="activeTab"
                @changeTab="changeTab"
                class="mb-3"
            ></w-top-tab>
            <Search v-model="formSearch" @change="changeType" />
            <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-[24rpx]"
            >
                <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">
                                    <view>工单编号：</view>
                                    <text>{{ item.orderNo }}</text>
                                </view>
                            </template>
                            <template #content>
                                <view class="order-content-wrapper" @click="toPage(item.id)">
                                    <template v-if="activeTab == WorkOrderTypeEnum.OVERHAUL">
                                        <view>
                                            <text>报修人</text>
                                            <text>{{ item.creatorName }}</text>
                                        </view>
                                        <view>
                                            <text>报修时间</text>
                                            <text>{{ item.createTime }}</text>
                                        </view>
                                        <view>
                                            <text>设备编号</text>
                                            <text>{{ item.equipmentNo }}</text>
                                        </view>
                                        <view>
                                            <text>设备名称</text>
                                            <w-overflow-tooltip
                                                class="flex-1 overflow-auto"
                                                :content="item.equipmentName"
                                            ></w-overflow-tooltip>
                                        </view>
                                        <view>
                                            <text>设备地址</text>
                                            <w-overflow-tooltip
                                                class="flex-1 overflow-auto"
                                                :content="item.detailedAddress"
                                            ></w-overflow-tooltip>
                                        </view>
                                    </template>
                                    <template v-else>
                                        <view>
                                            <text>客户名称</text>
                                            <text>{{ item.clientName }}</text>
                                        </view>
                                        <view>
                                            <text>设备编号</text>
                                            <text>{{ item.equipmentNo }}</text>
                                        </view>
                                        <view>
                                            <text>设备名称</text>
                                            <w-overflow-tooltip
                                                class="flex-1 overflow-auto"
                                                :content="item.equipmentName"
                                            ></w-overflow-tooltip>
                                        </view>
                                        <view>
                                            <text>设备地址</text>
                                            <w-overflow-tooltip
                                                class="flex-1 overflow-auto"
                                                :content="item.detailedAddress"
                                            ></w-overflow-tooltip>
                                        </view>
                                        <view>
                                            <text>创建时间</text>
                                            <text>{{ item.createTime }}</text>
                                        </view>
                                    </template>
                                    <view>
                                        <text>距离</text>
                                        <w-overflow-tooltip
                                            class="flex-1 overflow-auto"
                                            :content="item.practicalDistance"
                                        ></w-overflow-tooltip>
                                    </view>
                                </view>
                            </template>
                            <template #btns>
                                <view class="order-btns-wrapper">
                                    <u-button
                                        shape="circle"
                                        type="primary"
                                        class="w-[180rpx]"
                                        @click="handleTaking(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, unref } from 'vue'
import { optionsMap } from '@/config/options'
import Search from './search.vue'
import {
    apiInspectGrabOrder,
    apiOverhaulGrabOrder,
    apiInspectPool,
    apiOverhaulList
} from '@/api/overhaul'
import { WorkOrderTypeEnum } from '@/enums/businessEnums'
import { onShow } from '@dcloudio/uni-app'
import { useLocation } from '@/hooks/useLocation'
import { toast } from '@/utils/util'

const titleStyle = {
    'text-align': 'left',
    'font-size': '18px',
    'padding-left': '32rpx',
    'font-weight': 'bold'
}
const formSearch = ref({
    queryType: optionsMap.orderPoolSearch[0].value,
    orderStatus: 0,
    longitude: '',
    latitude: ''
})
const tabList = optionsMap.orderTypeSelect
const activeTab = ref(tabList[0].value)
const popupShow = ref(false)
const activeItem = ref({})
const dataList = ref<any>([])
const { initLocation, openLocation, checkAuthLocation } = useLocation()

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 api =
            unref(activeTab) == WorkOrderTypeEnum.OVERHAUL ? apiOverhaulList : apiInspectPool

        const res = await api(params)
        paging.value.complete(res)
    } catch (e) {
        paging.value.complete(false)
    }
    uni.hideLoading()
}

const handleTaking = val => {
    popupShow.value = true
    activeItem.value = val
}
const confirmTakeOrder = async () => {
    if (unref(activeTab) == WorkOrderTypeEnum.OVERHAUL) {
        await apiOverhaulGrabOrder({ id: unref(activeItem)?.id })
    } else {
        await apiInspectGrabOrder({ id: unref(activeItem)?.id })
    }
    toast('抢单成功')
    paging.value?.reload()
}

const toPage = id => {
    uni.navigateTo({
        url: `/bundle/pages/overhaul/pool-detail?id=${id}&type=${unref(activeTab)}`
    })
}

// 检修单、巡检单改变
const changeTab = () => {
    const api = unref(activeTab) == WorkOrderTypeEnum.OVERHAUL ? apiOverhaulList : apiInspectPool
    paging.value?.reload()
}
// 查询类型改变
const changeType = () => {
    paging.value?.reload()
}

onShow(async () => {
    initLocation()
    queryList()
})
</script>
<style scoped lang="scss">
.content-wrapper {
    @apply pb-3 relative flex-1 overflow-auto flex flex-col;
    .title-type {
        @apply px-2 mr-2 border border-primary  text-primary rounded-md h-[48rpx] leading-[48rpx];
    }
    .location-tips {
        @apply w-full h-[33px] leading-[33px] bg-white mt-[10px] flex justify-between px-3 text-sm;
    }
}
</style>
