{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 120px;color: #6c757d;text-align: right;padding-right: 10px;}
	.el-image-viewer__img{transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s;}
	.w-400px{width: 400px !important;}
	.el-drawer__body{height: 100%;}
	.RefuseWin .el-dialog{min-width: 768px;}
	.RefuseWin>.el-input, .RefuseWin>.el-select{width: 40%;}
	.el-date-editor.el-input, .el-date-editor.el-input__inner{width: 100%;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-width="140px" :label-position="labelPosition" size="mini">

	  <el-form-item label="搜索类型" prop="search_type">
	    <el-radio-group v-model="search.search_type">
	      <el-radio :label="'uid'">UID</el-radio>
	      <el-radio :label="'id_number'">身份证或统一社会信用代码</el-radio>
	      <el-radio :label="'name'">名称</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item :label="getSearchType()" prop="key">
	    <el-input v-model="search.key" class="col-12 col-sm-2 pl-0 pr-0"></el-input>
	  </el-form-item>

	  <el-form-item label="状态" prop="status">
	    <el-radio-group v-model="search.status">
	      <el-radio :label="'all'">全部</el-radio>
	      <el-radio :label="0">待审核</el-radio>
	      <el-radio :label="1">已通过</el-radio>
	      <el-radio :label="2">已拒绝</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
	<div class="table-responsive py-3">
		<el-button-group class="text-nowrap" style="min-width: 500px">
		  <el-button type="success" size="mini" @click="setStatusALL(1)">批量通过</el-button>
		  <el-button type="danger" size="mini" @click="openRefuseWin(2)">批量拒绝</el-button>
		</el-button-group>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		stripe
    		v-loading="search.ajax"
    		style="width: 100%;"
    		row-class-name="row-flex"
    		@selection-change="handleSelectionChange">
		  <el-table-column
			  type="selection"
			  :selectable="checkboxT"
	      	  disabled="true"
			  width="55">
		  </el-table-column>
    		<el-table-column type="expand" width="20">
		      <template slot-scope="scope">
		      	<div class="flex">
		      		<div class="flex-1">
		      			<div class="flex flex-center pb-3">
		      				<div class="flex-lable">UID</div>
		      				<div class="flex-1">{{scope.row.uid}}</div>
		      			</div>
		      			<div class="flex flex-center pb-3">
		      				<div class="flex-lable">用户</div>
							<el-image
							  	v-if="scope.row.headimg" 
							    style="width: 30px; height: 30px"
							    lazy
							    class="rounded-circle mr-2"
							    :src="scope.row.headimg" 
							    :preview-src-list="[scope.row.headimg]">
							</el-image>
		      				<div class="flex-1">
								{{scope.row.nickname}}
		      				</div>
		      			</div>
		      			<div class="flex flex-center pb-3">
		      				<div class="flex-lable">名称</div>
		      				<div class="flex-1">{{scope.row.name}}</div>
		      			</div>
		      			<div class="flex flex-center pb-3">
		      				<div class="flex-lable">身份证或统一社会信用代码</div>
		      				<div class="flex-1">{{scope.row.id_number}}</div>
		      			</div>
		      			<div class="flex flex-center pb-3">
		      				<div class="flex-lable">联系人</div>
		      				<div class="flex-1">{{scope.row.contacts}}</div>
		      			</div>
		      			<div class="flex flex-center pb-3">
		      				<div class="flex-lable">手机号</div>
		      				<div class="flex-1">{{scope.row.mobile}}</div>
		      			</div>
		      			<div class="flex flex-center pb-3">
		      				<div class="flex-lable">地址</div>
		      				<div class="flex-1">{{scope.row.area1}}{{scope.row.area2}}{{scope.row.area3}}{{scope.row.address}}</div>
		      			</div>
		      		</div>
		      		<div class="flex-1">
						<div class="py-2 border-bottom mb-2" v-for="(v,index) in scope.row.log">
							<div class="flex">
								<div class="text-secondary" v-if="v.status===0">提交申请</div>
								<div class="text-success" v-if="v.status===1">审核通过</div>
								<div class="text-danger" v-if="v.status===2">被驳回</div>
								<div class="flex-1 pl-2">{{v.nickname}}</div>
								<div class="small text-secondary">{{v.create_time}}</div>
							</div>
							<div class="pt-2">{{v.msg}}</div>
						</div>
		      		</div>
		      	</div>
		      </template>
		    </el-table-column>
	      <el-table-column
	        prop="uid"
	        label="UID"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        min-width="180">
		      <template slot-scope="scope">
		      	<div class="flex flex-center">
					<el-image
					  	v-if="scope.row.headimg" 
					    style="width: 30px; height: 30px"
					    lazy
					    class="rounded-circle mr-2"
					    :src="scope.row.headimg" 
					    :preview-src-list="[scope.row.headimg]">
					</el-image>
		      		<div>
						{{scope.row.nickname}}
		      		</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label=身份类型
	        width="80">
		      <template slot-scope="scope">
	      		<span class="text-primary" v-if="scope.row.id_type==0">个人</span>
	      		<span class="text-primary" v-if="scope.row.id_type==1">企业</span>
	      		<span class="text-primary" v-if="scope.row.id_type==2">其他组织</span>
		      </template>
	      </el-table-column>
	      <el-table-column
	      	prop="name"
	        label="名称"
	        min-width="200">
	      </el-table-column>
	      <el-table-column
	      	prop="id_number"
	        label="身份证或统一社会信用代码"
	        width="240">
	      </el-table-column>
	      <el-table-column
	        label="图片"
	        width="200">
		      <template slot-scope="scope">
		      	<img :src="scope.row.img1" style="max-width: 100px;max-height: 40px;cursor: pointer;" @click="openImageViewer(scope.$index);"/>
		      	<img :src="scope.row.img2" style="max-width: 100px;max-height: 40px;cursor: pointer;" @click="openImageViewer(scope.$index);"/>
		      	<img :src="scope.row.img3" style="max-width: 100px;max-height: 40px;cursor: pointer;" @click="openImageViewer(scope.$index);"/>
		      	<img :src="scope.row.img4" style="max-width: 100px;max-height: 40px;cursor: pointer;" @click="openImageViewer(scope.$index);"/>
		      	<img :src="scope.row.img5" style="max-width: 100px;max-height: 40px;cursor: pointer;" @click="openImageViewer(scope.$index);"/>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism" v-if="scope.row.status==1">正常</el-button>
		      		<el-button type="danger" size="minism" v-else-if="scope.row.status==2">拒绝</el-button>
		      		<el-button type="info" size="minism" v-else-if="scope.row.status=='loading'" :loading="true">加载中</el-button>
		      		<el-button type="info" size="minism" v-else>待审核</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="时间线"
	        width="180">
		      <template slot-scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <p>创建时间: {{ scope.row.create_time }}</p>
		          <p>更新时间: {{ scope.row.update_time }}</p>
		          <div slot="reference" class="name-wrapper">
		            <el-tag size="small" type="info">{{ scope.row.create_time }}</el-tag>
		          </div>
		        </el-popover>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="180">
		      <template slot-scope="scope">
				<el-button-group class="text-nowrap">
				  <el-button type="success" size="mini" @click="setStatus(scope.row,1)" :loading="scope.row.status=='loading'"
				  v-if="scope.row.status===0">通过</el-button>
				  <el-button type="danger" size="mini" @click="openRefuseWin(1,scope.row)" :loading="scope.row.status=='loading'"
				  v-if="scope.row.status===0">拒绝</el-button>
				  <el-button type="info" size="mini" @click="openRefuseWin(1,scope.row)" :loading="scope.row.status=='loading'"
				  v-if="scope.row.status===1">取消实名</el-button>
				</el-button-group>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
	<div class="table-responsive py-3">
		<el-button-group class="text-nowrap" style="min-width: 500px">
		  <el-button type="success" size="mini" @click="setStatusALL(1)">批量通过</el-button>
		  <el-button type="danger" size="mini" @click="openRefuseWin(2)">批量拒绝</el-button>
		</el-button-group>
	</div>
</div>
<el-drawer
  title="我是标题"
  :visible.sync="dialogVisible"
  :with-header="false">
  	<div class="p-3 wrap h-100">
  		<div>
			<div class="flex pb-4">
				<div class="flex-1 block-title-before py-2">审核结果</div>
			</div>
			<el-form :model="form" label-width="0px" :rules="rules" ref="form" size="small">
				  <el-form-item prop="msg">
				    <el-input type="textarea" v-model="form.msg" class="col-12 pl-0 pr-0" :autosize="{ minRows: 4, maxRows: 20}" maxlength="200" show-word-limit></el-input>
				  </el-form-item>
			</el-form>
	  	</div>
	  	<div class="flex1" style="overflow-y: auto;">
			<div class="py-2 border-bottom mb-2" v-for="(v,index) in rowData.log">
				<div class="flex">
					<div class="text-secondary" v-if="v.status===0">提交申请</div>
					<div class="text-success" v-if="v.status===1">审核通过</div>
					<div class="text-danger" v-if="v.status===2">被驳回</div>
					<div class="flex-1 pl-2">{{v.nickname}}</div>
					<div class="small text-secondary">{{v.create_time}}</div>
				</div>
				<div class="pt-2">{{v.msg}}</div>
			</div>
	  	</div>
		<div>
		    <el-button @click="cancelRefuseWinSubmit();">取 消</el-button>
		    <el-button type="primary" @click="submitForm('form');" :loading="form.ajax">{{form.ajax?'提交中...':'提交'}}</el-button>
		</div>
  	</div>
</el-drawer>
<div class="el-image-viewer__wrapper" style="z-index: 2000;" v-if="viewer.index !== null">
	<div class="el-image-viewer__mask"></div>
	<span class="el-image-viewer__btn el-image-viewer__close" @click="closeImageViewer">
		<i class="el-icon-circle-close"></i>
	</span>
	<span class="el-image-viewer__btn el-image-viewer__prev" @click="viewerPrev">
		<i class="el-icon-arrow-left"></i>
	</span>
	<span class="el-image-viewer__btn el-image-viewer__next" @click="viewerNext">
		<i class="el-icon-arrow-right"></i>
	</span>
	<div class="el-image-viewer__btn el-image-viewer__actions" :class="{'w-400px':tableData[viewer.index].status===0}">
		<div class="el-image-viewer__actions__inner" >
			<i class="el-icon-zoom-out" @click="viewerZoomOut"></i>
			<i class="el-icon-zoom-in" @click="viewerZoomIn"></i>
			<i class="el-image-viewer__actions__divider"></i>
			<i class="el-icon-full-screen" v-if="viewer.is_screen" @click="viewerIsScreen"></i>
			<i class="el-icon-c-scale-to-original" v-else @click="viewerIsScreen"></i>
			<i class="el-image-viewer__actions__divider"></i>
			<i class="el-icon-refresh-left" @click="viewerRotateLeft"></i>
			<i class="el-icon-refresh-right" @click="viewerRotateRight"></i>
			<i class="el-image-viewer__actions__divider" v-if="tableData[viewer.index].status===0"></i>
			<el-button-group class="text-nowrap" v-if="tableData[viewer.index].status===0">
			  <el-button type="success" size="mini" @click="setStatus(tableData[viewer.index],1,viewerNext())" icon="el-icon-check" round></el-button>
			  <el-button type="danger" size="mini" @click="openRefuseWin(3,tableData[viewer.index]);" icon="el-icon-close" round></el-button>
			</el-button-group>
		</div>
	</div>
	<div class="wrap h-100 w-100">
		<div class="text-center py-2 bg-white position-relative text" >
      		<span class="text-primary mr-2" v-if="tableData[viewer.index].id_type==0">个人</span>
      		<span class="text-primary mr-2" v-if="tableData[viewer.index].id_type==1">企业</span>
      		<span class="text-primary mr-2" v-if="tableData[viewer.index].id_type==2">其他组织</span>【{{tableData[viewer.index].name}}】{{tableData[viewer.index].id_number}}
		</div>
		<div class="flex1 flex">
			<div class="el-image-viewer__canvas" v-if="tableData[viewer.index].img1">
				<img :src="tableData[viewer.index].img1" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage" @mousewheel="viewerMousewheel">
			</div>
			<div class="el-image-viewer__canvas" v-if="tableData[viewer.index].img2">
				<img :src="tableData[viewer.index].img2" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage" @mousewheel="viewerMousewheel">
			</div>
			<div class="el-image-viewer__canvas" v-if="tableData[viewer.index].img3">
				<img :src="tableData[viewer.index].img3" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage" @mousewheel="viewerMousewheel">
			</div>
			<div class="el-image-viewer__canvas" v-if="tableData[viewer.index].img4">
				<img :src="tableData[viewer.index].img4" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage" @mousewheel="viewerMousewheel">
			</div>
			<div class="el-image-viewer__canvas" v-if="tableData[viewer.index].img5">
				<img :src="tableData[viewer.index].img5" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage" @mousewheel="viewerMousewheel">
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var loading=null;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			dialogVisible:false,
			viewer:{
				index:null,
				scale:1,
				rotate:0,
				isDown:false,
				is_screen:true
			},
			multipleSelection:[],
			multipleSelectionIndex:0,
			search:{
				search_type:'uid',
				key:'',
				status:{:request()->get('status',"\'all\'")},
				id_type:'all',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			rowData:{},
			form:{
				ajax:false,
				type:1,
				msg:''
			},
			tableData:[],
	        rules: {
	          msg: [
	            { required: true, message: '请输入审核结果', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
			checkboxT(row,index){
	    		if(row.status==0){
	    			return true;
	    		}else{
	    			return false;
	    		}
	    	},
		    toggleSelection(rows) {
		        if (rows) {
		          rows.forEach(row => {
		            this.$refs.tableList.toggleRowSelection(row);
		          });
		        } else {
		          this.$refs.tableList.clearSelection();
		        }
		    },
		    handleSelectionChange(val) {
		        this.multipleSelection = val;
		    },
	    	getSearchType(){
	    		var text='UID';
	    		switch(this.search.search_type){
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'id_number':
	    				text='身份证或统一社会信用代码';
	    				break;
	    			case 'name':
	    				text='名称';
	    				break;
	    		}
	    		return text;
	    	},
	    	getViewerStyle(){
	    		var style={
	    			transform:'scale('+this.viewer.scale+') rotate('+this.viewer.rotate+'deg)'
	    		};
	    		if (this.viewer.is_screen) {
	    			style.maxHeight='100%';
	    			style.maxWidth='100%';
	    		}
	    		return style;
	    	},
	    	closeImageViewer(){
	    		document.body.style='';
	    		this.viewer.index=null;
	    	},
	    	openImageViewer(index){
	    		document.body.style="overflow: hidden;padding-right:17px;";
	    		this.viewer.index=index;
	    		this.viewer.scale=1;
	    		this.viewer.rotate=0;
	    		this.viewer.is_screen=true;
	    	},
	    	viewerMousewheel(event){
	    		if (event.deltaY>0) {
	    			if (this.viewer.scale<=0.2)return;
	    			this.viewer.scale=this.viewer.scale-0.02;
	    		}else{
	    			this.viewer.scale=this.viewer.scale+0.02;
	    		}
	    	},
	    	viewerZoomOut(){
	    		if (this.viewer.scale<=0.3)return;
	   			this.viewer.scale=this.viewer.scale-0.2;
	    	},
			viewerZoomIn(){
	   			this.viewer.scale=this.viewer.scale+0.2;
			},
	    	viewerIsScreen(index){
	    		this.viewer.scale=1;
	    		this.viewer.rotate=0;
	    		this.viewer.is_screen= !this.viewer.is_screen;
	    	},
	    	viewerRotateLeft(){
	    		this.viewer.rotate=this.viewer.rotate-90;
	    	},
			viewerRotateRight(){
	    		this.viewer.rotate=this.viewer.rotate+90;
			},
			viewerNext(){
				var index=this.viewer.index;
				if (this.tableData[this.viewer.index+1])
					this.viewer.index++;
				else
					XYBase.msg('已经是最后一张了');
			},
			viewerPrev(){
				var index=this.viewer.index;
				if (this.tableData[this.viewer.index-1])
					this.viewer.index--;
				else
					XYBase.msg('已经是第一张了');
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
	      	cancelRefuseWinSubmit(){
				this.dialogVisible=false;
	      	},
			openRefuseWin(type,row){
				this.dialogVisible=true;
				this.form.type=type;
				if (type===1 || type===3)
					this.rowData=row;
			},
			submitForm(formName) {
				var _this=this;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
				  	_this.form.ajax=true;
				  	if (_this.form.type===2) {
					  	_this.form.ajax=false;
						_this.dialogVisible=false;
				  		_this.setStatusALL(2);
				  	}else{
					  	_this.setStatus(_this.rowData,2,function(){
						  	_this.form.ajax=false;
							_this.dialogVisible=false;
						  	if (_this.form.type===3)
						  		_this.viewerNext();
					  	});
				  	}
				  } else {
					return XYBase.warning('请先把表单填写完整。');
				  }
				});
			},
			setStatus(row,status,callback){
	    		if (row.status=='loading') return;
				var _this=this;
	    		var oldStatus=row.status;
	    		row.status='loading';
				var msg='';
				if (status===2)msg='/'+_this.form.msg;
				$.ajax({
					url:'/user/real_name/setStatus/'+row.id+'/'+status+msg,
					type:'get',
					data:{},
					dataType:'json',
					error:function(err){
	    				row.status=oldStatus;
			          	XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	    				row.status=oldStatus;
						if (ret) {
							if (ret.code === 0) {
								row.status=status;
								row.update_time=ret.time;
								if (status==2)
									row.msg=_this.form.msg;
								XYBase.success(ret.msg);
								if (typeof callback=='function')
									callback();
							}else XYBase.msg(ret.msg);
						}else XYBase.error(XYBase.config.system_network_error);
					}
				})
			},
			setStatusALL(status){
				var _this=this;
				if (_this.multipleSelection.length<1)return;
				loading = XYBase.openloading();
				_this.multipleSelectionIndex=0;
				_this.setStatusALLAjax(status);
			},
			setStatusALLAjax(status){
				var _this=this;
				var D=_this.multipleSelection[_this.multipleSelectionIndex];
				if (D) {
					loading.setText((_this.multipleSelectionIndex+1)+'/'+_this.multipleSelection.length);
					var msg='';
					if (status===2)msg='/'+_this.form.msg;
					$.ajax({
						url:'/user/real_name/setStatus/'+D.id+'/'+status+msg,
						type:'get',
						data:{},
						dataType:'json',
						error:function(err){
				          	loading.close();
							_this.multipleSelectionIndex=0;
					        _this.$refs.tableList.clearSelection();
						},
						success:function(ret){
							if (ret) {
								if(ret.code === 0){
									_this.multipleSelection[_this.multipleSelectionIndex].status=status;
									_this.multipleSelection[_this.multipleSelectionIndex].update_time=ret.time;
									if (status==2)
										_this.multipleSelection[_this.multipleSelectionIndex].msg=_this.form.msg;
									_this.multipleSelectionIndex++;
									_this.setStatusALLAjax(status);
								}else{
									_this.multipleSelectionIndex++;
									_this.setStatusALLAjax(status);
								}
							}else{
								XYBase.error(XYBase.config.system_network_error);
					          	loading.close();
								_this.multipleSelectionIndex=0;
						        _this.$refs.tableList.clearSelection();
							}
						}
					})
				}else{
		          	loading.close();
					_this.multipleSelectionIndex=0;
			        _this.$refs.tableList.clearSelection();
				}
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}