<template>
    <view
        :class="pageType == 'card' ? 'order-btns-wrapper' : 'page-common-footer'"
        :style="wrapperStyle"
    >
        <template v-if="showButton">
            <u-button shape="circle" type="primary" @click="bindRepair" v-if="!item.receiverId">
                接单
            </u-button>
            <template v-else>
                <view class="flex items-center w-full min-h-[80rpx]" :style="wrapperStyle">
                    <view class="status" v-if="isShowStatus">{{ parseStatusText }}</view>
                    <view class="flex" :style="btnLayoutStyle" v-if="item.isReassignment === null">
                        <u-button
                            shape="circle"
                            type="primary"
                            :plain="true"
                            class="gray-btn"
                            @click="closeOrder"
                            v-if="
                                item.orderStatus &&
                                (item.orderStatus == RepairOrderStatusEnum.TOREPAIR ||
                                    item.orderStatus == RepairOrderStatusEnum.CHECKING)
                            "
                        >
                            申请改派
                        </u-button>
                        <u-button
                            shape="circle"
                            type="primary"
                            @click="toCommonStep(RepairStepEnum.PACKAGE)"
                            v-if="showPackage"
                        >
                            包装出货
                        </u-button>
                        <template
                            v-if="
                                item?.repairNextStep != null &&
                                activeRoleId == RoleIdEnum.REPAIR &&
                                item.scrapOrNot != YesOrNoEnum.YES
                            "
                        >
                            <u-button
                                shape="circle"
                                type="primary"
                                @click="item.func(item.params)"
                                v-for="(item, index) in btnMap[item?.repairNextStep]"
                                :key="index"
                                :class="item.className"
                            >
                                {{ item.btnText }}
                            </u-button>
                        </template>
                    </view>
                </view>
            </template>
        </template>
        <template v-if="activeRoleId == RoleIdEnum.MANAGER">
            <u-button
                shape="circle"
                type="primary"
                :plain="true"
                class="gray-btn"
                @click="dealDispatch"
                v-if="item.isReassignment == 0"
            >
                处理改派
            </u-button>
        </template>
        <template v-if="pageSource == '0'">
            <u-button
                shape="circle"
                type="primary"
                @click="scrapShow = true"
                v-if="
                    item.scrapOrNot == YesOrNoEnum.YES &&
                    item.orderStatus == RepairOrderStatusEnum.TOCONFIRM &&
                    item.scrapConfirmation != YesOrNoEnum.YES
                "
            >
                确认报废
            </u-button>
        </template>
        <w-cancel-order
            ref="cancelPopup"
            :id="props?.item?.id"
            :type="2"
            :pageSource="pageSource"
            showText="改派"
            @refresh="emits('refresh')"
        />
        <w-confirm-popup contentText="是否确认报废？" v-model="scrapShow" @confirm="confirmScrap" />
    </view>
</template>

<script setup lang="ts">
import {
    RepairStepEnum,
    RepairOrderStatusEnum,
    RoleIdEnum,
    YesOrNoEnum
} from '@/enums/businessEnums'
import { apiBind } from '@/api/repair'
import { computed, ref } from 'vue'
import { useRoleActiveId } from '@/hooks/useRoleData'
import { apiConfirmScrap } from '@/api/client'
import { toast } from '@/utils/util'

