<template>
  <view class="top-member-select">
    <u-form-item
      :label="label"
      :borderBottom="borderBottom"
      :labelWidth="labelWidth"
    >
      <picker
        :range="pickerVerList"
        range-key="displayLabel"
        @change="bindPickerChange"
      >
        <u--input
          v-model="displayedValue"
          disabled
          disabledColor="#ffffff"
          suffixIcon="arrow-down"
          suffixIconStyle="font-size: 12px; color: #909399"
          readonly
        ></u--input>
      </picker>
    </u-form-item>
  </view>
</template>

<script>
  import * as api from '@/api/settle.js'; // 确保此路径在uniapp项目中有效

  export default {
    name: 'TopMemberSelect',
    props: {
      // 如果需要从父组件传入初始值，可以定义一个value prop，并结合v-model使用
      // value: {
      //   type: [String, Number],
      //   default: ''
      // },
      label: {
        type: String,
        default: '系统编号',
      },
      labelWidth: {
        type: [String, Number],
        default: 'auto',
      },
      borderBottom: {
        type: Boolean,
        default: true, // 与 u-form-item 默认行为一致，可按需调整
      },
      // model prop 暂时未直接使用，如果父组件通过 model.pkVertex 传递，需要额外处理
      // model: {
      //   type: Object,
      //   default: () => {}
      // }
    },
    data() {
      return {
        pkVertex: '', // 存储实际的 memberCode
        displayedValue: '', // 用于输入框显示的 "memberCode (memberName)"
        verList: [], // 原始API返回列表
        pickerVerList: [], // 供picker使用的列表，包含 displayLabel
      };
    },
    watch: {
      // 如果使用 v-model，可以添加watch来同步
      // value: {
      //   handler(newVal) {
      //     if (this.pkVertex !== newVal) {
      //       this.setSelectedByValue(newVal);
      //     }
      //   },
      //   immediate: true
      // }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        api
          .topVertexList()
          .then((res) => {
            this.verList = res.rows || [];
            this.pickerVerList = this.verList.map((item) => ({
              ...item,
              // picker的range-key需要一个唯一的字符串属性名
              pkVertex: item.pkVertex, // 保留原始pkVertex，如果需要
              memberCode: item.memberCode,
              memberName: item.memberName,
              displayLabel: `${item.memberCode} (${item.memberName})`,
            }));

            // 如果外部传入了初始值 (通过v-model/value prop)，则尝试设置它
            // if (this.value && this.pickerVerList.length > 0) {
            //   this.setSelectedByValue(this.value);
            // } else
            if (this.pickerVerList.length > 0) {
              // 默认选中第一个，并触发change事件
              this.pkVertex = this.pickerVerList[0].memberCode;
              this.displayedValue = this.pickerVerList[0].displayLabel;
              this.handleChange();
            } else {
              this.pkVertex = '';
              this.displayedValue = '';
              // 初始无数据也触发一次，让父组件知道
              this.handleChange();
            }
          })
          .catch((err) => {
            console.error('TopMemberSelect 获取列表失败:', err);
            this.verList = [];
            this.pickerVerList = [];
            this.pkVertex = '';
            this.displayedValue = '';
            this.handleChange();
          });
      },
      bindPickerChange(e) {
        const index = e.detail.value;
        if (this.pickerVerList && this.pickerVerList[index]) {
          const selectedItem = this.pickerVerList[index];
          this.pkVertex = selectedItem.memberCode;
          this.displayedValue = selectedItem.displayLabel;
          this.handleChange();
        }
      },
      handleChange() {
        // 如果使用 v-model, emit 'input'
        // this.$emit('input', this.pkVertex);
        this.$emit('change', this.pkVertex);
      },
      // 根据值设置选中项 (如果使用v-model/value prop)
      // setSelectedByValue(value) {
      //   const selectedItem = this.pickerVerList.find(item => item.memberCode === value);
      //   if (selectedItem) {
      //     this.pkVertex = selectedItem.memberCode;
      //     this.displayedValue = selectedItem.displayLabel;
      //   } else {
      //     // 如果值无效，则清空或设为默认
      //     this.pkVertex = '';
      //     this.displayedValue = '';
      //   }
      // },
      reset() {
        this.pkVertex = '';
        this.displayedValue = '';
        // 如果重置时希望恢复到默认第一个选项（如果列表存在）
        // if (this.pickerVerList.length > 0) {
        //   this.pkVertex = this.pickerVerList[0].memberCode;
        //   this.displayedValue = this.pickerVerList[0].displayLabel;
        // }
        this.handleChange();
      },
    },
  };
</script>

<style lang="scss" scoped>
  // 可以根据需要添加组件的特定样式
  .top-member-select {
    width: 100%;
  }
  // 确保picker内的input样式能正确应用
  // ::v-deep .u-input {
  //   padding-right: 0 !important; // 调整以适应箭头
  // }
  // ::v-deep .u-input__content__field-wrapper__field {
  //    text-align: left !important;
  // }
</style>
