<template>
    <w-page-common :customStyle="{ height: '100%' }">
        <view class="order-steps">
            <u-steps direction="column" dot inactiveColor="#0E66FB">
                <u-steps-item v-for="(item, index) in stepList" :key="index">
                    <template #icon>
                        <view class="dot"></view>
                    </template>
                    <template #title>
                        <view class="title">
                            <text class="name">{{ item.title }}</text>
                            <text
                                class="update"
                                v-if="showUpdate && item.repairStep > 5"
                                @click="updateStepData(item)"
                            >
                                更新
                            </text>
                        </view>
                    </template>
                    <template #desc>
                        <view class="desc">
                            <view class="top">
                                <view class="user" v-if="item.creatorName">
                                    <view class="avatar">
                                        <image src="@/static/images/user.png" />
                                    </view>
                                    <text>{{ item.creatorName }}</text>
                                </view>
                                <view class="time">{{ item.createTime }}</view>
                            </view>
                            <view class="bottom" :style="wrapperStyle(item, 'outer')">
                                <!-- 配件领用/报废/申请改派 -->
                                <view class="custom" v-if="showType(item)">
                                    <view
                                        class="order-value"
                                        :style="wrapperStyle(item, 'inner')"
                                        v-if="
                                            item.scrapOrNot == 0 &&
                                            item.repairStep == RepairStepEnum.FAULTCHECK
                                        "
                                    >
                                        <view class="result-label">
                                            <text>排查结果：报废</text>
                                        </view>
                                    </view>
                                    <view
                                        class="order-value"
                                        :style="wrapperStyle(item, 'inner')"
                                        v-else-if="
                                            (item.scrapOrNot == 1 &&
                                                item.repairStep === RepairStepEnum.FAULTCHECK &&
                                                item.dscType != null) ||
                                            (item.repairStep === RepairStepEnum.SPAREPARTS &&
                                                item.dscType != null)
                                        "
                                    >
                                        <view class="result-label">
                                            <text>配件领用</text>
                                            <text
                                                class="operate"
                                                @click="showParts(item)"
                                                v-if="pageSource != '0' && item.repairOrderAuditId"
                                            >
                                                查看明细
                                            </text>
                                        </view>
                                        <view class="status">{{ auditStatusText }}</view>
                                    </view>
                                    <!-- 维修主管显示 -->
                                    <view
                                        class="order-value"
                                        :style="wrapperStyle(item, 'inner')"
                                        v-if="
                                            formData.cancelCause?.length > 0 &&
                                            item?.role?.includes('10')
                                        "
                                    >
                                        <view class="result-label">
                                            <text class="text-primary">申请退仓</text>
                                        </view>
                                        <view
                                            class="result-label justify-end"
                                            :style="colorStyle(item)"
                                        >
                                            {{ agreeMap[item.auditStatus] }}
                                        </view>
                                    </view>

                                    <!-- 填写维修信息 -->
                                    <view
                                        class="order-value"
                                        :style="wrapperStyle(item, 'inner')"
                                        v-if="item.dscType == 1"
                                    >
                                        <view class="result-label">
                                            <text>维修信息</text>
                                            <text class="operate" @click="showRepairDialog(item)">
                                                查看明细
                                            </text>
                                        </view>
                                    </view>
                                    <!-- 功能测试 -->
                                    <view v-if="showStatus(item)">
                                        <view
                                            class="order-value"
                                            :style="wrapperStyle(item, 'inner')"
                                        >
                                            <view class="result-label" :style="colorStyle(item)">
                                                {{ agreeMap[item.auditStatus] }}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view
                                    class="custom"
                                    v-if="
                                        item.dscType == 2 &&
                                        formData.cancellationRequestListVo?.partsUseList?.length > 0
                                    "
                                >
                                    <!-- 退仓 -->
                                    <view class="order-value" :style="wrapperStyle(item, 'inner')">
                                        <view class="result-label">
                                            <text>更换配件</text>
                                            <text class="operate" @click="showReturnStash(item)">
                                                查看明细
                                            </text>
                                        </view>
                                    </view>
                                </view>
                                <!-- 补料申请 -->
                                <view class="custom" v-if="item.dscType == 3">
                                    <view class="order-value" :style="wrapperStyle(item, 'inner')">
                                        <view class="result-label">
                                            <text>配件领用</text>
                                            <text
                                                class="operate text-[#0e66fb]"
                                                @click="showParts(item)"
                                                v-if="pageSource != '0'"
                                            >
                                                查看明细
                                            </text>
                                        </view>
                                    </view>
                                </view>
                                <view class="collection">
                                    <view class="remark" v-if="showRemark(item.remark)">
                                        {{ item.remark }}
                                    </view>
                                    <view class="pictures" v-if="showImages(item.img)">
                                        <u-image
                                            class="image"
                                            :src="i"
                                            width="60"
                                            height="60"
                                            radius="4"
                                            :key="index"
                                            v-for="(i, index) in item.img?.split(',')"
                                            @click="previewImage(item.img, index)"
                                        />
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                </u-steps-item>
            </u-steps>
        </view>
        <SparePartsPopup ref="popup" :sparePartList="sparePartsList" />
        <repairInfoPopup ref="repairPopup" :repairList="repairLists" />
        <returnStashPopup ref="returnPopup" :repairList="returnStashList" />
    </w-page-common>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { RepairStepEnum, agreeMap, YesOrNoEnum, receiveFlowMap } from '@/enums/businessEnums'
