<template>
	<div class="container border">
		<div class="table">
			<div class="table-header orange">
				<div class="table-header-item">客戶資料變更</div>
			</div>
			<div class="gird-g form">

				<!-- 變更對象 checkbox -->
				<div class="pure-u-1 form-item form-item2">
					<div class="label">
						{{$t('policyChangeInformation.hkClient')}}
					</div>
					<div class="cont">
						<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
						<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
					</div>
				</div>

				<!-- start -->
				<!-- 1 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}}
					</div>
					<div class="ipt-wrap">
						<input class="ipt" type="text">
					</div>
				</div>

				<!-- 2 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label label2">
						<div class="fla">
							<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}}
						</div>
						<div class="fla">
							<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
							<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
							<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
						</div>
					</div>
					<div class="ipt-wrap">
						<div class="down-arrow"></div>
						<select disabled class="ipt disable">
							<option v-if="locale !='zh'">男</option>
							<option v-else>男</option>
						</select>
					</div>
				</div>

				<!-- 3 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label label2">
						<div class="fla">
							<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-date.png"></div>{{$t('policyChangeInformation.birth')}}
						</div>
						<div class="fla">
							<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
							<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
							<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
						</div>
					</div>
					<div class="ipt-wrap">
						<input disabled placeholder="1999-1-1" class="ipt disable" type="text">
					</div>
				</div>

				<!-- 4 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div>{{$t('policyChangeInformation.type')}}
					</div>
					<div class="ipt-wrap">
						<div class="down-arrow"></div>
						<select class="ipt">
							<template v-if="locale =='zh'">
								<option>身份证</option>
							</template>
							<template v-else>
								<option>身份證</option>
							</template>
						</select>
					</div>
				</div>

				<!-- 5 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
					</div>
					<div class="ipt-wrap">
						<input class="ipt" type="text">
					</div>
				</div>

				<!-- 6 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}}
					</div>
					<div class="ipt-wrap">
						<input class="ipt" type="text">
					</div>
				</div>

				<!-- 7 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}}
					</div>
					<div class="ipt-wrap">
						<input class="ipt" type="text">
					</div>
				</div>

				<!-- 8 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}}
					</div>
					<div class="ipt-wrap">
						<input class="ipt" type="text">
					</div>
				</div>

				<!-- 9 -->
				<div class="pure-u-1 pure-u-md-1-2 form-item">
					<div class="label">
						<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}}
					</div>
					<div class="ipt-wrap">
						<input class="ipt" type="text">
					</div>
				</div>

				<div class="pure-u-1 pure-u-md-1-2 form-item"></div>

			</div>

			<div class="submit-btn">
				{{$t("policyChangeInformation.submit")}}
			</div>
		</div>
	</div>
</template>

<script src="./policy-change-information.js"></script>
<style lang="scss" scoped>
@import "./policy-change-information.scss";
</style>