const props = defineProps<{
    item: Partial<RepairItem>
    pageType: string
    pageSource: string
}>()
const emits = defineEmits(['refresh'])
const { activeRoleId } = useRoleActiveId()
const scrapShow = ref(false)
const btnMap: any = {
    [RepairStepEnum.DISMANTLE]: [
        {
            btnText: '拆机',
            func: dismantle
        }
    ],
    [RepairStepEnum.CLEAN]: [
        {
            btnText: '开始清洗',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.FAULTCHECK]: [
        {
            btnText: '故障排查',
            func: toCheckStep,
            params: 1
        }
    ],
    [RepairStepEnum.SIGN]: [
        {
            btnText: '确认签名',
            func: signCheck
        }
    ],
    [RepairStepEnum.SPAREPARTS]: [
        {
            btnText: '重领配件',
            func: toCheckStep,
            params: 2
        }
    ],
    [RepairStepEnum.BEFOREREPAIR]: [
        {
            btnText: '上传维修前图片',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.ONREPAIRING]: [
        {
            btnText: '上传维修中图片',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.AFTERREPAIR]: [
        {
            btnText: '上传维修后图片',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.ANTIPAINT]: [
        {
            btnText: '补强三防漆',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.GLUE]: [
        {
            btnText: '补强点胶',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.DCPFC]: [
        {
            btnText: 'DC&PFC组装',
            func: toPfcStep,
            className: 'gray-btn'
        }
    ],
    [RepairStepEnum.ANTIPAINTGLUE]: [
        {
            btnText: '补强三防漆和点胶',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.MODULEASSEMBLY]: [
        {
            btnText: '模块装配',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.FEATURE]: [
        {
            btnText: '功能测试',
            func: toCommonStep,
            className: 'gray-btn'
        }
    ],
    [RepairStepEnum.AGING]: [
        {
            btnText: '老化测试',
            func: toCommonStep,
            className: 'gray-btn'
        }
    ],
    [RepairStepEnum.PACKAGE]: [
        {
            btnText: '包装出货',
            func: toCommonStep
        }
    ],
    [RepairStepEnum.FILLIN]: [
        {
            btnText: '填写回单',
            func: fillIn
        }
    ]
}
// 申请改派/维修超时/功能测试/老化测试
const statusMap = {
    isReassignment: {
        0: '已申请改派'
    }
}
const isShowStatus = computed(() => {
    const { isReassignment } = props.item
    return isReassignment == 0
})
const parseStatusText = computed(() => {
    const findContent = Object.keys(statusMap).find(
        key => statusMap[key][props.item.isReassignment]
    )
    if (findContent) {
        return statusMap[findContent][props.item[`${findContent}`]]
    }
    return ''
})
const wrapperStyle = computed(() => {
    return {
        justifyContent:
            activeRoleId.value == RoleIdEnum.REPAIR && isShowStatus.value
                ? 'space-between'
                : 'flex-end'
    }
})
const btnLayoutStyle = computed(() => {
    return {
        flex: props.pageType == 'detail' ? 1 : ''
    }
})
const showButton = computed(() => {
    return (
        activeRoleId.value == RoleIdEnum.REPAIR &&
        (props.item.isReassignment == null || props.item.isReassignment == 0)
    )
})
// 报废 & 待确认状态 & 客户确认报废
const showPackage = computed(() => {
    const { scrapOrNot, orderStatus, scrapConfirmation } = props.item
    return (
        scrapOrNot == YesOrNoEnum.YES &&
        orderStatus == RepairOrderStatusEnum.TOCONFIRM &&
        scrapConfirmation == YesOrNoEnum.YES
    )
})
const cancelPopup = ref()
// 绑定维修员
const bindRepair = async () => {
    await apiBind({
        moduleCode: props.item.moduleCode
    })
    emits('refresh')
}

// 退单
const closeOrder = () => {
    cancelPopup.value.showPopup()
}

// 客户确认报废
const confirmScrap = async () => {
    await apiConfirmScrap({
        id: props.item.id
    })
    toast('已确认报废')
    emits('refresh')
}

function dismantle() {
    uni.navigateTo({
        url: `/bundle/pages/repair/dismantle?id=${props.item?.id}`
    })
}
// 处理改派
const dealDispatch = () => {
    uni.navigateTo({
        url: `/bundle/pages/repair/confirm-dispatch?id=${props.item?.id}`
    })
}
// 确认签名
function signCheck() {
    uni.navigateTo({
        url: `/bundle/pages/repair/sign?id=${props.item?.id}`
    })
}

function toCommonStep(step: any) {
    uni.navigateTo({
        url: `/bundle/pages/repair/step-common?id=${props.item?.id}&step=${step}`
    })
}

function toCheckStep(type: number) {
    uni.navigateTo({
        url: `/bundle/pages/repair/step-check?id=${props.item?.id}&type=${type}`
    })
}

// DC&PFC组装
function toPfcStep() {
    uni.navigateTo({
        url: `/bundle/pages/repair/step-pfc?id=${props.item?.id}`
    })
}

// 填写回单
function fillIn() {
    uni.navigateTo({
        url: `/bundle/pages/repair/fill-receipt?id=${props.item?.id}`
    })
}
</script>
<style scoped lang="scss">
:deep(button) {
    padding: 10rpx 20rpx;
}
.status {
    font-size: 28rpx;
    color: $red-1;
}
</style>