import SparePartsPopup from './spareParts-popup.vue'
import repairInfoPopup from './repair-info-popup.vue'
import returnStashPopup from './repair-info-popup.vue'
import { apiRepairPartsList, apiRepairPartsUseList } from '@/api/repair'

const props = defineProps<{
    formData: RepairItem
    pageSource: string
}>()

interface StepItem {
    remark: string
    img: string
    creatorName: string
    createTime: string
    title: string
    auditStatus: number
    repairStep: number
    role: string[]
    dscType: number
    repairOrderAuditId: number
    scrapOrNot: number
}

const popup = ref()
const repairPopup = ref()
const returnPopup = ref()
const stepList = ref<StepItem[]>([])
// 申请的配件列表
const sparePartsList = ref([])
// 退仓使用配件
const returnStashList = ref([])
// 维修使用配件
const repairLists = ref([])

const showRemark = computed(() => (remark: string | null | undefined) => remark?.length > 0)
const showImages = computed(() => (images: string) => images?.length > 0)

const isInclude = (step: RepairStepEnum) => {
    const enums = [
        RepairStepEnum.FAULTCHECK,
        RepairStepEnum.SPAREPARTS,
        RepairStepEnum.FEATURE,
        RepairStepEnum.AGING,
        RepairStepEnum.FILLIN
    ]
    return enums.includes(step)
}
const showType = computed(
    () => item => isInclude(item.repairStep) || (item.auditStatus !== null && item?.role !== null)
)
const showStatus = computed(
    () => item =>
        item?.repairStep == RepairStepEnum.FEATURE || item?.repairStep == RepairStepEnum.AGING
)
const auditStatusText = computed(() => {
    const field = props?.formData?.sparePartStockAudit?.receiveStatus
    return receiveFlowMap[field]
})
// const scrapText = computed(() => {
//     const field = props?.formData?.scrapConfirmation
//     return field == YesOrNoEnum.YES ? '客户已确认' : '等待客户确认'
// })
// 功能测试或老化测试不通过
const showUpdate = computed(() => {
    const { repairStep, auditStatus } = stepList.value[0]
    const featureNopass = repairStep == RepairStepEnum.FEATURE && auditStatus == YesOrNoEnum.NO
    const agingNopass = repairStep == RepairStepEnum.AGING && auditStatus == YesOrNoEnum.NO
    return featureNopass || agingNopass
})

const wrapperStyle = computed(() => (item: any, type = 'outer') => {
    const { remark, img, auditStatus, repairStep } = item
    let style = {}
    if (type == 'outer') {
        if (repairStep !== null) {
            if (img !== null && auditStatus == null) {
                style = {
                    background: '#fafafe'
                }
            } else if (!img) {
                style = {
                    background: '#fff',
                    padding: 0,
                    margin: 0
                }
            }
        } else if (repairStep == null && auditStatus !== null && remark == null) {
            style = {
                background: '#fafafe',
                padding: 0,
                maxHeight: '72rpx'
            }
        } else if (repairStep == null && auditStatus == null) {
            style = {
                background: '#fff',
                padding: 0,
                margin: 0
            }
        }
    } else {
        style.background = img ? '#fff' : '#fafafe'
    }

    return style
})

