<template>
  <picker mode="multiSelector" :value="pIndex" :range="props.Enums" @change="onChange">
    <wl-cell
      :title="props?.title"
      isLink
      :required="props?.required"
      :borderTop="props?.borderTop"
      isPlaceholder
      :value="value"
      :tip="props?.tip"
    />
  </picker>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps(['Enums', 'value', 'tip', 'title', 'required', 'borderTop'])
const emit = defineEmits(['change'])

const onChange = (e: any) => {
  emit('change', e?.detail.value)
}
const pIndex = computed(() => {
  return props.Enums.map((item: any) =>
    Object.values(item)
      .filter((item: any) => item.text === props.value)
      .map((_: any, i: number) => i)
  )
})
</script>

<style lang="scss" scoped>
.picker_value,
.picker_tip {
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  display: flex;
  align-items: center;
  height: 56rpx;
  padding: 15rpx 0;
}

.picker_tip {
  color: #999999;
}
</style>
