<template>
	<view>
		<!-- <view class="form-title redtitle">嗨粉会员信息</view> -->
		<view class="prefecture form-group mb20">
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{$t('w_0240')}}
				</view>
				<view class="disabled-input">{{ form.pkGradeVal }}</view>
			</view>
			<view class="form-item" @click="openCPop('pkCountry')">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{$t('PER_DA_3')}}
				</view>
				<view class="flex-1 d-s-c">
					<image class="queryimg mr10" mode="heightFix"
						:src="pkCountry>=0&&countryList[pkCountry] ? countryList[pkCountry].nationalFlag1 : ''"></image>
					<view class="flex-1">
						{{pkCountry>=0&&countryList[pkCountry] ? countryList[pkCountry].shortName : ''}}
					</view>
				</view>
				<text class="icon iconfont icon-jiantou"></text>
			</view>
			<!-- <view class="form-item" @click="openCPop('pkSettleCountry')"> -->
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{$t('PER_DA_4')}}
				</view>
				<view class="flex-1 d-s-c">
					<image class="queryimg mr10" mode="heightFix"
						:src="pkSettleCountry>=0&&countryList[pkSettleCountry] ? countryList[pkSettleCountry].nationalFlag1 : ''">
					</image>
					<view class="flex-1">
						{{pkSettleCountry>=0&&countryList[pkSettleCountry] ? countryList[pkSettleCountry].shortName : ''}}
					</view>
				</view>
				<!-- <text class="icon iconfont icon-jiantou"></text> -->
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{$t('N_I_164')}}
				</view>
				<input @blur="changeInput('parent')" class="form-input" type="text" v-model="form.parent"
					:placeholder="$t('w_0264')" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{$t('N_I_165')}}
				</view>
				<view class="disabled-input">{{ form.parentName || '' }}</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{$t('CK_KS_14')}}
				</view>
				<input class="form-input" type="text" v-model="form.memberName" :placeholder="$t('S_C_70')" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{$t('MN_F_23')}}
				</view>
				<input class="form-input" type="text" v-model="form.phone" :placeholder="$t('S_C_70')"  />
			</view>
			<!-- <view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					证件号码
				</view>
				<input class="form-input" type="text" v-model="form.idCard" :placeholder="$t('S_C_70')"  />
			</view> -->
			<!-- <picker :range="accountList" range-key="bankName" @change="changeAccount">
				<view class="form-item" style="border-bottom: 1rpx solid #eee;">
					<view class="form-label">
						<text class="domation mr10">*</text>
						银行名称
					</view>
					<input class="form-input" disabled type="text" :value="bank_index == -1 ? '请选择' : accountList[bank_index].bankName" placeholder="" />
					<text class="icon iconfont icon-jiantou"></text>
				</view>
			</picker>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					银行账号
				</view>
				<input class="form-input" type="text" v-model="form.cardNumber" :placeholder="$t('S_C_70')"  />
			</view>

			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					开户支行
				</view>
				<input class="form-input" type="text" v-model="form.subBankName" :placeholder="$t('S_C_70')"  />
			</view> -->
			<!-- <view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					邮箱
				</view>
				<input class="form-input" type="text" v-model="form.email" :placeholder="$t('S_C_70')"  />
			</view> -->
			<picker :range="deliveryList" :disabled="userCountry==1" range-key="label" @change="changeDelivery">
				<view class="form-item" style="border-bottom: 1rpx solid #eee;" v-if="deliveryList[deliveryIndex]">
					<view class="form-label">
						<text class="domation mr10">*</text>
						<!-- 发货方式 -->
						{{$t('MN_F_T_140')}}
					</view>
					<input class="form-input" disabled type="text" :value="deliveryList[deliveryIndex].label"
						placeholder="" />
					<text class="icon iconfont icon-jiantou" v-if="userCountry!=1"></text>
				</view>
			</picker>
						<!-- 运输方式 -->
			<!-- <picker :range="transportType" :disabled="userCountry==1" range-key="label" @change="changeTransport">
				<view class="form-item" v-if="transportType[transportIndex]">
					<view class="form-label">
						<text class="domation mr10">*</text>
						{{$t('MN_F_T_163')}}
					</view>
					<input class="form-input" disabled type="text" :value="transportType[transportIndex].label"
						placeholder="" />
					<text class="icon iconfont icon-jiantou" v-if="userCountry!=1"></text>
				</view>
			</picker> -->
			<picker :range="storeList" v-if="userCountry!=1" range-key="storeName" @change="changeStore">
				<view class="form-item" style="border-bottom: 1rpx solid #eee;">
					<view class="form-label">
						<text class="white mr10">*</text>
						<!-- 会员店铺 -->
						{{$t('w_0100')}}
					</view>
					<input class="disabled-input" disabled type="text"
						:value="storeList&&storeList[storeIndex]&&storeList[storeIndex].storeName || ''"
						placeholder="" />
					<text class="icon iconfont icon-jiantou"></text>
				</view>
			</picker>
			<picker :range="storehouse" v-if="userCountry!=1" range-key="name" @change="changeStorehouse">
				<view class="form-item">
					<view class="form-label">
						<text class="white mr10">*</text>
						<!-- 仓库 -->
						{{$t('w_0102')}}
					</view>
					<input class="disabled-input" disabled type="text"
						:value="storehouse&&storehouse[storehouseIndex]&&storehouse[storehouseIndex].name || ''"
						placeholder="" />
					<text class="icon iconfont icon-jiantou"></text>
				</view>
			</picker>
		</view>
		<view v-if="isQuery" @touchmove.stop.prevent="moveHandle">
			<view class="pop-up-bg" @click="isQuery = false"></view>
			<view class="pop-up">
				<view class="d-e-c p20">
					<view class="blue f28" @click="closeQuery">完成</view>
				</view>
				<picker-view :indicator-style="'height: 80px;'" @change="changeQuery" class="picker-view">
					<picker-view-column>
						<view class="item d-c d-c-c" v-for="(item, index) in countryList" :key="index">
							<image style="height: 50px;" mode="heightFix" :src="item.nationalFlag1"></image>
							<view class="f28 gray9 mt10">{{ item.name }}</view>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// registType: 0,
				pkCountry: -1,
				pkSettleCountry: -1,
				isQuery: false,
				contactAddress: '',
				deliveryIndex: 0,
				storeIndex: '',
				storehouseIndex: '',
				transportIndex: 0,
				bank_index: -1,
				poptype: '',
				queryValue: 0,
				placeDeptList: ['安置左区', '安置右区']
			};
		},
		inject: ['form'],
		props: ['deliveryList', 'registType', 'transportType', 'accountList', 'countryList', 'userCountry', 'storeList',
			'storehouse'
		],
		watch: {
			countryList: function(n, o) {
				let self = this;
				if (n != o) {
					let num = 0;
					n.some((item, index) => {
						if (item.pkId == self.userCountry) {
							num = index;
							return true;
						}
					});
					self.pkSettleCountry = num;
					self.pkCountry = num;
					if (n) {
						self.form.pkSettleCountry = n[self.pkSettleCountry].pkId;
						self.form.pkCountry = n[self.pkCountry].pkId;
					}


				}
			}
		},
		created() {
			console.log(this.form);
			console.log(this.deliveryList);
		},
		methods: {
			changeStore(e) {
				this.storeIndex = e.detail.value;
				this.form.pkMemberStore = this.storeList[this.storeIndex].pkId;
			},
			changeStorehouse(e) {
				this.storehouseIndex = e.detail.value;
				this.form.pkStorehouse = this.storehouse[this.storehouseIndex].pkId;
			},
			changeInput(e) {
				this.$emit('changeInput', e)
			},
			changeDelivery(e) {
				this.deliveryIndex = e.detail.value;
				this.form.deliveryWay = this.deliveryList[this.deliveryIndex].value;
				this.$emit('queryOrderPostage');
			},

			changeTransport(e) {
				this.transportIndex = e.detail.value;
				this.form.transType = this.transportType[this.transportIndex].value;
				this.$emit('queryOrderPostage');
			},
			changeAccount(e) {
				this.bank_index = e.detail.value;
				console.log(this.bank_index);
				this.form.pkBank = this.accountList[this.bank_index].value;
			},
			changeType(n) {
				this.registType = n;
			},
			closeQuery() {
				this[this.poptype] = this.queryValue;
				if (this.poptype == 'pkSettleCountry') {
					this.form.pkSettleCountry = this.countryList[this.pkSettleCountry].pkId;
				} else {
					this.form.pkCountry = this.countryList[this.pkCountry].pkId;
				}
				this.isQuery = false;
			},
			changeQuery(e) {
				this.queryValue = e.detail.value[0];
			},
			moveHandle() {
				return false;
			},
			openCPop(name) {
				this.poptype = name;
				this.isQuery = true;
			}
		}
	};
