{extend name="main"}
{block name="style"}
<style>
	.el-select__tags{
		overflow-x: hidden;
		flex-wrap:nowrap;
	}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="200px" :label-position="labelPosition">

	  <el-form-item label="支付通知：" prop="pay" class="hover-bg border-bottom py-3 mb-0">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.pay.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.pay,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.pay" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="简历审核通知：" prop="resume_examine" class="hover-bg border-bottom py-3 mb-0">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.resume_examine.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.resume_examine,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.resume_examine" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="职位审核通知：" prop="jobs_examine" class="hover-bg border-bottom py-3 mb-0">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.jobs_examine.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.jobs_examine,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.jobs_examine" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="个人身份认证审核通知：" prop="real_name" class="hover-bg border-bottom py-3 mb-0">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.real_name.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.real_name,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.real_name" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="企业认证审核通知：" prop="company_attestation" class="hover-bg border-bottom py-3 mb-0">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.company_attestation.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.company_attestation,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.company_attestation" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="举报简历通知：" prop="report_resume" class="hover-bg border-bottom py-3 mb-0">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.report_resume.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.report_resume,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.report_resume" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="举报职位通知：" prop="report_jobs" class="hover-bg border-bottom py-3 mb-0">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.report_jobs.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.report_jobs,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.report_jobs" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="用户反馈通知：" prop="feedback" class="hover-bg border-bottom py-3">
	  	<el-tag
		  :key="item.id"
		  v-for="item in admin"
		  v-if="form.feedback.indexOf(item.id)!==-1"
		  class="mr-1"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(form.feedback,item.id)">
		  {{item.nickname}}
		</el-tag>
		<el-select v-model="form.feedback" multiple collapse-tags placeholder="选择选择管理员">
		    <el-option
		      v-for="item in admin"
		      :key="item.id"
		      :label="item.nickname"
		      :value="item.id">
		      <div class="flex">
		      	<div class="flex-1">{{item.nickname}}</div>
		      	<div class="small text-secondary pl-2">{{item.title}}</div>
		      </div>
		    </el-option>
		</el-select>
	  </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>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="admin"}
	var admin=[];
	{else/}
	var admin={:json_encode($admin,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var formData={
		'pay':[],
		'resume_examine':[],
		'jobs_examine':[],
		'real_name':[],
		'company_attestation':[],
		'report_resume':[],
		'report_jobs':[],
		'feedback':[],
	};
	{else/}
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			admin:admin,
			form:formData,
		    rules: {
		    }
		},
		watch:{
		    view:XYBase.viewWatch
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			handleClose(row,val){
				row.splice(row.indexOf(val), 1);
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_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);
									window.location.reload();
								}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}