<template>
  <view class="form-item">
    <!-- 左侧标签 + 必填提示 -->
    <view class="label">
        <text class="PfScMedium">{{ label }}</text>
        <image  v-if="required" class="required" :src="cssUrl + 'required.svg'" />
    </view>

    <!-- 输入模式 -->
    <input
      v-if="type === 'input'"
      class="input"
      :placeholder="placeholder"
      :placeholder-class="!value ? placeholderClass : '' "
      :value="value"
      @input="handleInput"
      :disabled="disabled"
    />

    <!-- 点击选择模式（如性别、年份） -->
    <view
      v-else
      class="picker"
      @click="handleClick"
    >
      <text :class="((placeholderClass && !displayValue) ? placeholderClass : ((!displayValue ? 'placeholder ':'')))">
        {{ displayValue || placeholder }}
      </text>
      <image class="right_img"  :src="cssUrl + '/input_ex.png'" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'FormItem',
  props: {
    label: String,          // 左侧标签文本（如"姓名"）
    type: {                 // 类型：input（输入）或 picker（点击选择）
      type: String,
      default: 'input',
      validator: (val) => ['input', 'picker'].includes(val),
    },
    placeholderClass: {
      type: String,
      default: 'formItemPlaceholderStyle'
    },
    value:{
      type: [String, Number, Boolean],
      default: false
    },// 绑定的值
    placeholder: String,     // 占位文本
    required: Boolean,       // 是否必填
    disabled: Boolean,       // 是否禁用
    displayValue: {
      type: String,
      default: ''
    },    // 显示的值（用于picker模式，如性别显示"男/女"）

  },
  data(){
      return{
        cssUrl: this.cssUrl,
      }
  },
  methods: {
    handleInput(e) {
      this.$emit('input', e.detail.value);
    },
    handleClick() {
      if (!this.disabled) {
        this.$emit('click'); // 触发父组件的选择逻辑
      }
    },
  },
};
</script>

<style scoped>
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36rpx 0rpx;
  border-bottom: 1rpx solid #eee;
  min-height: 44rpx;
}
.right_img{
  width: 26rpx;
  height: 26rpx;
}

.label {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 44rpx;
  letter-spacing: 2rpx;
  color: #222222;
}

.required {
  margin-left: 8rpx;
  color: #f56c6c;
  font-size: 12px;
  width: 16rpx;
  height: 16rpx;
}
.input{
  height: 44rpx;
  flex-grow: 1;
  font-size: 32rpx;
  flex: 1;
  padding-left: 20rpx;
  color: #000000;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  text-align: right;
}

.picker {
  flex: 1;
  padding-left: 20rpx;
  color: #000000;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.picker text{
  font-size: 32rpx;
  line-height: 32rpx;
}

.placeholder {
  font-family: PingFang SC;
  font-size: 32rpx;
  font-weight: normal;
  line-height: 44rpx;
  text-align: right;
  letter-spacing: 0.24rpx;
  color: #000;
}
/deep/ .formItemPlaceholderStyle {
  font-size: 32rpx;
  color: #999999;
  line-height: 44rpx;
}
</style>