<template>
  <view class="form-row">
    <view class="form-row__label">
      {{ name }}<text v-if="required" class="form-cell-required">*</text>
    </view>
    <view class="form-row__content content">
      <input
        :disabled="disableChange"
        :value="value"
        class="input"
        type="number"
        :maxlength="11"
        :placeholder="placeholder"
        placeholder-class="form__placeholder"
        @input="onInput"
      />
      <picker mode="selector" :disabled="disableChange" :range="relationRange" @change="onPick">
        <view class="relation" :class="noteValue ? '' : 'form__placeholder'">
          {{ noteValue || '请选择' }}
          <uni-icons class="arrow" type="arrowdown" size="16" color="#999" />
        </view>
      </picker>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const emits = defineEmits(['change']);
const props = defineProps({
  form: { type: Object, default: () => ({}) },
  name: { default: '' },
  required: { type: Boolean, default: false },
  title: { default: '' },
  disableChange: { type: Boolean, default: false },
});

const placeholder = computed(() => `请输入${props.name || ''}`);

const relationRange = ['本人', '父亲', '母亲', '配偶', '子女', '其他'];
const noteTitle = computed(() => `${props.title || ''}Note`);
const value = computed(() => {
  const v = props.form?.[props.title];
  return v === undefined || v === null ? '' : String(v);
});
const noteValue = computed(() => {
  const v = props.form?.[noteTitle.value];
  return v === undefined || v === null ? '' : String(v);
});

function onInput(e) {
  emits('change', { title: props.title, value: String(e?.detail?.value || '') });
}

function onPick(e) {
  const idx = Number(e?.detail?.value || 0);
  emits('change', { title: noteTitle.value, value: relationRange[idx] || '' });
}
</script>

<style lang="scss" scoped>
@import '../cell-style.css';

.content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16rpx;
}

.input {
  flex: 1;
  text-align: right;
  font-size: 30rpx;
}

.relation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rpx;
  min-width: 180rpx;
  border-left: 1px solid #eee;
  padding-left: 16rpx;
  font-size: 30rpx;
}

.arrow {
  flex-shrink: 0;
}
</style>
