<template>
    <TContainer>
        <view class="relative h-full z-10 flex flex-col">
            <w-navbarComp title="工单" />
            <view class="p-3">
                <u-input
                    class="w-full search"
                    placeholder="工单编号/客户名称"
                    v-model="searchText"
                    @change="searchChange"
                    clearable
                >
                    <template #prefix>
                        <u-icon name="search"></u-icon>
                    </template>
                </u-input>
            </view>
            <view class="order-content flex-1 mt-3 px-2 overflow-auto bg-[#FAFAFE]">
                <z-paging
                    ref="paging"
                    v-model="dataList"
                    @query="queryList"
                    :fixed="false"
                    height="100%"
                >
                    <block v-for="(item, index) in dataList" :key="`${index} + 'unique'`">
                        <w-order-card>
                            <template #title>
                                <view class="flex justify-between relative">
                                    <view>工单编号：{{ item.orderNo }}</view>
                                </view>
                            </template>
                            <template #content>
                                <view class="order-content-wrapper">
                                    <view>
                                        <text>客户名称</text>
                                        <text>{{ item.clientName }}</text>
                                    </view>
                                    <view>
                                        <text>创建时间</text>
                                        <text>{{ item.createTime }}</text>
                                    </view>
                                    <view
                                        class="modulelist-wrapper"
                                        @click="item.toggle = !item.toggle"
                                    >
                                        <view class="title">
                                            <view>
                                                模块列表（共
                                                <text class="!text-error font-bold !w-fit">
                                                    {{ item.repairOrdersList.length }}
                                                </text>
                                                台）
                                            </view>
                                            <u-icon
                                                :name="!item.toggle ? 'arrow-down' : 'arrow-up'"
                                                :size="16"
                                                color="#7C7E82"
                                            />
                                        </view>
                                        <view class="list" v-show="item.toggle">
                                            <view
                                                v-for="(list, index) in item.repairOrdersList"
                                                :key="index"
                                                class="item"
                                                @click.stop="toPage(list.id)"
                                            >
                                                <view class="mb-2">
                                                    <text>模块代码</text>
                                                    <text>{{ list.moduleCode }}</text>
                                                </view>
                                                <view class="mb-2">
                                                    <text>型号</text>
                                                    <text>{{ list.moduleNumber }}</text>
                                                </view>
                                                <view class="mb-2">
                                                    <text>功率</text>
                                                    <text>
                                                        {{ parseModulePower(list.modulePower) }}
                                                    </text>
                                                </view>
                                                <view class="mb-2">
                                                    <text>状态</text>
                                                    <text
                                                        :style="{
                                                            color: repairOrderColor[
                                                                list.orderStatus
                                                            ]
                                                        }"
                                                    >
                                                        {{ repairOrderStatusMap[list.orderStatus] }}
                                                    </text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </w-order-card>
                    </block>
                    <template #empty>
                        <w-empty />
                    </template>
                </z-paging>
            </view>
            <view class="px-[32rpx] py-[20rpx] bg-white flex justify-between">
                <u-button type="primary" shape="circle" class="create-order" @click="createOrder">
                    新建工单
                </u-button>
                <u-button
                    type="primary"
                    shape="circle"
                    class="create-order gray-btn"
                    @click="scanCheck"
                >
                    扫码核对
                </u-button>
            </view>
        </view>
        <img src="@/static/images/bg.png" alt="" class="page-bg-img" />
    </TContainer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { apiRepairList } from '@/api/repair'
import { useZPaging } from '@/hooks/useZPaging'
import { debounce } from 'lodash-es'
import { onShow } from '@dcloudio/uni-app'
import { useModulePower } from '@/hooks/useLockFn'
import { repairOrderStatusMap, repairOrderColor } from '@/enums/businessEnums'

const searchText = ref('')
const dataList = ref<any>([])
const params = computed(() => {
    const payload: any = {
        likeWork: searchText.value,
        isClient: 2 //维修主管：2；维修员：1
    }
    return payload
})
const { paging, queryList, refresh } = useZPaging(params.value, apiRepairList)
const { parseModulePower } = useModulePower()

const toPage = (id: string) => {
    uni.navigateTo({
        url: `/bundle/pages/repair/order-detail?id=${id}&pageSource=2`
    })
}
// 创建工单
const createOrder = () => {
    uni.navigateTo({
        url: `/bundle/pages/charge/add-repair-order`
    })
}
// 扫码核对
const scanCheck = () => {
    uni.navigateTo({
        url: `/bundle/pages/charge/info-check`
    })
}

const refreshPage = () => {
    refresh(params.value)
}

const searchChange = debounce(() => {
    refreshPage()
}, 300)

onShow(() => {
    refreshPage()
})
</script>
<style scoped lang="scss">
:deep(.search .u-input) {
    border-color: #0e66fb !important;
}
.create-order {
    @apply w-[48%];
    :deep(button) {
        @apply h-[40px];
    }
}
.modulelist-wrapper {
    @apply flex-col;
    .title {
        @apply bg-[#FAFAFE] h-[30px] flex items-center justify-between px-4 text-lightblack;
        :deep(.u-icon) {
            @apply w-[20px];
        }
    }
    .list {
        @apply px-4;
        .item {
            @apply border-b border-[#f1f1f1] pt-2;
            &:last-child {
                @apply border-none;
            }
        }
    }
}
</style>
