${Scripts.src("/zinc/layui/layui.js")}
<link rel="stylesheet" href="../zinc/layui/css/layui.css"/>
${Scripts.src(zhiqim_uploadlarge.js)}
<style>
	input::-webkit-input-placeholder {
	    font-size: 12px;
	}
	xm-select div:not(span) {
		line-height: inherit;
	}
	.content {
		display: flex;
		justify-content: space-between;
	}

	.content td {
		padding-right: 0 !important;
	}
	
	.profileTable td {
		padding-left: 5px !important;
	}
	
	.item {
		padding: 1em 0 0 1em;
	    width: 33%;
	    position: relative;
	}
	
	.itemCtrBar {
	    right: 0;
	    bottom: 0;
	    left: 0;
	    display: none;
	}
	
	.item .showing {
	    content: url(../ztmpl/zhiqim_manager/showing.png);
	    position: absolute;
	    width: 50px;
	    left: 1em;
	    top: 1em;
	}
	
	.item .reviewing {
	    content: url(../ztmpl/zhiqim_manager/reviewing.png);
	    position: absolute;
	    width: 50px;
	    left: 1em;
	    top: 1em;
	}
	
	.item .rejected {
	    content: url(../ztmpl/zhiqim_manager/rejected.png);
	    position: absolute;
	    width: 50px;
	    left: 1em;
	    top: 1em;
	}
	
	textarea::-ms-input-placeholder{
        text-align: center;
        line-height: 140px
    }
    
    textarea::-webkit-input-placeholder{
        text-align: center;
        line-height: 140px
    }
    
    .iframenav-tab-item {
    	border: 1px solid #d3d3d3;
    	padding: 0 30px 0 10px;
    	margin-right: 10px;
    }
</style>
<script>
function doModifyAvatar()
{//修改头像
    var dialog = new Z.Dialog();
    dialog.title = "修改头像";
    dialog.url = "modifyAvatar.htm";
    dialog.width = 800;
    dialog.height = 560;
    dialog.fixed = true;
    dialog.execute();
}

function doModifyPass()
{//修改密码
    var dialog = new Z.Dialog();
    dialog.title = "修改登录密码";
    dialog.url = "modifyPassword.htm";
    dialog.width = 650;
    dialog.height = 280;
    dialog.fixed = true;
    dialog.execute();
}

function doModifyMobile()
{//修改手机号
    var dialog = new Z.Dialog();
    dialog.title = "修改手机号";
    dialog.url = "modifyMobile.htm";
    dialog.width = 530;
    dialog.height = 220;
    dialog.fixed = true;
    dialog.execute();
}

function doModifyOrderNum(operatorParam)
{//修改接单数量
    var dialog = new Z.Dialog();
    dialog.title = "修改接单数量";
    dialog.url = "modifyOrderNum.htm?operatorParam=" + operatorParam;
    dialog.width = 530;
    dialog.height = 220;
    dialog.fixed = true;
    dialog.execute();
}

function doModifyWxcode()
{// 修改个人微信
    var dialog = new Z.Dialog();
    dialog.title = "修改微信";
    dialog.url = "modifyWxcode.htm";
    dialog.width = 530;
    dialog.height = 220;
    dialog.fixed = true;
    dialog.execute();
}

function doEditPersonalProfile(elem){
	if(Z(elem).text() == "编辑"){
		document.getElementById("personalProfile").readOnly = false;
		Z(elem).text("提交审核");
	} else {
		var personalProfile = Z("#personalProfile").val();
		if(personalProfile.length == 0){
			Z.alert("个人简介不能为空");
			return;
		} else if(personalProfile.length > 300){
			Z.alert("个人简介最多不能超过300个字符");
			return;
		} 
		var ajax = new Z.Ajax();
	    ajax.setContextPath("${context.getContextPath()}");
	    ajax.setClassName("DesignerProfilePresenter");
	    ajax.setMethodName("doSubmitReview");
	    ajax.addParam("personalProfile",personalProfile);
	    ajax.setFailureAlert();
	    ajax.setSuccess(function(){
	    	parent.Z.tips("提交成功");
        	location.reload();
	    });
	    ajax.execute();
	}
}

