<template>
	<div class="info_container">
		<MiniTitle>
			<div slot="mini" class="miniTit">账号认证</div>
		</MiniTitle>
		<div class="infoBox">
				<el-form ref="form" :label-position="labelPosition" :model="form" :rules="rules" label-width="120" class="add-admin-form">
          <h4>基本信息</h4>
          <el-form-item label="手机号码：">
              <div>{{form.username}}</div>
          </el-form-item>
          <el-form-item label="姓名：">
              <div>{{linkman}}</div>
          </el-form-item>
          <el-form-item label="机构名称：">
              <div>{{form.organizationName}}</div>
          </el-form-item>
          <el-form-item label="邮箱：">
              <div>{{email}}</div>
          </el-form-item>
        	<el-form-item :class="{toshow:!person}" label="所属岗位：">
            <div>{{positionInfo}}</div>
        	</el-form-item>
          <el-form-item :class="{toshow: person}" label="所属岗位：" prop="position">
              <el-input placeholder="请输入岗位名称" clearable v-model="form.position"></el-input>
          </el-form-item>
          <h4>机构信息</h4>
          <el-form-item :class="{toshow:!person}" label="机构负责人：">
            <div>{{principal}}</div>
        	</el-form-item>
          <el-form-item :class="{toshow: person}" label="机构负责人：" prop="organizationPrincipal">
              <el-input placeholder="请输入机构负责人姓名" clearable v-model="form.organizationPrincipal"></el-input>
          </el-form-item>
          <el-form-item :class="{toshow:!person}" label="机构所在地：">
            <div>{{address}}</div>
        	</el-form-item>
          <el-form-item :class="{toshow: person}" label="机构所在地：" prop="organizationAddress">
              <el-input v-model="form.organizationAddress" placeholder="请输入机构所在地"></el-input>
          </el-form-item>
          <el-form-item :class="{toshow:!person}" label="机构属性：">
            <div>{{organizationType}}</div>
        	</el-form-item>
          <el-form-item :class="{toshow: person}" label="机构属性：" prop="organizationTypeNum">
              <el-select  v-model="form.organizationTypeNum" placeholder="请选择机构">
                  <el-option v-for="item in options" :key="item.key" :label="item.name" :value="item.key">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item :class="{toshow:!person}" label="下属机构数量：">
            <div>{{subNum}}</div>
        	</el-form-item>
          <el-form-item :class="{toshow: person}" label="下属机构数量：" prop="subOrganizationNum">
              <el-input v-model="form.subOrganizationNum" placeholder="请输入下属机构数量" @change="handleNumInput"></el-input>
          </el-form-item>
          <div class="changeBtn">
					<el-button type="primary" v-bind:class="{btn: isBtn}" class="emp" v-if="this.authStatusName == '认证中'"></el-button>
					<!--认证中  同意-->
					<el-button type="primary" v-bind:class="{btn: isBtn}" v-else-if="this.authStatusName == '未认证' && this.isReject == null"
					 @click="submitAuth()">立即认证</el-button>
					<el-button type="primary" v-bind:class="{btn: isBtn}" v-else-if="this.authStatusName == '未认证' && this.isReject == 0"
					 @click="submitAuth()">立即认证</el-button>
					<el-button type="primary" v-bind:class="{btn: isBtn}" v-else-if="this.authStatusName == '未认证' && this.isReject == 1"
					 @click="submitAuth()">立即认证</el-button>
					<el-button type="primary" class="chen" v-if="queBtn" @click="anthSubmit()">确定</el-button>
				</div>
      </el-form>
		</div>
	</div>
</template>

