<template>
    <view>
        <view
            v-for="item in positionList"
            :key="item.id"
            class="cell p-[24rpx] border-b border-solid border-[#f1f1f1]"
            :class="{ active: postId == item.id }"
            @click="handleCellClick(item)"
        >
            <text>{{ item.label }}</text>
            <template v-if="postId == item.id">
                <TIcon name="icon-check" color="#0E66FB" />
            </template>
        </view>
        <dropdownFooter @reset="handleReset" @confirm="handleConfirm" />
    </view>
</template>

<script setup lang="ts">
import { usePositions } from '@/hooks/useCommon'
import dropdownFooter from '../../dropdown-footer.vue'

defineProps({
    modelValue: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['update:modelValue', 'reset', 'confirm'])

const { positionList, postId, fetchPositions } = usePositions()
fetchPositions()

const handleCellClick = (item: any) => {
    const { id } = item
    postId.value = id
    emit('update:modelValue', id)
}
const handleReset = () => {
    postId.value = 0
    emit('update:modelValue', 0)
    emit('reset')
}
const handleConfirm = () => {
    emit('confirm', postId.value)
}
</script>
<style scoped lang="scss">
.cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.active {
        color: $blue-1;
    }
}
</style>
