{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 100px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3 row mr-0 ml-0">
	<div class="col-12 col-sm-6">
		<el-divider class="mb-5" content-position="left">编辑用户信息</el-divider>
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

		  <el-form-item label="头像" prop="headimg">
			<el-image
			  	v-if="form.headimg" 
			    style="width: 80px; height: 80px"
			    lazy
			    class="rounded-circle mr-2"
			    :src="form.headimg" 
			    :preview-src-list="[form.headimg]">
			</el-image>
		  	  <el-upload
				  class="avatar-uploader"
				  action="/uploadFiles"
				  name="file"
				  accept="image/*"
				  :data="{path:'admin/headimg'}"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :on-error="handleAvatarError">
		  			<el-button size="small" type="primary">选择文件</el-button>
			  </el-upload>
		  </el-form-item>

		  <el-form-item label="昵称" prop="nickname">
		    <el-input v-model="form.nickname" class="col-12 col-sm-6 pl-0 pr-0" placeholder="Name"></el-input>
		  </el-form-item>

		  <el-form-item label="账号" prop="user">
		    <el-input v-model="form.user" class="col-12 col-sm-6 pl-0 pr-0" placeholder="UserName"></el-input>
		  </el-form-item>

		  <el-form-item label="密码">
		    <el-input v-model="form.password" class="col-12 col-sm-6 pl-0 pr-0" placeholder="Password,不填则不修改"></el-input>
		  </el-form-item>

		  <el-form-item label="状态" prop="status">
		    <el-radio-group v-model="form.status">
		      <el-radio :label="1">启用[默认]</el-radio>
		      <el-radio :label="0">禁用</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="禁用消息" v-if="!form.status" prop="disable_msg">
		    <el-input type="textarea" v-model="form.disable_msg" class="col-12 col-sm-6 pl-0 pr-0"></el-input>
		  </el-form-item>

		  <el-form-item label="手机号" prop="mobile">
		    <el-input v-model="form.mobile" class="col-12 col-sm-6 pl-0 pr-0" placeholder="Mobile"></el-input>
		  </el-form-item>

		  <el-form-item label="邮箱" prop="email">
		    <el-input v-model="form.email" class="col-12 col-sm-6 pl-0 pr-0" placeholder="Tel"></el-input>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
	<div class="col-12 col-sm-6">
		<el-divider class="mb-5" content-position="left">用户信息</el-divider>
		<div class="flex flex-center pb-3 small">
			<div class="flex-lable">实名</div>
			<div class="flex-1" v-if="Find.name">{{Find.name}} {{Find.idcard}}</div>
			<div class="flex-1 text-secondary" v-else="Find.name">未实名</div>
		</div>
		<div class="flex flex-center pb-3 small">
			<div class="flex-lable">当前身份</div>
			<div class="flex-1 text-primary" 
			v-if="Find.role_type">企业</div>
			<div class="flex-1 text-success" 
			v-else="Find.role_type">个人</div>
		</div>
		<div class="flex flex-center pb-3 small">
			<div class="flex-lable">绑定QQ</div>
			<el-link
			v-if="Find.bind_qq"
			type="primary"
			:underline="false">{{Find.bind_qq.nickname}}</el-link>
			<el-link
			v-else
			type="info"
			:underline="false">未绑定</el-link>
		</div>
		<div class="flex flex-center pb-3 small">
			<div class="flex-lable">绑定微信</div>
			<el-link
			v-if="Find.bind_wx"
			type="primary"
			:href="'/wxUser?uid='+Find.id"
			target="_blank"
			:underline="false">{{Find.bind_wx.nickname}}</el-link>
			<el-link
			v-else
			type="info"
			:underline="false">未绑定</el-link>
		</div>
		<div class="flex flex-center pb-3 small">
			<div class="flex-lable">绑定AppleID</div>
			<el-link
			v-if="Find.bind_apple"
			type="primary"
			:underline="false">已绑定</el-link>
			<el-link
			v-else
			type="info"
			:underline="false">未绑定</el-link>
		</div>
		<div class="flex flex-center pb-3 small">
			<div class="flex-lable">禁用消息</div>
			<div class="flex-1">{{Find.disable_msg}}</div>
		</div>
		<el-timeline>
		    <el-timeline-item 
		    :timestamp="Find.register_time" >
		        <h6>注册</h6>
		        <p class="mb-0 text-secondary small">{{Find.register_ip}}</p>
		        <p class="mb-0 text-secondary small">{{Find.register_devices}}</p>
		    </el-timeline-item>
		    <el-timeline-item 
		    :timestamp="Find.update_time">
		        <h6>账户</h6>
		    </el-timeline-item>
		    <el-timeline-item 
		    :timestamp="Find.info_update_time">
		        <h6>资料</h6>
		    </el-timeline-item>
		    <el-timeline-item 
		    :timestamp="Find.login_time">
		        <h6>最后登录</h6>
		        <p class="mb-0 text-secondary small">{{Find.login_ip}}</p>
		        <p class="mb-0 text-secondary small">{{Find.login_devices}}</p>
		    </el-timeline-item>
		    <el-timeline-item 
		    :timestamp="Find.online_time">
		        <h6>最后在线</h6>
		        <p class="mb-0 text-secondary small">{{Find.online_ip}}</p>
		        <p class="mb-0 text-secondary small">{{Find.online_devices}}</p>
		    </el-timeline-item>
		</el-timeline>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="role"}
	var role=[];
	{else/}
	var role={:json_encode($role,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var Find={};
	var formData={
			headimg:'',
			nickname:'',
			user:'',
			password:'',
			status:1,
			mobile:'',
			email:'',
			disable_msg:'',
		};
	{else/}
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var Find={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			role: role,
			labelPosition:'right',
			form:formData,
			Find:Find,
		    rules: {
		      nickname: [
		        { required: true, message: '请输入名称', trigger: 'blur' },
		      ],
		      username: [
		        { required: true, message: '请设置账号', trigger: 'blur' },
		      ],
		      password: [
		        { required: true, message: '请设置密码', trigger: 'blur' },
		      ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'change' }
	          ],
	          disable_msg: [
	            { required: true, message: '禁用消息不能为空', trigger: 'blur' }
	          ],
		    }
		},
		watch:{
		    view:XYBase.viewWatch,
			allow_time(val, oldVal){
				this.form.allow_time_start=val[0];
				this.form.allow_time_end=val[1];
			}
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'user/headimg'){
							this.form.headimg=res.data.path;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				if(D.password)
					D.vpassword=D.password;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}