<script>
	import api from '../../api/user.js';
	import userApi from '@api/user.js';
	import MiniTitle from '../common/MiniTile.vue';
	export default {
		name: 'user-information',
		components: {
			MiniTitle
		},
		data: function() {
			return {
				labelPosition: 'right',
				form: {
					position:'',
          organizationPrincipal: '',//负责人
          organizationAddress: '',
          subOrganizationNum: null,
          organizationName: '',
          organizationTypeNum: null,
          username:'',
        },
        rules: {
          organizationPrincipal:[
            { required: true, message: '请输入机构负责人', trigger: ['blur','change'] }
          ],
          organizationAddress:[
            { required: true, message: '请输入机构所在地', trigger: ['blur','change'] }
          ],
          organizationName:[
            { required: true, message: '请输入机构名称', trigger: ['blur','change']}
          ],
          organizationTypeNum:[
            { required: true, message: '请选择机构属性', trigger: 'change' }
          ],
          position:[
          	{ required: true, message: '请输入所属岗位', trigger: ['blur','change'] }
          ]
        },
				username: null,
				linkman: null,
				email: null,
				authStatusName: null,
				authStatusName: null,
				positionInfo: null,
				subNum: null,
				principal: null,
				isReject: null,
				address: null,
				showPrise: true,
				modify: false,
				person: true,
				isActive: false,
				queBtn: false,
				isBtn: false,
				isBtns: false,
				options: [],
				organization: '',
				organizationType: '',
			}
		},
		computed: {},
		created: function() {
			this.getUserInfo();
			const enumsList = JSON.parse(localStorage.getItem('enumsData'));
			const organizationTypeEnum = enumsList.organizationTypeEnum;
			for (var i = 0; i < organizationTypeEnum.length; i++) {
				this.options.push(organizationTypeEnum[i])
			}
		},
		methods: {
			getUserInfo() {
				//获取当前账户信息
				userApi.getUserAuthInfo().then((res) => {
					if (res.data.code == '0') {
						const data = res.data.data;
						this.isReject = data.isReject;
						this.form.username = data.username;
						this.linkman = data.linkman;
						this.email = data.email;
						this.form.organizationName = data.organizationName;
						// data.organizationName ? this.form.organizationName = data.organizationName:this.organizationName = '待完善';
						data.position ? this.form.position = this.positionInfo = data.position:this.positionInfo = '待完善';
						data.principal ? this.form.organizationPrincipal = this.principal = data.principal:this.principal = '待完善';
						data.address ? this.form.organizationAddress = this.address = data.address:this.address = '待完善';
						if(data.subNum == 0 || data.subNum){
							this.subNum = data.subNum;
							this.form.subOrganizationNum = data.subNum;
						}else{
							this.subNum = '待完善';
						}
						
						//认证状态 虚拟数据
						data.authStatusName ? this.authStatusName = data.authStatusName:this.authStatusName = '待完善'; //认证状态
						//下拉框
						if(data.organizationType == 0 || data.organizationType){
							const opLeng = this.options;
							for (var i = 0; i < opLeng.length; i++) {
								if (opLeng[i].key == data.organizationType) {
									this.organizationType = opLeng[i].name;
									this.form.organizationTypeNum = opLeng[i].key;
								}
							}

						}else{
							this.organizationType = '待完善';
						}
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			handleNumInput(){//机构数量只能数字
              const numReg = new RegExp(/[^\d]/g);
              if(numReg.test(this.form.subOrganizationNum) || this.form.subOrganizationNum < 0){
                this.form.subOrganizationNum = null;
              }
            },
			submitAuth: function() {
				this.person = false;
				this.isActive = true;
				this.queBtn = true;
				this.isBtn = true;
				this.organizationType = '';
			},
			anthSubmit: function() {
				this.$refs.form.validate((valid)=> {
                  if (valid) {
                    api.userAuthentication(this.form).then((res) => {
                      if (+res.data.code == 0) {
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.getUserInfo();
						this.queBtn = false;
						this.person = true;
						this.isActive = false;
						this.$router.push({path:'/user/YH-JGZX-ZHXX'});
						this.$emit('status-change','认证中');
                      }else {
                        this.$message({
                          message: res.data.msg,
                          type: 'warning'
                        });
                      }
                    }).catch((error) => {
                      console.log(error)
                    });
                  }
                });
			}
		}
	}
</script>
<style lang="less" scoped>
@import '../../less/base.less';
@import '../../less/user.less';
	.info_container{
		.base;
	  width: 100%;
	  height:100%;
		
		.el-button--primary{
			background:#409EFF;
		}
		
		h4 {
			font-size: 14px;
			padding-top: 20px;
			margin-bottom: 20px;
		}
	}
	.toshow{
			display:none;
		}
	.miniTit {
		margin-left: 20px;
		font-weight: bold;
		font-size: 16px;
	}
	
	.infoBox {
		height:91%;
		max-height: 800px;
		overflow-y: auto;
		margin: 20px 20px 0;
		background-color: #fff;	
		.el-form{
			padding-left: 30px;
			.el-form-item{
				margin-bottom: 15px;
			}
			.el-form-item__label,.el-form-item__content{
				font-size: 12px !important;
			}	
		}

		.changeBtn {
			margin: 50px 0 22px 35px;
		}

		.emp {
			display: none;
		}

		.inp {
			width: 175px;
			height: 30px;
		}

		.el-input__inner {
			width: 175px;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
		}

		.el-input__icon {
			line-height: 25px;
		}

		.title {
			margin-top: 4px;
		}
		.subNum{
			margin-top: 4px;
		}

		.chen {
			background: #ffb03b;
			border-color: #fff;
		}

		.btn {
			display: none;
		}

		.btns {
			display: block;
		}
	}
</style>
