<template>
	<div>
		<common @asynCallBack="asynCallBack" :projectCheck="false"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content margin60">
			<div class="mui-content-padded">
				<h5>该号码尚未注册，正在为您注册新的身份：</h5>
			</div>
			<div class="mui-content-padded vongi-editme vongi-qingjiadt">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>选择行业</label>
						<button class="mui-btn mui-btn-block" type='button' style="width:50%">
							{{subForm.sceneName}}
						</button>
					</div>
					<div class="mui-input-row">
						<label>所在小区</label>
						<button @click="goToSelectCompany" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
							{{subForm.companyName}}
						</button>
					</div>
				</form>
			</div>
			<!-- 状态 -->
			<div v-show="subForm.companyId" class="vongi-zc vongi-fklist">
				<div class="mui-content-padded">
					<h5>请选择您的身份进行认证</h5>
				</div>
				<ul class="mui-table-view mui-table-view-chevron openfyy-list">
					<li v-for="(item,index) in roleList" :class="'mui-table-view-cell mui-media '+(subForm.personRoleId==item.id?'mui-selected':'')">
						<a @click="selectRole(item)" class="mui-navigate-right" href="">
							<div class="mui-media-object mui-pull-left">
								<img :src="item.pic">
							</div>
							<div class="mui-media-body">
								<h4 class="mui-ellipsis" v-text="item.name"></h4>
								<h6 class="mui-ellipsis">开启以下功能</h6>
								<h5 class="mui-ellipsis" v-text="item.remark"></h5>
							</div>
						</a>
					</li>
				</ul>
			</div>
			
			<div v-show="subForm.companyId && subForm.personRoleId " class="vongi-btn vongi-login-btn">
				<button class="mui-btn mui-btn-primary" @click="nextStep">
					下一步
				</button>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Person from '@/apis/person'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'RegisterResidenceStep1',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '注册',

				subForm: {
					sceneId: '',
					sceneName: '',
					personRoleId: '',
					roleName: '',
					name: '',
					telephone: '',
					personId: '',
					companyId: '',
					companyName: '请选择',
					companyStructureId: '',
					//companyStructureName: '请选择',
					//最终选择的数据
					selectCompanyStructureList: [],
					address: '',
					idCard: '',
					faceImageUrl: ''
				},

				isLoading: false,

				roleList: [],
			}
		},
		created() {
			this.subForm = this.register_form_data;
		},
		methods: {
			//获取用户角色列表
			getRoleList() {
				this.isLoading = true;
				API_Person.getPersonRoleListByScene(this.subForm.sceneId).then(response => {
					this.isLoading = false;

					this.roleList = response;
					if (response.length > 0) {
						//选择默认角色
						this.selectRole(response[0]);
					}
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//到选择单位页面
			goToSelectCompany() {
				this.$router.push({
					name: 'RegisterResidenceStep2'
				})
			},
			//选择角色
			selectRole(item) {
				this.subForm.personRoleId = item.id;
				this.subForm.roleName = item.name;
				this.set_register_form_data(this.subForm);
				/* this.$router.push({
					name: 'RegisterResidenceStep3'
				}) */
			},
			//下一步
			nextStep() {
				this.$router.push({
					name: 'RegisterResidenceStep3'
				})
			},

			asynCallBack() {

			},
			...mapMutations({
				set_register_form_data: types.SET_REGISTER_FORM_DATA,
			})
		},
		mounted() {
			//获取用户角色列表
			this.getRoleList();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				register_form_data: 'register_form_data'
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
