// ===== 登录门禁 + 修改密码 =====
var ST_KEY="qw_employee_token";
var EMP_PWD_KEY="qw_emp_passwords";
var DEV_KEY="qw_device_id";

function getDeviceId(){
  var id=localStorage.getItem(DEV_KEY);
  if(!id){id="dev_"+Math.random().toString(36).substring(2,10)+"_"+Date.now();localStorage.setItem(DEV_KEY,id)}
  return id;
}
function getEmpPasswords(){
  try{return JSON.parse(localStorage.getItem(EMP_PWD_KEY)||"{}")}catch(e){return{}}
}
function saveEmpPasswords(p){localStorage.setItem(EMP_PWD_KEY,JSON.stringify(p))}
function hasCustomPwd(empNo){var p=getEmpPasswords();return p[empNo]&&p[empNo]!=="123"}
function getCustomPwd(empNo){var p=getEmpPasswords();return p[empNo]||null}
function getToken(){
  try{
    var raw=localStorage.getItem(ST_KEY);
    if(!raw)return null;
    var t=JSON.parse(raw);
    if(Date.now()-t.ts>7*24*60*60*1000){localStorage.removeItem(ST_KEY);return null}
    return t;
  }catch(e){return null}
}
function hashPwd(pwd){
  var h=0;
  for(var i=0;i<pwd.length;i++){h=((h<<5)-h+pwd.charCodeAt(i))|0}
  return"h_"+Math.abs(h).toString(36);
}
function showToast(msg,type){
  var t=document.createElement("div");
  t.className="toast "+(type||"");
  t.textContent=msg;
  document.body.appendChild(t);
  setTimeout(function(){t.remove()},2500);
}

function showLoginGate(){
  document.getElementById("app").innerHTML='<div class="emp-login-gate"><div class="lg-card">'
    +'<div class="lg-icon">🏪</div>'
    +'<h2>企旺快服 · 员工成长</h2>'
    +'<div class="lg-sub">品牌旺IP陪跑系统 · 请选择身份登录</div>'
    +'<a href="boss.html">前往员工登录页 →</a>'
    +'</div></div>';
}

function checkLogin(){
  var t=getToken();
  if(!t){showLoginGate();return}
  var empNo=t.emp_no;
  if(!empNo){showLoginGate();return}
  document.getElementById("pwdBar").style.display="flex";
  document.getElementById("changePwdInfo").innerHTML="当前用户：<b>"+empNo+" "+t.emp_name+"</b>";
}

function openChangePwd(){
  var t=getToken();
  if(!t){showToast("请先登录","error");return}
  document.getElementById("cpOldPwd").value="";
  document.getElementById("cpNewPwd").value="";
  document.getElementById("cpNewPwd2").value="";
  document.getElementById("cpErr").style.display="none";
  document.getElementById("changePwdModal").classList.add("show");
}

function closeChangePwd(){
  document.getElementById("changePwdModal").classList.remove("show");
}

function changePassword(){
  var t=getToken();
  if(!t){showToast("请先登录","error");return}
  var oldPwd=document.getElementById("cpOldPwd").value;
  var newPwd=document.getElementById("cpNewPwd").value;
  var newPwd2=document.getElementById("cpNewPwd2").value;
  var errEl=document.getElementById("cpErr");
  errEl.style.display="none";
  var empNo=t.emp_no;
  var defaultPwd=t.emp_defaultPwd||"123";
  var currentPwd=hasCustomPwd(empNo)?getCustomPwd(empNo):defaultPwd;
  if(hashPwd(oldPwd)!==hashPwd(currentPwd)){
    errEl.textContent="当前密码错误";errEl.style.display="block";return;
  }
  if(newPwd.length<4){
    errEl.textContent="新密码至少4位";errEl.style.display="block";return;
  }
  if(newPwd!==newPwd2){
    errEl.textContent="两次输入的新密码不一致";errEl.style.display="block";return;
  }
  var p=getEmpPasswords();
  p[empNo]=newPwd;
  saveEmpPasswords(p);
  closeChangePwd();
  showToast("✅ 密码修改成功","success");
}


</script>

<!-- 底部修改密码栏 -->
<div class="change-pwd-btn-bar" id="pwdBar">
  <button class="cpb-btn" onclick="openChangePwd()">🔒 修改密码</button>
</div>
<!-- 修改密码弹窗 -->
<div class="modal-overlay" id="changePwdModal">
<div class="modal-box">
  <button class="mc-close" onclick="closeChangePwd()">✕</button>
  <h3>🔒 修改密码</h3>
  <div id="changePwdInfo" style="font-size:12px;color:#666;margin-bottom:12px"></div>
  <div class="form-group"><label>当前密码</label><input id="cpOldPwd" type="password" placeholder="输入当前密码"></div>
  <div class="form-group"><label>新密码</label><input id="cpNewPwd" type="password" placeholder="输入新密码（至少4位）"></div>
  <div class="form-group"><label>确认新密码</label><input id="cpNewPwd2" type="password" placeholder="再次输入新密码"></div>
  <div id="cpErr">当前密码错误</div>
  <button class="cpb-btn" style="margin-top:10px" onclick="changePassword()">确认修改</button>
  <div style="height:30px"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>德可旺 · 员工成长</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:#f8f6f2;color:#2c1810;min-height:100vh;padding-bottom:20px}
