<!--
 * @Author: micky
 * @Date: 2024-10-06 10:32:55
 * @LastEditors: micky
 * @LastEditTime: 2024-10-19 11:27:09
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\charge\manual-input.vue
-->
<template>
    <w-page-common
        :btnText="btnText"
        @submit="submit"
        :needPadding="false"
        :btnDisabled="dataList.length === 0"
    >
        <view class="h-full flex flex-col">
            <view class="p-4 flex">
                <u-input
                    placeholder="请输入模块条码"
                    class="code-input"
                    v-model="moduleCode"
                    border="none"
                ></u-input>
                <u-button type="primary" class="add-btn" @click="add">添加</u-button>
            </view>
            <module-item
                ref="moduleItemRef"
                v-model="dataList"
                class="flex-1 overflow-auto"
            ></module-item>
        </view>
    </w-page-common>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, unref } from 'vue'
import { toast } from '@/utils/util'
import ModuleItem from './components/module-item.vue'
import { onLoad } from '@dcloudio/uni-app'

const moduleCode = ref('')
const dataList = ref<AddModuleItem[]>([])
const btnText = computed(() => {
    return `确定录入${dataList.value.length}条数据`
})
const moduleItemRef = ref()

const add = () => {
    if (!moduleCode.value) return toast('请先输入模块条码')
    moduleItemRef.value.addItem(moduleCode.value)
    setTimeout(() => {
        moduleCode.value = ''
    })
}
const submit = () => {
    const hasEmpty = dataList.value.find(item => {
        return !item.moduleNumber || !item.modulePower
    })
    if (hasEmpty) return toast('请填写完整的信息！')
    uni.$emit('moduleList', unref(dataList))
    uni.navigateBack({
        delta: 2
    })
}

onLoad(async options => {
    if ('params' in options) {
        const data = JSON.parse(decodeURIComponent(options.params))
        await nextTick()
        moduleItemRef.value.setItem(data)
    }
})
</script>
<style scoped lang="scss">
:deep(.add-btn) {
    button {
        @apply h-[36px] px-[17px];
    }
}
:deep(.code-input) {
    @apply flex-1 mr-3 bg-white;
    .u-input {
        padding-top: 12rpx !important;
        padding-left: 10rpx !important;
    }
}
</style>
