<!--
 * @Author: micky
 * @Date: 2024-08-28 15:30:38
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 20:19:31
 * @FilePath: \chargingpile-uniapp\src\components\widgets\fault-select\fault-select.vue
-->
<template>
    <view>
        <view class="fault-type" @click="show = true">
            <text v-if="!faultTypeName" class="text-[#CCD0D7]">{{ placeholder }}</text>
            <text v-else>{{ faultTypeName }}</text>
            <u-icon name="arrow-down-fill" :size="12"></u-icon>
        </view>
        <u-picker
            :show="show"
            :columns="columns"
            @confirm="confirm"
            keyName="name"
            @cancel="show = false"
            :closeOnClickOverlay="true"
            @close="show = false"
        ></u-picker>
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { apiFault } from '@/api/app'

const props = defineProps({
    type: Number,
    modelValue: [String, Number],
    placeholder: String
})
const emits = defineEmits(['update:modelValue'])
const show = ref(false)
const faultTypeName = ref('')
const columns = ref<any>([])

const getFaultList = async () => {
    const res = await apiFault({
        faultType: props.type,
        status: 0
    })
    columns.value = [res.lists]
}

// 确认选择故障类型
const confirm = select => {
    faultTypeName.value = select.value[0].name
    show.value = false
    emits('update:modelValue', select.value[0].id)
}

watch(
    () => props.type,
    () => {
        getFaultList()
    },
    {
        immediate: true
    }
)
watch(
    () => props.modelValue,
    val => {
        columns.value[0]?.map(item => {
            if (item.id == val) faultTypeName.value = item.name
        })
    }
)
</script>
<style scoped lang="scss">
.fault-type {
    @apply flex justify-between h-[72rpx] mb-3 border border-[#F7F7FA] rounded-[6px] bg-[#FAFAFE] px-[18rpx] items-center;
}
</style>