.top{background:#c0392b;color:#fff;padding:18px 16px;display:flex;justify-content:space-between;align-items:center}
.top .brand{font-size:18px;font-weight:900}
.top .sub{font-size:10px;opacity:.75;margin-top:2px}
.top select{background:rgba(255,255,255,.12);color:#fff;border:none;padding:6px 10px;border-radius:6px;font-size:12px;font-family:inherit}
.top select option{color:#333}
.bar{display:flex;background:#a93226;color:#fff;text-align:center;font-size:11px;padding:8px 0}
.bar span{flex:1;border-right:1px solid rgba(255,255,255,.2)}
.bar span:last-child{border:none}

.tabs{display:flex;gap:2px;background:#fff;margin:8px 12px;border-radius:10px;padding:4px;overflow-x:auto;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tab{border:none;background:none;padding:9px 12px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;color:#999;font-family:inherit;cursor:pointer;flex-shrink:0}
.tab.active{background:#c0392b;color:#fff}

.section{padding:10px 12px 4px}
.section h3{font-size:14px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.section h3::before{content:'';display:inline-block;width:3px;height:14px;background:#c0392b;border-radius:2px}

.card{background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.03)}

/* Stats row */
.stat-row{display:flex;gap:8px;padding:0 12px;margin-bottom:8px}
.stat-item{flex:1;background:#fff;border-radius:10px;padding:12px 8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.stat-item .sv{font-size:22px;font-weight:900;color:#c0392b}
.stat-item .sl{font-size:10px;color:#999;margin-top:2px}

/* Rank */
.rank{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.rank .row{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid #f5f0e8;gap:10px}
.rank .row:last-child{border:none}
.rank .rn{width:22px;height:22px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.rank .rn.top3{background:#c0392b;color:#fff}
.rank .info{flex:1;min-width:0}
.rank .name{font-size:14px;font-weight:600}
.rank .sub{font-size:10px;color:#999;margin-top:1px}
.rank .val{font-size:16px;font-weight:800;color:#c0392b;flex-shrink:0}

/* Badge */
.badge{display:inline-block;padding:2px 7px;border-radius:8px;font-size:10px;font-weight:700}
.bg-M1,.bg-M2{background:#f0f0f0;color:#888}
.bg-M3,.bg-M4{background:#e8f0fe;color:#4285f4}
.bg-M5,.bg-M6{background:#fce8e6;color:#c0392b}
.bg-M7{background:#fef7e0;color:#e67e22}

/* Table */
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:8px 6px;color:#999;font-size:10px;font-weight:600;border-bottom:1px solid #f5f0e8}
td{padding:9px 6px;border-bottom:1px solid #f5f0e8;font-size:12px}
tr:last-child td{border:none}

/* Progress */
.progress{height:6px;background:#f5f0e8;border-radius:3px;overflow:hidden;margin:6px 0}
.progress div{height:100%;background:#c0392b;border-radius:3px;transition:.5s}

/* Level bar */
.level-line{display:flex;align-items:center;gap:2px;margin:10px 0}
.level-step{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:#f5f0e8;color:#999}
.level-step.done{background:#c0392b;color:#fff}
.level-step.cur{background:#fff;color:#c0392b;border:2px solid #c0392b}
.level-dash{flex:1;height:2px;background:#e8e0d8}
.level-dash.done{background:#c0392b}

/* Alert */
.alert{padding:10px 12px;border-radius:8px;font-size:11px;margin-bottom:10px;background:#fef9f0;color:#b8750f;border:1px solid #f5e6c8}

/* Rot card */
.rot-card{background:#fefaf5;border:1px solid #f0e0d0;border-radius:10px;padding:12px;margin-bottom:8px}
.rot-card .rc-head{display:flex;justify-content:space-between;margin-bottom:4px}
.rot-card .rc-flow{font-size:12px;color:#999;margin:4px 0}

/* Grid */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* Pair */
.pair{background:#fff;border-radius:10px;padding:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.pair .pi{font-size:32px;margin-bottom:4px}
.pair .pn{font-size:14px;font-weight:700}
.pair .ps{font-size:11px;color:#999;margin-top:2px}

/* Bottom */
.bottom{text-align:center;padding:16px;color:#ccc;font-size:11px}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;z-index:999;pointer-events:none;animation:in .3s}
@keyframes in{from{opacity:0;transform:translateX(-50%) translateY(-10px)}}
</style>

<style>
/* 登录门禁 */
.emp-login-gate{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.emp-login-gate .lg-card{background:#fff;border-radius:16px;padding:32px 24px;width:100%;max-width:360px;box-shadow:0 4px 24px rgba(0,0,0,.08);text-align:center}
.emp-login-gate .lg-card .lg-icon{font-size:48px;margin-bottom:8px}
.emp-login-gate .lg-card h2{color:#c0392b;font-weight:800;margin-bottom:4px}
.emp-login-gate .lg-card .lg-sub{color:#999;font-size:12px;margin-bottom:20px}
.emp-login-gate .lg-card a{display:inline-block;padding:12px 32px;background:#c0392b;color:#fff;border-radius:10px;font-weight:700;text-decoration:none;font-size:14px}

/* 底部修改密码栏 */
.change-pwd-btn-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #f0e8d8;padding:10px 16px;display:none;z-index:100}
.change-pwd-btn-bar .cpb-btn{width:100%;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;background:#c0392b;color:#fff}

/* 弹窗 */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:flex-end;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:420px;max-height:85vh;overflow-y:auto;padding:18px;animation:slideUp .3s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-box .mc-close{float:right;font-size:20px;cursor:pointer;border:none;background:none;color:#999}
.modal-box h3{font-size:16px;font-weight:800;margin-bottom:14px}
.form-group{margin-bottom:10px}
.form-group label{display:block;font-size:11px;font-weight:600;color:#666;margin-bottom:4px}
.form-group input{width:100%;padding:10px 12px;border:1.5px solid #e8e0d8;border-radius:8px;font-size:13px;font-family:inherit;background:#faf9f6}
.form-group input:focus{outline:none;border-color:#c0392b}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;z-index:999;animation:toastIn .3s forwards;pointer-events:none}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1}}
.toast.success{background:#27ae60}
.toast.error{background:#c0392b}
#cpErr{color:#c0392b;font-size:11px;margin-top:6px;display:none}
</style>

    <!-- 密码保护 -->
    <script>
    const AUTH_PASSWORD = 'tang2026qwpp';
    const STORAGE_KEY = 'xwznt.online_auth';
    </script>

    <!-- 密码保护界面 -->
    <div id="loginOverlay" style="position:fixed;inset:0;z-index:9999;background:#0a0a1a;display:flex;align-items:center;justify-content:center;flex-direction:column">
      <div class="login-box" style="background:#111;border:1px solid #333;border-radius:16px;padding:40px;text-align:center;width:360px;max-width:90vw">
        <h2 style="color:#ffd700;margin-bottom:8px;font-size:22px">🔒 xwznt.online</h2>
        <p style="color:#888;font-size:13px;margin-bottom:24px">请输入访问密码</p>
        <input type="password" id="passwordInput" placeholder="输入密码" style="width:100%;padding:12px 16px;background:#1a1a1a;border:1px solid #333;border-radius:8px;color:#fff;font-size:16px;text-align:center;letter-spacing:4px;outline:none" onkeydown="if(event.key==='Enter')checkAuth()">
        <button onclick="checkAuth()" style="width:100%;padding:12px;background:#e94560;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;margin-top:16px;font-weight:600">🔓 验证进入</button>
        <div id="loginError" style="color:#ef4444;font-size:13px;margin-top:12px;display:none">密码错误，请重试</div>
      </div>
    </div>
    <script>
    (function() {
        if (localStorage.getItem(STORAGE_KEY)) {
            document.getElementById('loginOverlay').style.display = 'none';
        }
    })();

    function checkAuth() {
        const pw = document.getElementById('passwordInput').value;
        if (pw === AUTH_PASSWORD) {
            localStorage.setItem(STORAGE_KEY, AUTH_PASSWORD);
            document.getElementById('loginOverlay').style.display = 'none';
            document.getElementById('loginError').style.display = 'none';
        } else {
            document.getElementById('loginError').style.display = 'block';
        }
    }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>德可旺 · 员工成长</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:#f8f6f2;color:#2c1810;min-height:100vh;padding-bottom:20px}
.top{background:#c0392b;color:#fff;padding:18px 16px;display:flex;justify-content:space-between;align-items:center}
.top .brand{font-size:18px;font-weight:900}
.top .sub{font-size:10px;opacity:.75;margin-top:2px}
.top select{background:rgba(255,255,255,.12);color:#fff;border:none;padding:6px 10px;border-radius:6px;font-size:12px;font-family:inherit}
.top select option{color:#333}
.bar{display:flex;background:#a93226;color:#fff;text-align:center;font-size:11px;padding:8px 0}
.bar span{flex:1;border-right:1px solid rgba(255,255,255,.2)}
.bar span:last-child{border:none}

.tabs{display:flex;gap:2px;background:#fff;margin:8px 12px;border-radius:10px;padding:4px;overflow-x:auto;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tab{border:none;background:none;padding:9px 12px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;color:#999;font-family:inherit;cursor:pointer;flex-shrink:0}
.tab.active{background:#c0392b;color:#fff}

.section{padding:10px 12px 4px}
.section h3{font-size:14px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.section h3::before{content:'';display:inline-block;width:3px;height:14px;background:#c0392b;border-radius:2px}

.card{background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.03)}

/* Stats row */
.stat-row{display:flex;gap:8px;padding:0 12px;margin-bottom:8px}
.stat-item{flex:1;background:#fff;border-radius:10px;padding:12px 8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.stat-item .sv{font-size:22px;font-weight:900;color:#c0392b}
.stat-item .sl{font-size:10px;color:#999;margin-top:2px}

/* Rank */
.rank{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.rank .row{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid #f5f0e8;gap:10px}
.rank .row:last-child{border:none}
.rank .rn{width:22px;height:22px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.rank .rn.top3{background:#c0392b;color:#fff}
.rank .info{flex:1;min-width:0}
.rank .name{font-size:14px;font-weight:600}
.rank .sub{font-size:10px;color:#999;margin-top:1px}
.rank .val{font-size:16px;font-weight:800;color:#c0392b;flex-shrink:0}

/* Badge */
.badge{display:inline-block;padding:2px 7px;border-radius:8px;font-size:10px;font-weight:700}
.bg-M1,.bg-M2{background:#f0f0f0;color:#888}
.bg-M3,.bg-M4{background:#e8f0fe;color:#4285f4}
.bg-M5,.bg-M6{background:#fce8e6;color:#c0392b}
.bg-M7{background:#fef7e0;color:#e67e22}

/* Table */
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:8px 6px;color:#999;font-size:10px;font-weight:600;border-bottom:1px solid #f5f0e8}
td{padding:9px 6px;border-bottom:1px solid #f5f0e8;font-size:12px}
tr:last-child td{border:none}

/* Progress */
.progress{height:6px;background:#f5f0e8;border-radius:3px;overflow:hidden;margin:6px 0}
.progress div{height:100%;background:#c0392b;border-radius:3px;transition:.5s}

/* Level bar */
.level-line{display:flex;align-items:center;gap:2px;margin:10px 0}
.level-step{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:#f5f0e8;color:#999}
.level-step.done{background:#c0392b;color:#fff}
.level-step.cur{background:#fff;color:#c0392b;border:2px solid #c0392b}
.level-dash{flex:1;height:2px;background:#e8e0d8}
.level-dash.done{background:#c0392b}

/* Alert */
.alert{padding:10px 12px;border-radius:8px;font-size:11px;margin-bottom:10px;background:#fef9f0;color:#b8750f;border:1px solid #f5e6c8}

/* Rot card */
.rot-card{background:#fefaf5;border:1px solid #f0e0d0;border-radius:10px;padding:12px;margin-bottom:8px}
.rot-card .rc-head{display:flex;justify-content:space-between;margin-bottom:4px}
.rot-card .rc-flow{font-size:12px;color:#999;margin:4px 0}

/* Grid */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* Pair */
.pair{background:#fff;border-radius:10px;padding:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.pair .pi{font-size:32px;margin-bottom:4px}
.pair .pn{font-size:14px;font-weight:700}
.pair .ps{font-size:11px;color:#999;margin-top:2px}

/* Bottom */
.bottom{text-align:center;padding:16px;color:#ccc;font-size:11px}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;z-index:999;pointer-events:none;animation:in .3s}
@keyframes in{from{opacity:0;transform:translateX(-50%) translateY(-10px)}}
</style>

<style>
/* 登录门禁 */
.emp-login-gate{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.emp-login-gate .lg-card{background:#fff;border-radius:16px;padding:32px 24px;width:100%;max-width:360px;box-shadow:0 4px 24px rgba(0,0,0,.08);text-align:center}
.emp-login-gate .lg-card .lg-icon{font-size:48px;margin-bottom:8px}
.emp-login-gate .lg-card h2{color:#c0392b;font-weight:800;margin-bottom:4px}
.emp-login-gate .lg-card .lg-sub{color:#999;font-size:12px;margin-bottom:20px}
.emp-login-gate .lg-card a{display:inline-block;padding:12px 32px;background:#c0392b;color:#fff;border-radius:10px;font-weight:700;text-decoration:none;font-size:14px}

/* 底部修改密码栏 */
.change-pwd-btn-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #f0e8d8;padding:10px 16px;display:none;z-index:100}
.change-pwd-btn-bar .cpb-btn{width:100%;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;background:#c0392b;color:#fff}

/* 弹窗 */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:flex-end;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:420px;max-height:85vh;overflow-y:auto;padding:18px;animation:slideUp .3s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-box .mc-close{float:right;font-size:20px;cursor:pointer;border:none;background:none;color:#999}
.modal-box h3{font-size:16px;font-weight:800;margin-bottom:14px}
.form-group{margin-bottom:10px}
.form-group label{display:block;font-size:11px;font-weight:600;color:#666;margin-bottom:4px}
.form-group input{width:100%;padding:10px 12px;border:1.5px solid #e8e0d8;border-radius:8px;font-size:13px;font-family:inherit;background:#faf9f6}
.form-group input:focus{outline:none;border-color:#c0392b}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;z-index:999;animation:toastIn .3s forwards;pointer-events:none}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1}}
.toast.success{background:#27ae60}
.toast.error{background:#c0392b}
#cpErr{color:#c0392b;font-size:11px;margin-top:6px;display:none}
</style>
</head>
<body>

<div id="app"></div>

<script>
// ===== DATA =====
const D={
  emps:[
    {id:1,emp_no:'DK0001',name:'张建国',level:'M7',store_name:'崇德府店',hire_date:'2024-01-15',base_salary:'6000',graduated_count:2,active_apprentice:0},
    {id:2,emp_no:'DK0002',name:'李明辉',level:'M6',store_name:'崇德府店',hire_date:'2024-03-01',base_salary:'5000',graduated_count:1,active_apprentice:2},
    {id:3,emp_no:'DK0003',name:'王芳',level:'M5',store_name:'崇德府店',hire_date:'2024-06-10',base_salary:'4500',graduated_count:2,active_apprentice:1},
    {id:6,emp_no:'DK0006',name:'陈大伟',level:'M5',store_name:'共青路店',hire_date:'2024-08-01',base_salary:'4500',graduated_count:0,active_apprentice:1},
    {id:4,emp_no:'DK0004',name:'赵强',level:'M4',store_name:'崇德府店',hire_date:'2024-06-15',base_salary:'4000',graduated_count:0,active_apprentice:0},
    {id:5,emp_no:'DK0005',name:'刘小红',level:'M3',store_name:'崇德府店',hire_date:'2024-09-01',base_salary:'3600',graduated_count:0,active_apprentice:0},
    {id:7,emp_no:'DK0007',name:'周丽',level:'M3',store_name:'共青路店',hire_date:'2024-10-15',base_salary:'3600',graduated_count:0,active_apprentice:0},
    {id:8,emp_no:'DK0008',name:'孙志远',level:'M2',store_name:'共青路店',hire_date:'2025-02-01',base_salary:'3500',graduated_count:0,active_apprentice:0},
    {id:9,emp_no:'DK0009',name:'马晓燕',level:'M2',store_name:'崇德府店',hire_date:'2025-03-01',base_salary:'3500',graduated_count:0,active_apprentice:0},
    {id:10,emp_no:'DK0010',name:'杨刚',level:'M1',store_name:'崇德府店',hire_date:'2025-05-01',base_salary:'3000',graduated_count:0,active_apprentice:0},
  ],
  prod:[
    {id:3,name:'王芳',product_name:'招牌肉夹馍',store_name:'崇德府店',total_sold:'175',avg_daily:'175'},
    {id:8,name:'孙志远',product_name:'招牌肉夹馍',store_name:'共青路店',total_sold:'110',avg_daily:'110'},
    {id:5,name:'刘小红',product_name:'八宝粥',store_name:'崇德府店',total_sold:'85',avg_daily:'85'},
    {id:3,name:'王芳',product_name:'老豆腐',store_name:'崇德府店',total_sold:'65',avg_daily:'65'},
    {id:10,name:'杨刚',product_name:'凉皮',store_name:'崇德府店',total_sold:'55',avg_daily:'55'},
  ],
  sales:[
    {id:2,name:'李明辉',store_name:'崇德府店',total_orders:'242',total_amount:'2579',avg_price:'10.7',work_days:'3'},
    {id:9,name:'马晓燕',store_name:'崇德府店',total_orders:'115',total_amount:'1960',avg_price:'17.0',work_days:'2'},
    {id:4,name:'赵强',store_name:'崇德府店',total_orders:'158',total_amount:'1896',avg_price:'12.0',work_days:'2'},
    {id:7,name:'周丽',store_name:'共青路店',total_orders:'158',total_amount:'1456',avg_price:'9.2',work_days:'2'},
  ],
  rot:[],
  exams:[
    {name:'李明辉',level:'M6',exam_date:'2026-03-15',score:'92',interview_score:'88',execute_score:'90',team_score:'85',total_score:'88.8',pass:'1'},
    {name:'陈大伟',level:'M5',exam_date:'2026-06-01',score:'88',interview_score:'85',execute_score:'92',team_score:'88',total_score:'88.3',pass:'1'},
    {name:'赵强',level:'M4',exam_date:'2026-06-01',score:'85',interview_score:'82',execute_score:'88',team_score:'90',total_score:'86.3',pass:'1'},
    {name:'王芳',level:'M5',exam_date:'2026-06-01',score:'78',interview_score:'80',execute_score:'85',team_score:'75',total_score:'79.5',pass:'1'},
    {name:'刘小红',level:'M3',exam_date:'2026-06-01',score:'72',interview_score:'70',execute_score:'75',team_score:'80',total_score:'74.3',pass:'1'},
  ],
  ment:[
    {mentor_name:'王芳',mentor_no:'DK0003',apprentice_name:'刘小红',apprentice_no:'DK0005',start_date:'2024-09-01',status:'graduated'},
    {mentor_name:'王芳',mentor_no:'DK0003',apprentice_name:'杨刚',apprentice_no:'DK0010',start_date:'2025-05-01',status:'active'},
    {mentor_name:'李明辉',mentor_no:'DK0002',apprentice_name:'马晓燕',apprentice_no:'DK0009',start_date:'2025-03-01',status:'active'},
    {mentor_name:'张建国',mentor_no:'DK0001',apprentice_name:'陈大伟',apprentice_no:'DK0006',start_date:'2024-08-01',status:'graduated'},
    {mentor_name:'陈大伟',mentor_no:'DK0006',apprentice_name:'孙志远',apprentice_no:'DK0008',start_date:'2025-02-01',status:'active'},
  ],
  promos:[
    {name:'李明辉',emp_no:'DK0002',from_level:'M5',to_level:'M6',promote_date:'2025-06-01',reason:'年度销售冠军+文化考核优秀',approver:'张建国'},
    {name:'王芳',emp_no:'DK0003',from_level:'M4',to_level:'M5',promote_date:'2025-03-01',reason:'带徒2人出师+品质全店第一',approver:'李明辉'},
    {name:'刘小红',emp_no:'DK0005',from_level:'M2',to_level:'M3',promote_date:'2025-09-01',reason:'文化考试通过+产品合格率98%',approver:'王芳'},
  ],
};

let tab='overview', store='';
const API='/api/employee.php';

function toast(m){const t=document.createElement('div');t.className='toast';t.textContent=m;document.body.appendChild(t);setTimeout(()=>t.remove(),2000)}

async function loadRemote(){
  try{
    const s=store?`&store=${store}`:'';
    const[emps,prod,sales,rot,exams,ment,promos]=await Promise.all([
      fetch(API+'?action=list'+s).then(r=>r.json()),
      fetch(API+'?action=product_ranking&days=30'+s).then(r=>r.json()),
      fetch(API+'?action=sales_ranking&days=30'+s).then(r=>r.json()),
      fetch(API+'?action=rotation_compare').then(r=>r.json()),
      fetch(API+'?action=culture_list').then(r=>r.json()),
      fetch(API+'?action=mentoring_list').then(r=>r.json()),
      fetch(API+'?action=promotion_list').then(r=>r.json()),
    ]);
    if(emps&&emps.length)D.emps=emps;
    if(prod&&prod.length)D.prod=prod;
    if(sales&&sales.length)D.sales=sales;
    if(rot&&rot.length)D.rot=rot;
    if(exams&&exams.length)D.exams=exams;
    if(ment&&ment.length)D.ment=ment;
    if(promos&&promos.length)D.promos=promos;
  }catch(e){console.warn('API:',e.message)}
  render();
}

function switchTab(t){tab=t;render()}
function changeStore(v){store=v==='全部门店'?'':v;render();loadRemote()}

// ===== RENDER =====
function render(){
  const m5=D.emps.filter(e=>['M5','M6','M7'].includes(e.level));
  const lv={};D.emps.forEach(e=>lv[e.level]=(lv[e.level]||0)+1);
  const stores=[...new Set(D.emps.map(e=>e.store_name))];
  const tabs=[
    ['overview','总览'],['product','产品排名'],['sales','销售排名'],
    ['rotation','轮岗'],['culture','文化考核'],['mentor','带徒'],
    ['promotion','晋升'],['salary','薪酬']
  ];

  document.getElementById('app').innerHTML=`
<div class="top">
  <div><div class="brand">👥 员工成长</div><div class="sub">M1~M7 · 德可旺</div></div>
  <select onchange="changeStore(this.value)"><option>全部门店</option>${stores.map(s=>`<option>${s}</option>`).join('')}</select>
</div>
<div class="bar"><span>员工 ${D.emps.length}</span><span>储备 ${m5.length}</span><span>门店 ${stores.length}</span><span>带徒 ${D.ment.filter(m=>m.status==='active').length}</span></div>
<div class="tabs">${tabs.map(([k,label])=>`<button class="tab${tab===k?' active':''}" onclick="switchTab('${k}')">${label}</button>`).join('')}</div>
${renderPanel()}
<div class="bottom">德可旺 · 员工成长系统<br>🤖 小旺智能体</div>
`;
}

function renderPanel(){
  switch(tab){
    case'overview':return renderOverview();
    case'product':return renderProd();
    case'sales':return renderSales();
    case'rotation':return renderRot();
    case'culture':return renderCulture();
    case'mentor':return renderMent();
    case'promotion':return renderPromo();
    case'salary':return renderSalary();
  }
}

function renderOverview(){
  const m5=D.emps.filter(e=>['M5','M6','M7'].includes(e.level));
  const lv={};D.emps.forEach(e=>lv[e.level]=(lv[e.level]||0)+1);
  const tp=D.prod[0],ts=D.sales[0];
  return`
<div class="stat-row">
  <div class="stat-item"><div class="sv">${D.emps.length}</div><div class="sl">在职员工</div></div>
  <div class="stat-item"><div class="sv">${m5.length}</div><div class="sl">储备干部</div></div>
  <div class="stat-item"><div class="sv">${D.ment.filter(m=>m.status==='active').length}</div><div class="sl">在带徒弟</div></div>
</div>

<div class="section"><h3>等级分布</h3>
<div class="card">${['M1','M2','M3','M4','M5','M6','M7'].map(l=>`
  <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
    <span class="badge bg-${l}">${l}</span>
    <div class="progress" style="flex:1"><div style="width:${(lv[l]||0)/Math.max(1,D.emps.length)*100}%"></div></div>
    <span style="width:20px;text-align:right;font-size:11px;font-weight:700;color:#c0392b">${lv[l]||0}</span>
  </div>`).join('')}</div></div>

<div class="g2"><div class="pair"><div class="pi">🏆</div><div class="pn">${tp?tp.name:'—'}</div><div class="ps">${tp?tp.product_name+' · '+tp.total_sold+'份':'暂无'} · 产品冠军</div></div>
<div class="pair"><div class="pi">👑</div><div class="pn">${ts?ts.name:'—'}</div><div class="ps">${ts?'¥'+Number(ts.total_amount).toLocaleString()+' · '+ts.total_orders+'单':'暂无'} · 销售冠军</div></div></div>

<div class="section"><h3>M5+ 新店储备池</h3>
<div class="card"><table><tr><th>工号</th><th>姓名</th><th>等级</th><th>门店</th><th>带徒</th><th>在职</th></tr>
${m5.map(e=>`<tr><td>${e.emp_no}</td><td><b>${e.name}</b></td><td><span class="badge bg-${e.level}">${e.level}</span></td><td>${e.store_name}</td><td>${e.graduated_count||0}人</td><td>${Math.floor((Date.now()-new Date(e.hire_date))/864e5)}天</td></tr>`).join('')}</table></div></div>`;
}

function renderProd(){return`
<div class="section"><h3>产品排名 · 30天</h3>
<div class="rank">${D.prod.map((p,i)=>`
  <div class="row"><div class="rn${i<3?' top3':''}">${i+1}</div>
    <div class="info"><div class="name">${p.name} <span class="badge bg-${(D.emps.find(e=>e.id==p.id)||{}).level||'M1'}">${(D.emps.find(e=>e.id==p.id)||{}).level||'?'}</span></div>
      <div class="sub">${p.product_name} · ${p.store_name} · 日均${Math.round(p.avg_daily)}份</div></div>
    <div class="val">${p.total_sold}份</div></div>`).join('')}</div></div>`;
}

function renderSales(){return`
<div class="section"><h3>销售排名 · 30天</h3>
<div class="rank">${D.sales.map((s,i)=>`
  <div class="row"><div class="rn${i<3?' top3':''}">${i+1}</div>
    <div class="info"><div class="name">${s.name} <span class="badge bg-${(D.emps.find(e=>e.id==s.id)||{}).level||'M1'}">${(D.emps.find(e=>e.id==s.id)||{}).level||'?'}</span></div>
      <div class="sub">${s.store_name} · ${s.work_days}天 · ${s.total_orders}单 · 客单¥${Number(s.avg_price).toFixed(0)}</div></div>
    <div class="val">¥${Number(s.total_amount).toLocaleString()}</div></div>`).join('')}</div></div>`;
}

function renderRot(){return`
<div class="section"><h3>轮岗对比</h3>
${D.rot.length?D.rot.map(r=>`<div class="rot-card"><div class="rc-head"><b>${r.name}</b><span class="badge" style="background:${r.result==='better'?'#e8f5e9':r.result==='worse'?'#fce4ec':'#f0f0f0'};color:${r.result==='better'?'#2e7d32':r.result==='worse'?'#c0392b':'#666'}">${r.result==='better'?'↑提升':r.result==='worse'?'↓下降':'→持平'}</span></div>
  <div class="rc-flow">${r.rotation_type==='product'?'🥙做':'💰卖'} ${r.from_product||r.from_store} → ${r.to_product||r.to_store}</div>
  <div style="font-size:11px;color:#999">调前${r.before_avg} → 调后${r.after_avg||'统计中'} · ${r.start_date}</div></div>`).join(''):
  '<div class="card"><div style="text-align:center;color:#999;padding:20px;font-size:13px;">暂无轮岗记录</div></div>'}</div>`;
}

function renderCulture(){return`
<div class="section"><h3>文化考核</h3>
<div class="card"><table><tr><th>员工</th><th>等级</th><th>日期</th><th>笔试</th><th>面谈</th><th>执行力</th><th>团队</th><th>总分</th><th>结果</th></tr>
${D.exams.map(e=>`<tr><td><b>${e.name}</b></td><td><span class="badge bg-${e.level}">${e.level}</span></td><td>${e.exam_date}</td><td>${e.score}</td><td>${e.interview_score}</td><td>${e.execute_score}</td><td>${e.team_score}</td><td><b style="color:${+e.total_score>=80?'#27ae60':+e.total_score>=60?'#e67e22':'#c0392b'}">${e.total_score}</b></td><td><span class="badge" style="background:${e.pass==1?'#e8f5e9':'#fce4ec'};color:${e.pass==1?'#2e7d32':'#c0392b'}">${e.pass==1?'✅通过':'❌未过'}</span></td></tr>`).join('')}</table></div></div>`;
}

function renderMent(){return`
<div class="section"><h3>带徒追踪</h3>
<div class="card"><table><tr><th>师傅</th><th>徒弟</th><th>开始</th><th>状态</th></tr>
${D.ment.map(m=>`<tr><td><b>${m.mentor_name}</b> ${m.mentor_no}</td><td>${m.apprentice_name} ${m.apprentice_no}</td><td>${m.start_date}</td><td><span class="badge" style="background:${m.status==='active'?'#e8f0fe':m.status==='graduated'?'#e8f5e9':'#f0f0f0'};color:${m.status==='active'?'#1a73e8':m.status==='graduated'?'#2e7d32':'#666'}">${m.status==='active'?'📖在带':m.status==='graduated'?'🎓出师':'❌中断'}</span></td></tr>`).join('')}</table></div></div>`;
}

function renderPromo(){
  const rules=[['M1→M2','独立作业·产量达标'],['M2→M3','文化考核≥60分'],['M3→M4','带出2名徒弟'],['M4→M5','文化≥80+带出3人→储备'],['M5→M6','业绩突出→独当一面'],['M6→M7','带出5人→区域管理+分红']];
  return`
<div class="section"><h3>晋升通路</h3>
<div class="card">
  <div class="level-line">${['M1','M2','M3','M4','M5','M6','M7'].map((l,i)=>(i>0?`<div class="level-dash done"></div>`:'')+`<div class="level-step done">${l}</div>`).join('')}</div>
  <table style="margin-top:8px"><tr><th>路径</th><th>条件</th></tr>${rules.map(r=>`<tr><td><b>${r[0]}</b></td><td>${r[1]}</td></tr>`).join('')}</table></div></div>

<div class="section"><h3>晋升历史</h3>
<div class="card"><table><tr><th>员工</th><th>从</th><th>到</th><th>日期</th><th>原因</th></tr>
${D.promos.map(p=>`<tr><td><b>${p.name}</b></td><td><span class="badge bg-${p.from_level}">${p.from_level}</span></td><td><span class="badge bg-${p.to_level}">${p.to_level}</span></td><td>${p.promote_date}</td><td style="font-size:11px;color:#999">${p.reason}</td></tr>`).join('')}</table></div></div>`;
}

function renderSalary(){
  const band={M1:[3000,0,300,0,'3000-3500'],M2:[3500,0,500,0,'3500-4200'],M3:[3600,0,600,200,'4200-5000'],M4:[4000,0,800,400,'5000-6200'],M5:[4500,0,1000,800,'6000-8000'],M6:[5000,0,1300,1500,'7000-10000'],M7:[6000,0,1800,4000,'8000-12000+']};
  const total=D.emps.reduce((s,e)=>{const b=band[e.level]||band.M1;return s+ +e.base_salary+b[2]+b[3]*(e.active_apprentice||0)+b[4]},0);
  return`
<div class="stat-row"><div class="stat-item"><div class="sv">¥${total.toLocaleString()}</div><div class="sl">月薪酬总额</div></div><div class="stat-item"><div class="sv">3000-6000</div><div class="sl">底薪区间</div></div><div class="stat-item"><div class="sv">电议+</div><div class="sl">M7含分红</div></div></div>
<div class="section"><h3>薪酬明细</h3>
<div class="card"><table><tr><th>工号</th><th>姓名</th><th>等级</th><th>底薪</th><th>绩效</th><th>带徒</th><th>分红</th><th>月入</th></tr>
${D.emps.map(e=>{const b=band[e.level]||band.M1;const t= +e.base_salary+b[2]+b[3]*(e.active_apprentice||0)+b[4];return`<tr><td>${e.emp_no}</td><td><b>${e.name}</b></td><td><span class="badge bg-${e.level}">${e.level}</span></td><td>¥${+e.base_salary}</td><td>¥${b[2]}</td><td>¥${b[3]*(e.active_apprentice||0)}</td><td>¥${b[4]}</td><td><b style="color:#c0392b">¥${t.toLocaleString()}</b></td></tr>`}).join('')}</table></div></div>
<div class="section"><h3>薪酬结构</h3>
<div class="card"><table><tr><th>等级</th><th>底薪</th><th>绩效</th><th>带徒</th><th>分红</th><th>月入</th></tr>
${Object.entries(band).map(([k,v])=>`<tr><td><b>${k}</b></td><td>¥${v[0].toLocaleString()}</td><td>¥${v[2]}</td><td>¥${v[3]}/徒</td><td>¥${v[4]}</td><td><b style="color:#c0392b">¥${v[5]}</b></td></tr>`).join('')}</table></div></div>`;
}

// ===== INIT =====
(function(){
  checkLogin();
  var t=getToken();
  if(t){render();loadRemote()}
})();