<template>
    <w-page-common>
        <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.repairStep)"
                            >
                                更新
                            </text>
                        </view>
                    </template>
                    <template #desc>
                        <view class="desc">
                            <view class="top">
                                <view class="user">
                                    <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"
                                    :style="wrapperStyle(item, 'inner')"
                                    v-if="showType(item)"
                                >
                                    <view class="order-value" v-if="formData.scrapOrNot == 0">
                                        <view class="result-label">
                                            <text>报废</text>
                                        </view>
                                        <view class="status">{{ scrapText }}</view>
                                    </view>
                                    <view
                                        class="order-value"
                                        v-else-if="
                                            formData.sparePartList?.length > 0 &&
                                            item.repairStep === RepairStepEnum.FAULTCHECK
                                        "
                                    >
                                        <view class="result-label">
                                            <text>配件领用</text>
                                            <!-- 客户不能看配件明细 -->
                                            <text
                                                class="operate"
                                                @click="popup.showPopup()"
                                                v-if="pageSource == '1'"
                                            >
                                                查看明细
                                            </text>
                                        </view>
                                        <view class="status">{{ auditStatusText }}</view>
                                    </view>
                                    <view
                                        class="order-value"
                                        v-if="formData.cancelCause?.length > 0"
                                    >
                                        <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>
                                <!-- 功能测试 -->
                                <view
                                    class="custom"
                                    :style="wrapperStyle(item, 'inner')"
                                    v-if="showStatus(item)"
                                >
                                    <view class="order-value">
                                        <view class="result-label" :style="colorStyle(item)">
                                            {{ agreeMap[item.auditStatus] }}
                                        </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="formData.sparePartList" />
    </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'

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

interface StepItem {
    remark: string
    img: string
    creatorName: string
    createTime: string
    title: string
    auditStatus: number
    repairStep: number
}

const popup = ref()
const stepList = ref<StepItem[]>([])
const showRemark = computed(() => (remark: string | null | undefined) => remark?.length > 0)
const showImages = computed(() => (images: string) => images?.length > 0)
const showType = computed(
    () => item => item?.repairStep == RepairStepEnum.FAULTCHECK || item.auditStatus !== 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 featureNopass = stepList.value.find(
        item => item.repairStep == RepairStepEnum.FEATURE && item.auditStatus == YesOrNoEnum.NO
    )
    const agingNopass = stepList.value.find(
        item => item.repairStep == RepairStepEnum.AGING && item.auditStatus == YesOrNoEnum.NO
    )
    return featureNopass || agingNopass
})

// const wrapperStyle = computed(() => (item: any, text: string) => {
//     const { remark, img } = item
//     let style = {}
//     // 图片必填
//     if (text === 'outer') {
//         style = {
//             background:
//                 showImages.value(img) || showRemark.value(remark) ? '#fafafe' : 'transparent',
//             marginTop: showImages.value(img) || showRemark.value(remark) ? '24rpx' : '0',
//             padding: showImages.value(img) || showRemark.value(remark) ? '24rpx' : '24rpx 0 0'
//         }
//     } else if (text === 'inner') {
//         style = {
//             background: showImages.value(img) ? '#fff' : '#fafafe',
//             marginTop: showType.value(item) || showStatus.value(item) ? '0' : '24rpx'
//         }
//     }

//     return style
// })

const wrapperStyle = computed(() => (item: any, text: string) => {
    const { remark, img } = item
    const style = {}

    return style
})

const colorStyle = computed(() => (item: any) => {
    const { auditStatus } = item
    return {
        color: auditStatus === YesOrNoEnum.YES ? '#46b97b' : '#F5222D'
    }
})

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

const updateStepData = (step: number) => {
    uni.navigateTo({
        url: `/bundle/pages/repair/step-common?step=${step}&id=${props.formData.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];
        .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 px-[24rpx] text-[28rpx] rounded-[12rpx];
            background-color: $white-1;

            .order-value {
                @apply flex items-center;
                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>
