<template>
	<view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">姓名</text>
			<input v-model="subject.personName" class="form-row__input" placeholder="请输入" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">性别</text>
			<picker :range="genderLabels" :value="genderIdx" @change="onGender">
				<view class="form-row__picker">
					<text :class="{ 'form-row__placeholder': genderIdx < 0 }">
						{{ genderIdx >= 0 ? genderLabels[genderIdx] : '请选择' }}
					</text>
				</view>
			</picker>
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">出生日期</text>
			<picker mode="date" :value="subject.birthDate" :end="today" @change="onBirthDate">
				<view class="form-row__picker">
					<text :class="{ 'form-row__placeholder': !subject.birthDate }">{{ subject.birthDate || '请选择' }}</text>
				</view>
			</picker>
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">证件号码</text>
			<input v-model="subject.idCardNo" class="form-row__input" placeholder="身份证号" />
		</view>
		<valid-period-row
			v-model:valid-type="subject.idValidType"
			v-model:start="subject.idValidStart"
			v-model:end="subject.idValidEnd"
		/>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">居住地址</text>
			<input v-model="subject.residenceAddress" class="form-row__input" placeholder="详细地址" />
		</view>
		<image-upload v-model="subject.idCardFront" label="证件照正面" />
		<image-upload v-model="subject.idCardBack" label="证件照反面" />
		<view class="form-row">
			<text class="form-row__label form-row__label--req">联系人</text>
			<input v-model="subject.contactName" class="form-row__input" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">联系人手机</text>
			<input v-model="subject.contactPhone" class="form-row__input" type="number" maxlength="11" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">邮箱</text>
			<input v-model="subject.contactEmail" class="form-row__input" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">开户银行</text>
			<input v-model="subject.bankName" class="form-row__input" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">开户支行</text>
			<input v-model="subject.bankBranch" class="form-row__input" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">银行账号</text>
			<input v-model="subject.bankAccount" class="form-row__input" />
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { GENDER_OPTIONS } from '@/utils/entryConstants'
import ImageUpload from '@/components/mine/ImageUpload.vue'
import ValidPeriodRow from '@/components/mine/entry/ValidPeriodRow.vue'

const props = defineProps({
  subject: { type: Object, required: true }
})

const genderLabels = GENDER_OPTIONS.map((g) => g.label)
const genderIdx = ref(-1)
const today = computed(() => {
  const d = new Date()
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
})

watch(
  () => props.subject.gender,
  (v) => {
    genderIdx.value = GENDER_OPTIONS.findIndex((g) => g.value === v)
  },
  { immediate: true }
)

function onGender(e) {
  const idx = Number(e.detail.value)
  genderIdx.value = idx
  props.subject.gender = GENDER_OPTIONS[idx]?.value || ''
}

function onBirthDate(e) {
  props.subject.birthDate = e.detail.value
}
</script>

<style lang="scss" scoped>
@import '@/styles/mine.scss';
</style>
