(function() {
	Vue.component('security-setting', {
		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" style="height: 706px;">
							<div id="security">
								<div class="w3-row pl30">
									<div class="w3-col" style="width:60px;"><img src="../../../images/icon_wodezhanghu.png" width="43" height="50" /></div>
									<div class="w3-rest pl10 pb35 c-border-b pr30">
										<div class="w3-col mt15" style="width:117px;float: right;"><button class="btn btn-default btn-block" type="button" @click="changePassword()">修 改</button></div>
										<div class="w3-rest">
											<div class="c-f20 ">登陆密码</div>
											<div class="c-f14 c-909090 mt15 ">建议您定期更改密码，设置安全性高的密码可以使账号更安全</div>
										</div>
									</div>
								</div>
								<div class="w3-row pl30 pt30">
									<div class="w3-col" style="width:60px; "><img src="../../../images/icon_wodezhanghu.png " width="43 " height="50 " /></div>
									<div class="w3-rest pl10 pb35 c-border-b pr30">
										<div class="w3-col mt15 " style="width:117px;float: right; "><button class="btn btn-default btn-block " type="button" @click="changePhone()">更 改</button></div>
										<div class="w3-rest">
											<div class="c-f20 ">安全手机 180****1111</div>
											<div class="c-f14 c-909090 mt15 ">安全手机可以用于登录账号，重置密码或者其他安全验证</div>
										</div>
									</div>
								</div>
							</div>							
							<change-password></change-password>
							<change-phone></change-phone>
						</div>
					</div>
				</div>`,
		props: [],
		data: function() {
			return {
				code: "securitySetting",
			}
		},
		mounted: function() {

		},
		methods: {
			changePassword: function() {
				$("#security").addClass("hidden")
				$("#password").removeClass("hidden")
			},
			changePhone: function() {
				$("#security").addClass("hidden")
				$("#phone").removeClass("hidden")
			},
		},
	})

})()