<template>
	<view>
		<text class="section-title">企业信息</text>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">企业名称</text>
			<input v-model="subject.companyName" class="form-row__input" />
		</view>
		<region-fields :model-value="regionReg" @update:model-value="$emit('update:regionReg', $event)" />
		<view class="form-row">
			<text class="form-row__label form-row__label--req">注册详细地址</text>
			<input v-model="subject.companyDetailAddress" class="form-row__input" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">经营范围</text>
			<input v-model="subject.businessScope" class="form-row__input" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">信用代码</text>
			<input v-model="subject.creditCode" class="form-row__input" />
		</view>
		<valid-period-row
			v-model:valid-type="subject.licenseValidType"
			v-model:start="subject.licenseValidStart"
			v-model:end="subject.licenseValidEnd"
		/>

		<text class="section-title">法定代表人</text>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">法人姓名</text>
			<input v-model="subject.legalName" class="form-row__input" />
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">法人性别</text>
			<picker :range="genderLabels" :value="legalGenderIdx" @change="onLegalGender">
				<view class="form-row__picker">
					<text>{{ legalGenderIdx >= 0 ? genderLabels[legalGenderIdx] : '请选择' }}</text>
				</view>
			</picker>
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">法人出生日期</text>
			<picker mode="date" :value="subject.legalBirthDate" @change="onLegalBirthDate">
				<view class="form-row__picker">
					<text :class="{ 'form-row__placeholder': !subject.legalBirthDate }">
						{{ subject.legalBirthDate || '请选择' }}
					</text>
				</view>
			</picker>
		</view>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">法人证件号</text>
			<input v-model="subject.legalIdCardNo" class="form-row__input" />
		</view>
		<valid-period-row
			v-model:valid-type="subject.legalIdValidType"
			v-model:start="subject.legalIdValidStart"
			v-model:end="subject.legalIdValidEnd"
		/>
		<view class="form-row">
			<text class="form-row__label form-row__label--req">法人居住地址</text>
			<input v-model="subject.legalResidence" class="form-row__input" />
		</view>
		<image-upload v-model="subject.legalIdCardFront" label="法人证件正面" />
		<image-upload v-model="subject.legalIdCardBack" label="法人证件反面" />

		<text class="section-title">联系与结算</text>
		<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 class="form-row">
			<text class="form-row__label form-row__label--req">对公账号</text>
			<input v-model="subject.corpBankAccount" class="form-row__input" />
		</view>
		<image-upload v-model="subject.accountPermit" label="开户许可证" />
	</view>
</template>

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

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

defineEmits(['update:regionReg'])

const genderLabels = GENDER_OPTIONS.map((g) => g.label)
const legalGenderIdx = ref(-1)

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

function onLegalGender(e) {
  const idx = Number(e.detail.value)
  legalGenderIdx.value = idx
  props.subject.legalGender = GENDER_OPTIONS[idx]?.value || ''
}

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

<style lang="scss" scoped>
@import '@/styles/mine.scss';
.section-title {
  display: block;
  padding: 24rpx 0 8rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #2e7d32;
}
</style>
