<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%">
							机构、居家养老
						</button>
					</div>
					<div class="mui-input-row">
						<label>养老类型</label>
						<button class="mui-btn mui-btn-block" type='button' style="width:50%">
							{{subForm.sceneName}}
						</button>
					</div>
					<div v-if="subForm.sceneId==3" 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>
					<div v-if="subForm.sceneId==4" class="mui-input-row">
						<label>所在小区</label>
						<button @click="goToSelectResidence" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
							{{subForm.companyName}}
						</button>
					</div>
					<div v-if="subForm.sceneId==4 && subForm.companyId!==''" class="mui-input-row">
						<label>服务机构</label>
						<button @click="goToSelectServeCompany" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
							{{subForm.serviceCompanyName}}
						</button>
					</div>
				</form>
			</div>
			<!-- 状态 -->
			<div v-show="roleSeleceShow" 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)">
							<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="roleSeleceShow" 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 '@/components/Common.vue'
	import Loading from '@/components/Loading.vue'
	import TopHeader from '@/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '@/store/mutation-types'
	export default {
		name: 'RegisterPensionStep1',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '注册',

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

				isLoading: false,

				roleList: [],

				//默认从里面读取第一条
				companyList: [],
			}
		},
		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: 'RegisterPensionStep2'
				})
			},
			//选择角色
			selectRole(item) {
				this.subForm.personRoleId = item.id;
				this.subForm.roleName = item.name;
				this.set_register_form_data(this.subForm);
				/* this.$router.push({
					name: 'RegisterPensionStep3'
				}) */
			},
			//下一步
			nextStep() {
				this.$router.push({
					name: 'RegisterPensionStep3'
				})
			},
			//选择小区
			goToSelectResidence() {
				this.$router.push({
					name: 'RegisterPensionStep2_4'
				})
			},
			//选择服务机构
			goToSelectServeCompany() {
				this.$router.push({
					name: 'RegisterPensionStep3_4'
				})
			},

			//获取服务机构公司列表,并设置默认第一条
			getCompanyList() {
				this.isLoading = true;
				API_Person.getServiceCompanyIdList().then(response => {
					this.isLoading = false;
					this.companyList = response.list;
					//设置默认第一条
					if (this.companyList.length > 0) {
						this.subForm.serviceCompanyId = this.companyList[0].id;
						this.subForm.serviceCompanyName = this.companyList[0].name;
						this.set_register_form_data(this.subForm);
					}
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},

			asynCallBack() {

			},
			...mapMutations({
				set_register_form_data: types.SET_REGISTER_FORM_DATA,
			})
		},
		mounted() {
			//获取用户角色列表
			this.getRoleList();
			//获取服务机构公司列表
			this.getCompanyList()
		},
		destroyed() {

		},
		computed: {
			roleSeleceShow: {
				// getter
				get: function() {
					if (this.subForm.sceneId == 4) {
						if (this.subForm.serviceCompanyId !== '' && this.subForm.companyId !== '') {
							return true;
						} else {
							return false;
						}
					} else {
						if (this.subForm.companyId !== '') {
							return true;
						} else {
							return false;
						}
					}
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				register_form_data: 'register_form_data'
			})
		}
	}
</script>

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