<!--
 * @Author: micky
 * @Date: 2024-10-06 10:23:58
 * @LastEditors: micky
 * @LastEditTime: 2024-10-28 18:01:11
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\components\replace-parts.vue
-->
<template>
    <view class="replace-list">
        <view v-for="(item, index) in itemList" :key="index">
            <view class="title">
                <text>更换配件明细（{{ index + 1 }}）</text>
                <text class="text-primary" @click="delItem(index)">删除</text>
            </view>
            <TInputField
                v-model="item.repairMotherboard"
                label="维修主板"
                placeholder="请输入"
                :required="false"
                :fieldStyle="fieldStyle"
                :clearable="false"
            />
            <TInputField
                v-model="item.materialPositionNumber"
                label="物料位号"
                placeholder="请输入"
                :required="false"
                :fieldStyle="fieldStyle"
                :clearable="false"
            />
            <view class="design-field" :style="fieldStyle">
                <text class="field">配件名称</text>
                <view class="text-[#8f8f90] text-lg" @click="chooseSpare(index)">
                    <text v-if="item.sparePartsName">{{ item.sparePartsName }}</text>
                    <text v-else>请选择</text>
                </view>
            </view>
            <view class="design-field" :style="fieldStyle">
                <text class="field">配件编码</text>
                <view class="text-[#8f8f90] text-lg" @click="chooseSpare(index)">
                    <text v-if="item.sparePartsCode">{{ item.sparePartsCode }}</text>
                    <text v-else>请选择</text>
                </view>
            </view>
            <view class="design-field" :style="fieldStyle">
                <text class="field">型号规格</text>
                <view class="text-[#8f8f90] text-lg" @click="chooseSpare(index)">
                    <text v-if="item.specificationsModel">{{ item.specificationsModel }}</text>
                    <text v-else>请选择</text>
                </view>
            </view>
            <view class="design-field !border-none" :style="fieldStyle">
                <text class="field">使用数量</text>
                <u-number-box
                    :min="1"
                    :max="useMax(item)"
                    integer
                    bgColor="transparent"
                    v-model="item.count"
                    class="number-box"
                    @change="countChange(item)"
                ></u-number-box>
            </view>
        </view>
        <u-picker
            :show="show"
            :columns="columns"
            @confirm="confirm"
            keyName="sparePartsName"
            @cancel="show = false"
            :closeOnClickOverlay="true"
            @close="show = false"
        ></u-picker>
    </view>
</template>

<script setup lang="ts">
import { ref, watch, unref, computed, nextTick } from 'vue'
import { useToggle } from '@/hooks/useLockFn'

const props = defineProps<{
    sparepartsList: MaterialItem[]
    initialSparesList: MaterialItem[]
}>()

const emits = defineEmits(['update:modelValue', 'changeItem'])
const itemList = ref<PartsListItem[]>([])
const columns = ref<any>([])
const fieldStyle = { background: '#fafafe', padding: '24rpx 20rpx 24rpx 20rpx', color: '#3D3D3D' }
const { show, handleToggle } = useToggle()
const activeIndex = ref(0) //当前弹出框选中的配件索引
// 添加项
const addItem = item => {
    itemList.value.push({
        repairMotherboard: item?.repairMotherboard || '',
        materialPositionNumber: item?.materialPositionNumber || '',
        count: item?.useNumber || '1',
        sparePartsName: item?.sparePartsName || '',
        sparePartsId: item?.sparePartsId || '',
        specificationsModel: item?.specificationsModel || '',
        sparePartsCode: item?.sparePartsCode || ''
    })
}
// 删除项
const delItem = (ind: number) => {
    emits('changeItem', itemList.value[ind], 'del')
    itemList.value.splice(ind, 1)
}
const countChange = async item => {
    await nextTick()
    emits('changeItem', item, 'add')
}

const useMax = computed(() => item => {
    const items = itemList.value.filter(i => {
        return i.sparePartsId == item.sparePartsId && item.sparePartsId
    })

    const total = items.reduce((prev, cur) => {
        return prev + Number(cur.count)
    }, 0)

    const sampleObj = props.initialSparesList.find(obj => obj.sparePartsId == item.sparePartsId)

    let count = 0
    if (sampleObj) count = sampleObj?.count - total + Number(item.count)
    else count = 1

    return count
})

// 显示功率选择框
const chooseSpare = (ind: number) => {
    activeIndex.value = ind
    handleToggle()
}

// 确认选择配件
const confirm = select => {
    itemList.value[unref(activeIndex)].sparePartsName = select.value[0].sparePartsName
    itemList.value[unref(activeIndex)].sparePartsId = select.value[0].sparePartsId
    itemList.value[unref(activeIndex)].specificationsModel = select.value[0].specificationsModel
    itemList.value[unref(activeIndex)].sparePartsCode = select.value[0].sparePartsCode
    show.value = false
    emits('changeItem', itemList.value[unref(activeIndex)], 'add')
}

watch(
    itemList,
    val => {
        emits('update:modelValue', val)
    },
    {
        deep: true
    }
)

watch(
    () => props.sparepartsList,
    val => {
        columns.value = [val]
    },
    {
        deep: true
    }
)

defineExpose({
    addItem
})
</script>
<style scoped lang="scss">
.replace-list {
    .title {
        @apply bg-[#F2F3F7] px-3 py-2 flex justify-between text-gray2;
    }
}
.design-field {
    @apply flex justify-between;
    border-bottom: 1px solid $gray-3;
}
</style>
<style lang="scss">
.number-box {
    u-icon {
        border: 1px solid #d5d5d5;
        padding: 3px;
    }
}
</style>
