(function() {
	Vue.component('personal-info', {
		template: `<div class="container ptb20 ">
				<div class="row w3-row">
					<left-menu :code="code"></left-menu>
					<div class="pl251">
						<div class="bgc-fff c-border ptb30">
							<form class="mainbox" id="form" role="form" onsubmit="return false;">
								<div class="c-t-center mb10">
									<img src="../image/touxiang.jpg" class="img-circle" width="100" height="100" id="personalImg" />
									<div class="c-f14 c-909090 pt15">
										<input type="file" @change="uploadImg()" class="c-vam c-inline-block type-hide pl105" accept="image/jpg,image/jpeg,image/png"><span class="changeImg">修改头像</span></div>
								</div>
								<div class="w3-row mt50">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">姓&emsp;&emsp;名</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="w3-row">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">性&emsp;&emsp;别</div>
									<div class="w3-rest pl15 c-f14">
										<input type="radio" name="sex" id="male" checked="checked" value="male">&emsp;男&emsp;
										<input type="radio" name="sex" id="female" value="female">&emsp;女
									</div>
								</div>
								<div class="w3-row  mt25">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">手机号码</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="w3-row mt25">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">身份证号</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="w3-row mt25">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">社保卡号</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="w3-row mt25">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">医疗保险号</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="w3-row mt25">
									<div class="w3-col c-323232 c-f16 m5 c-t-right" style="width:80px;">行&emsp;&emsp;业</div>
									<div class="pl105" data-toggle="modal" data-target="#selindustry">
										<input id="industry" placeholder="请选择行业" type="text" class="form-control" name="industry"><span class="caret selcaret"></span>
									</div>
								</div>
								<div class="w3-row mt25">
									<div class="w3-col c-323232 c-f16 m5 c-t-right" style="width:80px;">家庭住址</div>
									<div class="pl105">
										<div class="dropdown">
											<a id="addressLabel" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
												<input id="addrcode" placeholder="请选择家庭住址" type="text" class="form-control" name="addrcode"><span class="caret selcaret"></span>
											</a>
											<selsect-address></selsect-address>
										</div>
										<textarea class="form-control mt10"></textarea>
									</div>
								</div>
								<div class="c-t-center ">
									<button type="submit" class="btn btn-theme c-f16 mtb30" style="width:144px;" >保 存</button>
								</div>
							</form>
							<select-industry :industryid="industryid" :directionid="directionid" ref="getIndustry"></select-industry>
						</div>
					</div>
				</div>
			</div>`,
		props: [],
		data: function() {
			return {
				gotoAddid: "Province",
				code: "info",
				industryid: -1,
				directionid: -1,
				industryname: "",
				directionname: "",
			}
		},
		mounted: function() {
			var vm = this
			$('.dropdown-toggle').dropdown()
			$('#selindustry').on('hidden.bs.modal', function(e) {
				vm.getNewIndustry()
			})
		},
		methods: {
			getNewIndustry: function() {
				var vm = this
				var aaa = vm.$refs.getIndustry.industryname
				var bbb = vm.$refs.getIndustry.directionname
				if(aaa != "") {
					vm.industryname = aaa
					vm.industryid = vm.$refs.getIndustry.industryid
				}
				if(bbb != "") {
					vm.directionname = bbb
					vm.directionid = vm.$refs.getIndustry.directionid
				}
				if(vm.industryname == "请选择行业") {
					$("#industry").val("")
				} else {
					$("#industry").val(vm.industryname + ">" + vm.directionname)
				}
			}
		},
	})
	var gotoAddid = "Province"

	function initInterfaceTypeSelect(industry) {
		$(".dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
			e.stopPropagation();
		});
		Selectors.createDefinedSelect(industry.el, industry.data)
	}

	function gotoAdd(id) {
		var addid = $(id).attr("id")
		if(addid == undefined) {
			addid = id
		}
		$("#" + gotoAddid).removeClass("active")
		$("#" + addid).addClass("active")
		$("#_" + gotoAddid).addClass("hidden")
		$("#_" + addid).removeClass("hidden")
		gotoAddid = addid
	}

})()