<template>
	<div class="container">
		<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
		<div v-if="showForm">
			<policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>

			<template v-if="dataForm">
				<div class="cell-group">
					<div class="table-header">
						<div class="normal-header">
							<div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
							<div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
						</div>
					</div>
					<div class="table-content" :class="{hide : !insuranceForm.f1}">
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div>
								<div class="label">{{dataForm.productName}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
								<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div>
							</div>
						</div>
						<div class="separator-h"></div>
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
								<div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div>
								<div class="label">{{dataForm.insuredPeriod}}</div>
							</div>
						</div>
						<div class="separator-h"></div>
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n5')}}<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.insuredNameCn}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n6')}}<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.insuredNameEn}}</div>
							</div>
						</div>
						<div class="separator-h"></div>
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
								<div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t2n8')}}<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.insuredIdNumber}}</div>
							</div>
						</div>

					</div>
				</div>

				<div class="cell-group">
					<div class="table-header">
						<div class="normal-header">
							<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
							<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
						</div>
					</div>
					<div class="table-content" :class="{hide : !insuranceForm.f2}">
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n1')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.clientNameCn}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n2')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.clientNameEn}}</div>
							</div>
						</div>
						<div class="separator-h"></div>
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n3')}}</div>
								<div class="label">{{dataForm.clientBirthday?dataForm.clientBirthday.split(" ")[0]:""}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n4')}}<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.clientIdNumber}}</div>
							</div>
						</div>
						<div class="separator-h"></div>
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n5')}}<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label"> {{dataForm.clientContactAddress}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n6')}}<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label"> {{dataForm.clientLivingAddress}}</div>
							</div>
						</div>
						<div class="separator-h"></div>
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n7')}}<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.clientMobileNo}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t3n8')}}<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span></div>
								<div class="label">{{dataForm.clientEmail}}</div>
							</div>
						</div>

					</div>
				</div>

				<div class="cell-group cell-between">
					<div class="table-header">
						<div class="normal-header">
							<div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
							<div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
						</div>
					</div>
					<div class="table-content" :class="{hide : !insuranceForm.f3}">
						<div class="data-line">
							<div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
							<div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
							<div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
							<div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
						</div>
						<div class="separator-h"></div>

						<div v-for="(item,index) in dataForm.benefitList" :key="index">
							<div class="data-line">
								<div class="td w2">{{item.name}}</div>
								<div class="td w2">{{item.nameEn}}</div>
								<div class="td w2">{{item.benefitType}}</div>
								<div class="td w2">{{item.benefitRate}}</div>
							</div>
							<div class="separator-h" v-if="index < dataForm.benefitList.length - 1"></div>
						</div>
					</div>
				</div>

				<div class="cell-group">
					<div class="table-header">
						<div class="normal-header">
							<div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
							<div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
						</div>
					</div>
					<div class="table-content" :class="{hide : !insuranceForm.f4}">
						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
								<div class="label">{{dataForm.payPeriod}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
								<div class="label">{{dataForm.payType}}</div>
							</div>
						</div>
						<div class="separator-h"></div>

						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
								<div class="label">{{dataForm.moneyName}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
								<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.premium)}}</div>
							</div>
						</div>
						<div class="separator-h"></div>

						<div class="data-line">
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
								<div class="label">{{dataForm.bankName}}</div>
							</div>
							<div class="separator-v"></div>
							<div class="cell1">
								<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
								<div class="label">{{dataForm.bankAccount}}</div>
							</div>
						</div>
						<div class="separator-h"></div>
					</div>
				</div>

				<div class="cell-group cell-between">
					<div class="table-header">
						<div class="normal-header">
							<div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
							<div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
						</div>
					</div>
					<div class="table-content" :class="{hide : !insuranceForm.f5}">
						<div class="data-line">
							<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
							<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
							<div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
							<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
						</div>
						<div class="separator-h"></div>
						<div v-for="(item,index) in dataForm.pandupList" :key="index">
							<div class="data-line">
								<div class="td w2">{{item.paidPeriod}}</div>
								<div class="td w2">{{item.payType}}</div>
								<div class="td w2">{{item.receiptDate?item.receiptDate.split(" ")[0]:""}}</div>
								<div class="td w2">{{dataForm.moneyMark}} {{formatMoney(item.totalPremium)}}</div>
							</div>
							<div class="separator-h" v-if="index < dataForm.pandupList.length - 1"></div>
						</div>
					</div>
				</div>
			</template>

			<template v-else>
			</template>
		</div>
	</div>
</template>


<script src="./insurance-query.js"></script>
<style lang="scss" scoped>
@import "./insurance-query.scss";
</style>