<!--
 * @Author: micky
 * @Date: 2024-10-07 16:23:24
 * @LastEditors: micky
 * @LastEditTime: 2024-11-22 17:27:26
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\step\step-check-repair.vue
-->
<template>
    <view class="c-input-field-item">
        <view class="label">需更换配件</view>
        <view class="flex items-center" @click="choose">
            <u-icon name="plus-circle" color="#7C7E82" size="48rpx"></u-icon>
        </view>
    </view>
    <block v-if="formData.sparePartParams.length > 0">
        <view
            v-for="(item, index) in formData.sparePartParams"
            :key="index"
            class="py-3 border-b border-[#F9F9F9]"
        >
            <view class="flex justify-between">
                <text>{{ item.sparePartsName }}</text>
                <view class="flex items-center">
                    <text class="text-primary text-base" @click="removeSpareParts(index)">
                        移除
                    </text>
                </view>
            </view>
            <view class="flex justify-between mt-2 items-center">
                <text class="text-sm text-gray2">型号规格：{{ item.specificationsModel }}</text>
                <u-number-box
                    :min="1"
                    :max="item.quantity"
                    integer
                    bgColor="transparent"
                    v-model="item.count"
                ></u-number-box>
            </view>
        </view>
    </block>
    <block v-else>
        <u-empty :iconSize="70" text="暂无选择的配件" class="my-3" />
    </block>
    <view class="mt-3">
        <TTextareaField
            v-model="formData.remark"
            placeholder="请输入备注信息，最多255字"
            :remarkStyle="{ padding: 0 }"
        ></TTextareaField>
    </view>
</template>

<script setup lang="ts">
import { unref, ref, watch } from 'vue'
import { toast, navigateTo } from '@/utils/util'
import { onLoad } from '@dcloudio/uni-app'
import { apiCommonStep } from '@/api/repair'
import { RepairStepEnum, CheckResultEnum } from '@/enums/businessEnums'

const props = defineProps<{
    id: string
    detail: RepairItem
    clientId: string
}>()

interface Form {
    sparePartParams: MaterialItem[]
    remark: string
}

const formData = ref<Form>({
    sparePartParams: [],
    remark: ''
})

// 选择配件
const choose = () => {
    const selectedItem = encodeURIComponent(JSON.stringify(formData.value.sparePartParams))
    uni.navigateTo({
        url: `/bundle/pages/spareParts/spareParts-list?selectedItem=${selectedItem}&clientId=${props?.clientId}&warehouseType=1&orderType=1`
    })
}
const removeSpareParts = (ind: number) => {
    formData.value.sparePartParams.splice(ind, 1)
}

const submit = async () => {
    const params: any = {
        id: props.id,
        repairOrderStepRemark: formData.value.remark,
        scrapOrNot: CheckResultEnum.REPAIR,
        repairStep: props?.detail?.repairNextStep || 2
    }
    if (unref(formData).sparePartParams.length > 0) {
        params.sparePartParams = unref(formData).sparePartParams.map((item: MaterialItem) => {
            return {
                id: item?.sparePartsId ?? item.id,
                count: item?.count // 出库数量
            }
        })
    } else {
        params.sparePartParams = null
    }
    await apiCommonStep(params)
    toast('操作成功')
    setTimeout(() => {
        uni.navigateBack()
    }, 300)
}

watch(
    () => props.detail,
    val => {
        if (val && Object.keys(val).length > 0) {
            formData.value.sparePartParams = val.sparePartList
            const faultObj = val.repairOrderStepDataList.find(
                item => item.repairStep == RepairStepEnum.FAULTCHECK
            )
            if (faultObj) {
                formData.value.remark = faultObj.remark
            }
        }
    }
)

onLoad(() => {
    uni.$on('sparepartsList', function (data) {
        formData.value.sparePartParams = data
    })
})

defineExpose({
    submit
})
</script>
<style scoped lang="scss"></style>
