<!--
 * @Author: micky
 * @Date: 2024-10-06 10:23:22
 * @LastEditors: micky
 * @LastEditTime: 2024-10-08 20:36:14
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\charge\components\module-item.vue
-->
<template>
    <view class="module-wrapper">
        <template v-if="itemList.length > 0">
            <view class="item-wrapper" v-for="(item, index) in itemList" :key="index">
                <view class="item">
                    <view>模块代码</view>
                    <view class="flex-1">{{ item.moduleCode }}</view>
                    <u-icon name="close-circle" size="20" @click="delItem(index)"></u-icon>
                </view>
                <view class="item">
                    <view>型号</view>
                    <u-input
                        placeholder="请输入型号"
                        class="flex-1 input"
                        v-model="item.moduleNumber"
                    >
                        <template #suffix>
                            <u-copy :content="item.moduleNumber">
                                <TIcon name="icon-fuzhi_o" :size="24" color="#7C7E82" />
                            </u-copy>
                        </template>
                    </u-input>
                </view>
                <view class="item">
                    <view>功率</view>
                    <view class="flex-1" @click="choosePower(index)">
                        <u-input
                            placeholder="请选择功率"
                            class="w-full input"
                            readonly
                            v-model="item.powerName"
                        >
                            <template #suffix>
                                <u-icon name="arrow-down" :size="18" color="#7C7E82" />
                            </template>
                        </u-input>
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="h-[300px] flex items-center justify-center"><u-empty /></view>
        </template>
        <u-picker
            :show="show"
            :columns="[dictData.modulePower]"
            @confirm="confirm"
            keyName="name"
            @cancel="show = false"
            :closeOnClickOverlay="true"
            @close="show = false"
        ></u-picker>
    </view>
</template>

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

const emits = defineEmits(['update:modelValue'])
const itemList = ref<AddModuleItem[]>([])
const { show, handleToggle } = useToggle()
const activeIndex = ref(0)
const { dictData }: { dictData: any } = useDictData(['modulePower'])

// 添加项
const addItem = (val: string) => {
    // 不能重复录入模块码
    const index = itemList.value.findIndex(item => item.moduleCode == val)
    if (index == -1) {
        itemList.value.unshift({
            moduleCode: val,
            moduleNumber: '',
            powerName: '',
            modulePower: ''
        })
    } else {
        uni.$u.toast('不能重复录入模块码')
    }
}
// 删除项
const delItem = (ind: number) => {
    itemList.value.splice(ind, 1)
}

const setItem = (val: any) => {
    itemList.value = val
}
// 显示功率选择框
const choosePower = (ind: number) => {
    activeIndex.value = ind
    handleToggle()
}

// 确认选择功率
const confirm = (select: any) => {
    itemList.value[unref(activeIndex)].modulePower = select.value[0].value
    itemList.value[unref(activeIndex)].powerName = select.value[0].name
    show.value = false
}

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

defineExpose({
    addItem,
    setItem
})
</script>
<style scoped lang="scss">
.module-wrapper {
    @apply bg-white;
    .item-wrapper {
        @apply px-3 py-4  border-b border-[#f1f1f1];
        &:last-child {
            @apply border-none;
        }
        .item {
            @apply flex items-center mb-2 justify-between;
            view:nth-of-type(1) {
                @apply w-[160rpx] text-gray2 mr-2;
            }
        }
    }
}
.input {
    :deep(.u-input) {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}
</style>