</script>

<style lang="scss">
	.pop-up-bg {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 99;
	}

	.pop-up {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60vh;
		background-color: #ffffff;
		z-index: 100;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.queryimg {
		height: 60rpx;
		flex-shrink: 0;
	}

	.form-top-nav {
		height: 94rpx;
		background: #fb3024;
	}

	.form-top-nav-item {
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		line-height: 1.5;
		word-break: break-all;
		flex: 1;
		padding: 0 20rpx;
		flex-shrink: 0;
		height: 94rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.form-top-nav-item.active::before {
		content: '';
		width: 52rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 12rpx;
		margin: auto;
		height: 6rpx;
		background: #ffffff;
		border-radius: 4rpx;
	}

	.form-title {
		width: 750rpx;
		height: 106rpx;
		background: #fb3024;
		padding-left: 44rpx;
		padding-right: 25rpx;
		position: relative;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 106rpx;
		font-weight: bold;
		z-index: 1;
	}

	.form-title.redtitle {
		width: 750rpx;
		height: 106rpx;
		background: #fb3024;
		padding-left: 44rpx;
		position: relative;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #fff;
		line-height: 106rpx;
		font-weight: bold;
		z-index: 1;
	}

	.form-title::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		left: 25rpx;
		width: 6rpx;
		height: 24rpx;
		background-color: #fb3024;
		z-index: 1;
	}

	.redtitle.form-title::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		left: 25rpx;
		width: 6rpx;
		height: 24rpx;
		background-color: #fff;
		z-index: 1;
	}
</style>