<template>
  <div class="filter-item">
    <van-field v-model="name" :label="props.label" :placeholder="`选择${props.label}`" is-link readonly
               @click="showPicker = true"/>
    <van-popup v-model:show="showPicker" position="bottom" round>
      <van-picker :columns="props.columns" @cancel="showPicker = false" @confirm="onConfirm"/>
    </van-popup>
  </div>
</template>
<script setup>
import {defineEmits, defineProps, ref, watch} from "vue";

const emits = defineEmits(['update:value']);

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  columns: {
    type: Array,
    default: () => [],
  },
  value: {
    type: null,
  }
})

const name = ref('');
const showPicker = ref(false);
const onConfirm = ({selectedOptions}) => {
  showPicker.value = false;
  emits('update:value', selectedOptions[0].value);
};

function getTypeName(code) {
  if (!code) return '';
  if (props.columns && props.columns.length > 0) {
    // return props.columns.find(item => item.value === code)?.text || code;
    let  foundItem = props.columns.find(function(item) { return item.value === code; });
    return (foundItem && foundItem.text) ? foundItem.text : code;
  }
  return code;
}

watch(() => props.value, (newValue) => {
  name.value = getTypeName(newValue);
}, {immediate: true})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/filter.scss';

.content-wrapper {
  padding-top: 8px;
  height: 100%;
  overflow: auto;

  .ducha-group-wrapper {
    height: calc(100% - 35px);
    overflow: auto;
  }

}
</style>