const colorStyle = computed(() => (item: any) => {
    const { auditStatus } = item
    return {
        color: auditStatus === YesOrNoEnum.YES ? '#46b97b' : '#F5222D'
    }
})
// 展示领用配件
const showParts = async (item: any) => {
    const res = await apiRepairPartsList({
        id: item.repairOrderId,
        repairOrderAuditId: item.repairOrderAuditId
    })
    sparePartsList.value = res
    popup.value?.showPopup()
}
// 展示退仓使用配件
const showReturnStash = async (item: any) => {
    const res = await apiRepairPartsUseList({
        id: item.repairOrderId,
        repairOrderAuditId: item.repairOrderAuditId
    })
    returnStashList.value = res
    returnPopup.value?.showPopup()
}
// 展示维修使用配件
const showRepairDialog = async (item: any) => {
    const res = await apiRepairPartsUseList({
        id: item.repairOrderId,
        repairOrderAuditId: item.repairOrderAuditId
    })
    repairLists.value = res
    repairPopup.value?.showPopup()
}

const previewImage = (imgs: string, current: number) => {
    const imgArr = imgs?.split(',') as string[]
    uni.previewImage({
        current,
        urls: imgArr
    })
}

const updateStepData = (item: any) => {
    const { repairStep, id } = item
    if (repairStep == RepairStepEnum.DCPFC) {
        uni.navigateTo({
            url: `/bundle/pages/repair/step/step-pfc?step=${repairStep}&id=${props.formData.id}&isUpdate=true&stepId=${id}`
        })
    } else {
        uni.navigateTo({
            url: `/bundle/pages/repair/step/step-common?step=${repairStep}&id=${props.formData.id}&isUpdate=true&stepId=${id}`
        })
    }
}

watch(
    () => props.formData,
    val => {
        stepList.value = val.repairOrderStepDataList
    },
    {
        deep: true,
        immediate: true
    }
)
</script>

<style lang="scss" scoped>
.order-steps {
    padding: 24rpx 24rpx 48rpx 24rpx;
    background: $white-1;
    border-radius: 16rpx;
    .dot {
        width: 16rpx;
        height: 16rpx;
        border: 1px solid $blue-1;
        border-radius: 999px;
    }
    .title {
        @apply flex items-center;
        .name {
            @apply flex-1;
        }
        .update {
            color: $blue-1;
            font-size: 28rpx;
        }
    }
    .desc {
        @apply mt-[24rpx] pb-[48rpx] flex flex-col gap-[24rpx];
        .top {
            @apply flex items-center text-[29rpx];
            .user {
                @apply flex items-center flex-1 gap-[20rpx];
                .avatar {
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 50%;
                    background-color: $blue-2;
                    @apply flex items-center justify-center;
                    image {
                        width: 28rpx;
                        height: 28rpx;
                        object-fit: cover;
                    }
                }
            }
            .time {
                color: $gray-2;
            }
        }
        .bottom {
            @apply flex flex-col gap-[24rpx] p-[24rpx] text-[28rpx] rounded-[12rpx];
            background-color: $gray-1;
            .remark {
            }
            .pictures {
                @apply flex gap-[12rpx] p-[24rpx] pb-0 rounded-[12rpx] flex-wrap;
                background-color: $white-1;
                .image {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 8rpx;
                    margin-bottom: 24rpx;
                }
            }
        }
        .custom {
            @apply text-[28rpx] rounded-[12rpx];

            .order-value {
                @apply flex items-center rounded-[12rpx] px-[24rpx];
                // background-color: $white-1;
                min-height: 72rpx;
                .result-label {
                    color: $gray-2;
                    @apply flex flex-1 gap-[20rpx];
                    .operate {
                        color: $blue-1;
                    }
                }
                .status {
                    color: $blue-1;
                }
            }
        }
        .collection {
            @apply flex flex-col gap-[24rpx];
        }
    }
    :deep(.u-steps-item__line) {
        height: 100% !important;
    }
}
</style>
