<!--
 * @Date: 2023-03-29 14:55:46
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-07-27 19:46:08
 * @FilePath: /data-table/src/components/PickerField/MyComponent.vue
 * @Description: 文件描述
-->
<template>
  <div style="width: 100%;">
    <van-field
      v-model="picker_value"
      is-link
      readonly
      :name="props.key"
      :required="props.component_props.required"
      :placeholder="props.component_props.placeholder"
      @click="onClick"
      :border="false"
    />
    <!-- <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" /> -->
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        :columns="props.component_props.options"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCustomFieldValue } from '@vant/use';

// 获取父组件传值
const props = inject('props');
const emit = defineEmits(["active"]);

const showPicker = ref(false);
const picker_value = ref(props.component_props.default);

const onClick = () => {
  if (!props.component_props.readonly) { // 非只读状态下可以点击弹出
    showPicker.value = true;
  }
};

const onConfirm = ({ selectedOptions }) => {
  // console.warn(props);
  picker_value.value = selectedOptions[0]?.value;
  showPicker.value = false;
  // 触发点自定义监听事件，配合规则显示隐藏其他字段
  props.value = { key: props.key, value: picker_value.value, type: "picker" };
  emit("active", props.value);
  // if (add_info_key.value === props.item.value) {
  //   has_add_info.value = true;
  // }
};

// 此处传入的值会替代 Field 组件内部的 value
useCustomFieldValue(() => picker_value.value);

// 绑定值发生变化时回调，处理选项为其他时的输入项录入
// const has_add_info = ref(false); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
// const add_info = ref('');
// const add_info_name = ref(props.item.key + '#');
// const add_info_key = ref('其他'); // 以后动态获取

// onMounted(() => {
  // add_info_name.value = `${props.item.key}#${add_info_key.value}`
  // props.item.component_props.options = props.item.component_props.options.map((opt) => {
  //   return {
  //     text: opt,
  //     value: opt,
  //   };
  // });
// });
</script>

<style lang="less" scoped>

</style>