<!--
 * @Author: micky
 * @Date: 2024-09-05 14:51:52
 * @LastEditors: micky
 * @LastEditTime: 2024-09-07 17:59:46
 * @FilePath: \chargingpile-uniapp\src\pages\overhaul\task\overhaul-card.vue
-->
<template>
    <w-order-card>
        <template #title>
            <view class="flex justify-between">
                <view @click="toDetail(item)">工单编号：{{ item.orderNo }}</view>
                <view v-if="!activeStatus" :style="{ color: workOrderColor[item.orderStatus] }">
                    {{ workOrderStatusMap[item.orderStatus] }}
                </view>
                <view
                    v-else-if="item.orderStatus == WorkOrderStatusEnum.SENDBACK"
                    class="text-error"
                >
                    已退回
                </view>
            </view>
        </template>
        <template #content>
            <view class="order-content-wrapper" @click="toDetail(item)">
                <view>
                    <text>客户名称</text>
                    <text>{{ item.clientName }}</text>
                </view>
                <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>
                    <text>{{ item.equipmentName }}</text>
                </view>
                <view>
                    <text>设备地址</text>
                    <text>{{ item.detailedAddress }}</text>
                </view>
                <template v-if="item.orderStatus == WorkOrderStatusEnum.RETURNEDORDER">
                    <view>
                        <text>退单时间</text>
                        <text>{{ item.cancelOrderTime }}</text>
                    </view>
                    <view>
                        <text>退单原因</text>
                        <w-overflow-tooltip
                            class="flex-1 overflow-auto"
                            :content="item.cancelCause"
                        ></w-overflow-tooltip>
                    </view>
                </template>
                <view v-if="item.orderStatus == WorkOrderStatusEnum.SENDBACK">
                    <text>退回原因</text>
                    <text>{{ item.returnCause }}</text>
                </view>
                <view
                    v-else-if="
                        item.orderStatus != WorkOrderStatusEnum.COMPLETE && item.receiverTime
                    "
                >
                    <text>接单时间</text>
                    <text>{{ item.receiverTime }}</text>
                </view>
                <view v-else-if="item.orderStatus == WorkOrderStatusEnum.TOBECOMFIRMED">
                    <text>报价时间</text>
                    <text>{{ item.quotationTime }}</text>
                </view>
                <template v-if="item.orderStatus == WorkOrderStatusEnum.COMPLETE">
                    <view>
                        <text>是否维修</text>
                        <text :style="{ color: yesOrNoColor[item.isMaintain] }">
                            {{ parseMaintainText(item.isMaintain) }}
                        </text>
                    </view>
                    <view>
                        <text>完成时间</text>
                        <text>
                            {{ item.orderAccomplishTime }}
                        </text>
                    </view>
                </template>
            </view>
        </template>
        <template #btns>
            <CardBtn :item="item" @refresh="refresh" pageSource="1" pageType="card" />
        </template>
    </w-order-card>
</template>

<script setup lang="ts">
import {
    WorkOrderStatusEnum,
    workOrderColor,
    workOrderStatusMap,
    yesOrNoColor,
    yesOrNoMap
} from '@/enums/businessEnums'
import CardBtn from '@/components/order-button/overhaul-btn.vue'
import { computed } from 'vue'

defineProps<{
    item: OverhaulItem
    activeStatus: number
}>()

const emit = defineEmits(['refresh'])

const toDetail = (row: OverhaulItem) => {
    uni.navigateTo({
        url: `/bundle/pages/overhaul/order-detail?id=${row.id}`
    })
}

const refresh = () => {
    emit('refresh')
}
const parseMaintainText = computed(() => val => {
    return val !== null ? yesOrNoMap[val] : '--'
})
</script>
<style scoped lang="scss"></style>
