<template>
  <van-popup
    destroy-on-close
    round
    teleport="body"
    position="bottom"
    @close="onPopupClose">
    <van-picker :columns="columns"
      :cancel-button-text="searchShow ? '' : '取消'"
      @confirm="onConfirm"
      @cancel="cancel">
      <template #title>
        <!-- 搜索框 -->
        <van-search v-if="searchShow"
          v-model="searchText"
          :placeholder="placeholder"
          shape="round"
          @update:model-value="onSearch" />
      </template>
      <template #empty>
        <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="40"
          description="暂无数据" />
      </template>
    </van-picker>
  </van-popup>
</template>

<script setup>
const props = defineProps({
  // 选择器列数据
  columns: {
    type: Array,
    default: () => []
  },
  // 占位提示文字
  placeholder: {
    type: String,
    default: '请输入搜索内容'
  },
  // 搜索是否显示
  searchShow: {
    type: Boolean,
    default: true
  }
});

// 定义向外触发的事件
const emit = defineEmits(['cancel', 'confirm', 'search']);

// 搜索文本
const searchText = ref('');

// 弹窗关闭时触发
const onPopupClose = () => {
  searchText.value = '';
  emit('search', '');
};

/**
 * 选择器确认事件处理函数
 * @param values - 选中的值
 * @param indexes - 选中项的索引
 */
const onConfirm = (values) => {
  emit('confirm', values);
};

/**
 * 搜索事件处理函数
 * @param values - 搜索的值
 */
const onSearch = (values) => {
  emit('search', values);
}

/**
 * 取消事件处理函数
*/
const cancel = () => {
  emit('cancel'); 
}
</script>

<style scoped>
.van-search {
  flex: 1;
}

::v-deep(.van-picker__confirm) {
  width: 70px;
}
</style>