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

		<div class="mui-content vongi-zhuce">
			<div v-if="roleList.length">
				<div class="mui-content-padded">
					<h5>该账号已注册以下身份：</h5>
				</div>
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li v-for="(item,index) in roleList" class="mui-table-view-cell mui-media mui-col-xs-4">
						<a>
							<div class="mui-media-object">
								<img :src="item.faceImagUrl">
							</div>
							<div class="mui-media-body">
								{{item.job?item.job:item.personRoleName}}
								<p class="mui-ellipsis" v-text="item.companyName"></p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="mui-content-padded">
				<h5 v-text="titleTips"></h5>
			</div>
			<div class="mui-content-padded vongi-editme vongi-qingjiadt">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>选择行业</label>
						<button @click="selectScene" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%">
							{{subForm.sceneName}}
						</button>
					</div>
				</form>
			</div>
		</div>

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

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Person from '@/apis/person'
	import * as API_User from '$project/apis/user'
	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: 'RegisterHome',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '注册',

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

				isLoading: false,

				sceneList: [],

				roleList: [],
			}
		},
		created() {
			if (this.person_data.id) {
				this.subForm.personId = this.person_data.id;
			}
		},
		methods: {
			//获取场景列表
			getSceneList() {
				this.isLoading = true;
				API_Person.getSceneList().then(response => {
					this.isLoading = false;

					this.sceneList = response.list;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择场景
			selectScene() {
				var sceneList = [];
				for (var i = 0; i < this.sceneList.length; i++) {
					sceneList.push({
						value: this.sceneList[i]['id'],
						text: this.sceneList[i]['sceneName'],
					})
				}
				var _this = this;
				var picker = new mui.PopPicker();
				picker.setData(sceneList);
				picker.show(function(selectItems) {
					_this.subForm.sceneId = selectItems[0].value;
					_this.subForm.sceneName = selectItems[0].text;
					_this.nextStep();
				})
			},
			//检测表单
			checkForm() {
				if (!this.subForm.sceneId) {
					mui.toast('请选择场景');
					return false;
				} else {
					return true;
				}
			},
			//下一步
			nextStep() {
				if (this.checkForm()) {
					let routeName = {};
					if (['1'].indexOf(this.subForm.sceneId) > -1) {
						routeName = {
							name: 'RegisterBusinessStep1'
						};
					} else if (['2'].indexOf(this.subForm.sceneId) > -1) {
						routeName = {
							name: 'RegisterResidenceStep1'
						};
					} else if (['3', '4'].indexOf(this.subForm.sceneId) > -1) {
						routeName = {
							name: 'RegisterPensionStep1',
							query: {
								sceneId: this.subForm.sceneId
							}
						};
					} else {
						mui.toast('场景不匹配');
						return false;
					}
					this.set_register_form_data(this.subForm);
					this.$router.push(routeName)
				}
			},
			//获取用户角色列表
			getRoleList() {
				this.isLoading = true;
				API_User.getRoleList().then(response => {
					this.isLoading = false;

					this.roleList = response.list;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {

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

		},
		computed: {
			titleTips: {
				// getter
				get: function() {
					if (this.person_popedom) {
						var job = this.person_popedom.job ? this.person_popedom.job : this.person_popedom.personRoleName;
						return '正在为您注册新的身份：';
					} else {
						return '该号码尚未注册，正在为您注册新的身份：';
					}
				},
				// 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="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style scoped>
</style>