function doAddLabel(){
	if(Z(".iframenav-tab-item").length > 10){
		Z.alert("标签最大不能超过10个");
		return;
	}
	Z.prompt("请输入标签内容", "", function(value){
    	if(value && value.length < 6){
    		var ajax = new Z.Ajax();
		    ajax.setContextPath("${context.getContextPath()}");
		    ajax.setClassName("DesignerProfilePresenter");
		    ajax.setMethodName("addDesignerLabel");
		    ajax.addParam("label",value);
		    ajax.setFailureAlert();
		    ajax.setSuccess(function(){
		    	var addLabel = document.getElementById("addLabel");
	    		var newLabel = document.createElement("li");
	    		newLabel.className = "iframenav-tab-item";
	    		newLabel.innerHTML = "<span>" + value + '</span><i class="z-font z-error" onclick="doDeleteLabel(\''+ value +'\',this)"></i>';
	    		addLabel.parentElement.insertBefore(newLabel,addLabel);
		    });
		    ajax.execute();
    	} else {
    		Z.alert("标签内容不能为空且最多5个字符");
    	}	
    });
}

function doDeleteLabel(label,elem){
	var ajax = new Z.Ajax();
    ajax.setContextPath("${context.getContextPath()}");
    ajax.setClassName("DesignerProfilePresenter");
    ajax.setMethodName("doDeleteLabel");
    ajax.addParam("label",label);
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
    	Z(elem).parent().remove();
    });
    ajax.execute();
}
layui.config({
        base: '../zinc/module/'
    }).extend({
        xmSelect: 'xmSelect/xm-select',
    }).use(['jquery','xmSelect'], function () {
    	var $ = layui.$;
    	var xmSelect = layui.xmSelect;
    	var workExperienceList = [{"name":"初入设计行业"},{"name":"图文广告点"},{"name":"淘宝等线上设计"},{"name":"品牌设计公司"},{"name":"综合广告公司"},{"name":"企业设计岗位"}];
		var designTypeList = [{"name":"名片类"},{"name":"海报类"},{"name":"不干胶类"},{"name":"卡片类"},{"name":"条幅类"},{"name":"帆布类"},{"name":"画册类"},{"name":"包装类"},{"name":"logo设计"},{"name":"画册设计"},{"name":"UI设计"},{"name":"网页设计"}];
		var skillScopeList = [{"name":"CDR"},{"name":"PS"},{"name":"AI"},{"name":"3Dmax"},{"name":"C4D"},{"name":"CAD"}];
    	
    	var dbWorkExperience = '${course.getWorkExperience()}';
    	var dbDesignType = '${course.getDesignType()}';
    	var dbSkillScope = '${course.getSkillScope()}';
    	
    	var workExperience = xmSelect.render({
		    el: '#workExperience', 
		    toolbar: {show: true},
		    theme: {color: '#28a3ef'},
		    filterable: true,
		    autoRow: true,
		    prop: {
				name: 'name',
				value: 'name',
			},
			initValue: dbWorkExperience.split(","),
		    data: workExperienceList
		});
    	var designType = xmSelect.render({
		    el: '#designType', 
		    toolbar: {show: true},
		    theme: {color: '#28a3ef'},
		    filterable: true,
		    autoRow: true,
		    prop: {
				name: 'name',
				value: 'name',
			},
			initValue: dbDesignType.split(","),
		    data: designTypeList
		});
		var skillScope = xmSelect.render({
		    el: '#skillScope', 
		    toolbar: {show: true},
		    theme: {color: '#28a3ef'},
		    filterable: true,
		    autoRow: true,
		    prop: {
				name: 'name',
				value: 'name',
			},
			initValue: dbSkillScope.split(","),
		    data: skillScopeList
		});
		
		$("#designerCourseSubmit").click(function(){
			designerCourseSubmit();
		});
		
		function designerCourseSubmit()
		{//设计师个人经历信息提交
			console.log(workExperience.getValue("value")); 
			
			var workExperiences = workExperience.getValue("value");
			if(workExperiences.length <= 0){
				Z.alert("为了您更好的工作体验，请完整填写个人信息~");
				return;
			}
			
			var skillScopes = skillScope.getValue("value");
			if(skillScopes.length <= 0){
				Z.alert("为了您更好的工作体验，请完整填写个人信息~");
				return;
			}
		
			var designTypes = designType.getValue("value");
			if(designTypes.length <= 0){
				Z.alert("为了您更好的工作体验，请完整填写个人信息~");
				return;
			}
			
			var workDuration = Z("#workDuration").val();
			if(workDuration == ""){
				Z.alert("为了您更好的工作体验，请完整填写个人信息~");
				return;
			}
			
			var workStatus = Z("#workStatus").val();
			if(workStatus == ""){
				Z.alert("为了您更好的工作体验，请完整填写个人信息~");
				return;
			}
			
			var receiveType = Z("#receiveType").val();
			if(receiveType == ""){
				Z.alert("为了您更好的工作体验，请完整填写个人信息~");
				return;
			}
			
			var receiveAccount = Z("#receiveAccount").val();
			if(receiveAccount.length <= 0)
			{
				Z.alert("为了您更好的工作体验，请完整填写个人信息~");
				return;
			}
			
			Z.confirm("提交前请仔细检查核对哦，确认提交吗？",function(){
				var ajax = new Z.Ajax();
			    ajax.setContextPath("${context.getContextPath()}");
			    ajax.setClassName("DesignerProfilePresenter");
			    ajax.setMethodName("doDesignerCourseSubmit");
			    ajax.addParam("workExperience",workExperiences.join(","));
			    ajax.addParam("skillScope",skillScopes.join(","));
			    ajax.addParam("designType",designTypes.join(","));
			    ajax.addParam("workDuration",workDuration);
			    ajax.addParam("workStatus",workStatus);
			    ajax.addParam("receiveType",receiveType);
			    ajax.addParam("receiveAccount",receiveAccount);
			    ajax.setFailureAlert();
			    ajax.setSuccess(function(){
			    	Z.success("保存成功");
			    });
			    ajax.execute();
			});
		}
});
</script>
${zhiqim_manager_breadcrumb_name("个人中心")}
${zhiqim_manager_content()}
<div style="width:60%;">
	<!-- 基本信息 -->
	<table class="z-table z-bordered-line z-bg-white z-pd20 zi-bd-l zi-bd-r profileTable">
	<tr class="z-bg-gray">
	    <td class="z-bold z-px14 zi-pd16 zi-pd-l20" colspan="5" style="padding: 20px !important;">账号信息</td>
	</tr>
	<tr>
	    <td rowspan="2" width="10%" style="text-align: center;padding-left: 0 !important;">
	         <img class="z-w70 z-h70 z-bd-rd50p z-pointer" title="点击修改" src="${sessionUser.getAvatar100()}" onclick="doModifyAvatar();">
	    </td>
	    <td width="8%">用户昵称：</td>
		<td width="20%">#{operator.getOperatorCode()}</td>
		<td width="14%">登录密码：</td>
		<td width="20%">******** &nbsp;<span class="z-px12 z-text-orange z-pointer" onclick="doModifyPass();">修改</span></td>
	</tr>
	<tr>
		<td width="8%">手机号码：</td>
		<td><#if Validates.isNotEmpty(operator.getOperatorMobile())>${operator.getOperatorMobile()}<span class="z-px12 z-text-orange z-pointer" onclick="doModifyMobile();"> &nbsp;修改</span><#else><span class="z-px14 z-color-999 z-pointer" onclick="doModifyMobile();">点击绑定</span></#if></span></td>
		<td width="14%">个人微信：</td>
		<td width="20%">
			<#if Validates.isNotEmpty(operator.getOperatorWxcode())>${operator.getOperatorWxcode()}<span class="z-px12 z-text-orange z-pointer" onclick="doModifyWxcode();"> &nbsp;修改</span><#else><span class="z-px14 z-color-999 z-pointer" onclick="doModifyWxcode();">点击绑定</span></#if></td>
		</td>
	</tr>
	</table>
	<!-- 接单配置 -->
	<table class="z-table z-bordered-line z-bg-white z-pd20 zi-bd-l zi-bd-r z-mg-t10">
		<tr class="z-bg-gray">
		    <td class="z-bold z-px14 zi-pd16 zi-pd-l20" colspan="4">接单配置</td>
		</tr>
		<tr>
		    <td width="15%">最大同时接单量：</td>
			<td width="10%"><#if Validates.isNotEmpty(operator.getOperatorParam())>${operator.getOperatorParam()}<#else>0</#if>&nbsp;
			     <span class="z-px12 z-text-orange z-pointer" onclick="doModifyOrderNum(<#if Validates.isNotEmpty(operator.getOperatorParam())>${operator.getOperatorParam()}<#else>0</#if>);">修改</span>
			</td>
			<td width="*" colspan="2"><span class="z-px14 z-color-red">
			       说明：正在设计状态订单总数超过最大同时接单数时,系统将不会自动派单（大于0规则才会生效）
			   </span></td>
		</tr>
	</table>
	<table class="z-table z-bordered-line z-bg-white z-pd20 zi-bd-l zi-bd-r z-mg-t10">
		<tr class="z-h40">
			<td class="z-bg-gray z-bold z-px14" colspan="3">个人简介</td>
		</tr>
		<tr>
			<td>
				<div style="display: flex;align-items: center;"><span class="z-color-red">*</span>工作经历&nbsp;<div id="workExperience" style="display: inline-block;width: 205px;"></div></div>
			</td>
			<td>
				<div style="display: flex;align-items: center;"><span class="z-color-red">*</span>软件能力&nbsp;<div id="skillScope" style="display: inline-block;width: 200px;"></div></div>
			</td>
			<td>
				<div style="display: flex;align-items: center;"><span class="z-color-red">*</span>擅长设计&nbsp;<div id="designType" style="display: inline-block;width: 200px;"></div></div>
			</td>
		</tr>
		<tr>
			<td>
				<span class="z-color-red">*</span>
				工作年限&nbsp;<select name="workDuration" id="workDuration" class="z-select z-w200" data-role="z-select-search" data-class="${zmr_color_class}">
					<option value="">请选择</option>
					<option value="应届" <#if course.getWorkDuration() == "应届">selected</#if>>应届</option>
					<option value="1年以内" <#if course.getWorkDuration() == "1年以内">selected</#if>>1年以内</option>
					<option value="1-2年" <#if course.getWorkDuration() == "1-2年">selected</#if>>1-2年</option>
					<option value="2-3年" <#if course.getWorkDuration() == "2-3年">selected</#if>>2-3年</option>
					<option value="3年以上" <#if course.getWorkDuration() == "3年以上">selected</#if>>3年以上</option>
					<option value="5年以上" <#if course.getWorkDuration() == "5年以上">selected</#if>>5年以上</option>
					<option value="10年以上" <#if course.getWorkDuration() == "10年以上">selected</#if>>10年以上</option>
				</select>
			</td>
			<td>
				<span class="z-color-red">*</span>
				在职情况&nbsp;<select name="workStatus" id="workStatus" class="z-select z-w200" data-role="z-select-search" data-class="${zmr_color_class}">
					<option value="">请选择</option>
					<option value="在职" <#if course.getWorkStatus() == "在职">selected</#if>>在职</option>
					<option value="待业" <#if course.getWorkStatus() == "待业">selected</#if>>待业</option>
					<option value="自由职业" <#if course.getWorkStatus() == "自由职业">selected</#if>>自由职业</option>
					<option value="自有工作室" <#if course.getWorkStatus() == "自有工作室">selected</#if>>自有工作室</option>
				</select>
			</td>
			<td>
				<span class="z-color-red">*</span>
				收款方式&nbsp;<select name="receiveType" id="receiveType" class="z-select z-w200" data-role="z-select-search" data-class="${zmr_color_class}">
					<option value="">请选择</option>
					<option value="支付宝" <#if course.getReceiveType() == "支付宝">selected</#if>>支付宝</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<span class="z-color-red">*</span>支付宝账号&nbsp;
				<input type="text" name="receiveAccount" id="receiveAccount" class="z-input ${zmr_color_class} z-w200" value="${course.getReceiveAccount()}" placeholder="手机号/邮箱">
			</td>
			<td colspan="2"></td>
		</tr>
		<tr >
			<td colspan="3" align="center"><button class="z-button z-w120 z-mg-r15 ${zmr_color_class}" id="designerCourseSubmit"><i class="z-font z-save"></i>保存提交</button></td>
		</tr>
	</table>
</div>

${zhiqim_manager_content_end()}