<template>
  <section class="employee-center">
    <Transition name="employee-view" mode="out-in">
      <article v-if="selectedEmployee" key="detail" class="employee-detail">
        <div class="detail-scroll">
          <section class="detail-hero panel">
            <div class="hero-profile">
              <div class="hero-avatar">{{ selectedEmployee.avatar }}</div>
              <div class="hero-copy">
                <div class="hero-tag">{{ selectedEmployee.employeeNo }}</div>
                <h2>{{ selectedEmployee.name }}</h2>
                <p>{{ selectedEmployee.department }} / {{ selectedEmployee.position }} / {{ selectedEmployee.grade }}</p>
              </div>
            </div>

            <div class="hero-stats">
              <div class="hero-stat">
                <span>账号状态</span>
                <strong>{{ selectedEmployee.status }}</strong>
              </div>
              <div class="hero-stat">
                <span>直属上级</span>
                <strong>{{ selectedEmployee.manager }}</strong>
              </div>
              <div class="hero-stat">
                <span>财务归口</span>
                <strong>{{ selectedEmployee.financeOwner }}</strong>
              </div>
              <div class="hero-stat">
                <span>角色数量</span>
                <strong>{{ selectedEmployee.roles.length }}</strong>
              </div>
            </div>
          </section>

          <div class="detail-grid">
            <section class="detail-main">
              <article class="detail-card panel">
                <div class="card-head">
                  <div>
                    <h3>基础信息</h3>
                    <p>维护员工编号、联系方式、入职日期与常用档案信息。</p>
                  </div>
                </div>

                <div class="form-grid">
                  <label class="field">
                    <span>员工姓名</span>
                    <input :value="selectedEmployee.name" />
                  </label>
                  <label class="field">
                    <span>员工编号</span>
                    <input :value="selectedEmployee.employeeNo" />
                  </label>
                  <label class="field">
                    <span>性别</span>
                    <input :value="selectedEmployee.gender" />
                  </label>
                  <label class="field">
                    <span>年龄</span>
                    <input :value="selectedEmployee.age" />
                  </label>
                  <label class="field">
                    <span>出生日期</span>
                    <input :value="selectedEmployee.birthDate" />
                  </label>
                  <label class="field">
                    <span>手机号</span>
                    <input :value="selectedEmployee.phone" />
                  </label>
                  <label class="field">
                    <span>邮箱</span>
                    <input :value="selectedEmployee.email" />
                  </label>
                  <label class="field">
                    <span>入职日期</span>
                    <input :value="selectedEmployee.joinDate" />
                  </label>
                  <label class="field">
                    <span>办公地点</span>
                    <input :value="selectedEmployee.location" />
                  </label>
                </div>
              </article>

              <article class="detail-card panel">
                <div class="card-head">
                  <div>
                    <h3>组织与岗位</h3>
                    <p>配置部门、岗位、职级和管理归属，决定审批链路和数据访问边界。</p>
                  </div>
                </div>

                <div class="form-grid">
                  <label class="field">
                    <span>所属部门</span>
                    <input :value="selectedEmployee.department" />
                  </label>
                  <label class="field">
                    <span>岗位</span>
                    <input :value="selectedEmployee.position" />
                  </label>
                  <label class="field">
                    <span>职级</span>
                    <input :value="selectedEmployee.grade" />
                  </label>
                  <label class="field">
                    <span>直属上级</span>
                    <input :value="selectedEmployee.manager" />
                  </label>
                  <label class="field">
                    <span>财务归口</span>
                    <input :value="selectedEmployee.financeOwner" />
                  </label>
                  <label class="field">
                    <span>成本中心</span>
                    <input :value="selectedEmployee.costCenter" />
                  </label>
                </div>
              </article>

              <article class="detail-card panel">
                <div class="card-head">
                  <div>
                    <h3>系统角色分配</h3>
                    <p>为员工分配管理员、财务人员、使用者、高级管理人员等业务角色。</p>
                  </div>
                  <span class="count-badge">{{ selectedEmployee.roles.length }} 个角色</span>
                </div>

                <div class="role-grid">
                  <label
                    v-for="role in roleOptions"
                    :key="role.id"
                    class="role-card"
                    :class="{ active: selectedEmployee.roles.includes(role.label) }"
                  >
                    <input type="checkbox" :checked="selectedEmployee.roles.includes(role.label)" />
                    <div class="role-copy">
                      <strong>{{ role.label }}</strong>
                      <p>{{ role.desc }}</p>
                    </div>
                  </label>
                </div>
              </article>
            </section>

            <aside class="detail-side">
              <article class="side-card panel">
                <div class="card-head">
                  <div>
                    <h3>当前权限摘要</h3>
                    <p>角色组合带来的系统可见范围</p>
                  </div>
                </div>
                <div class="tag-list">
                  <span v-for="role in selectedEmployee.roles" :key="role">{{ role }}</span>
                </div>
                <ul class="bullet-list">
                  <li v-for="item in selectedEmployee.permissions" :key="item">{{ item }}</li>
                </ul>
              </article>

              <article class="side-card panel">
                <div class="card-head">
                  <div>
                    <h3>最近变更</h3>
                    <p>查看角色与档案调整记录</p>
                  </div>
                </div>
                <div class="history-list">
                  <div v-for="item in selectedEmployee.history" :key="item.time" class="history-row">
                    <strong>{{ item.action }}</strong>
                    <span>{{ item.owner }}</span>
                    <small>{{ item.time }}</small>
                  </div>
                </div>
              </article>

              <article class="side-card panel publish-card">
                <div>
                  <h3>生效状态</h3>
                  <p>当前修改将在保存后同步到审批、报销、知识和权限模块。</p>
                </div>
                <div class="publish-summary">
                  <span>上次同步：{{ selectedEmployee.lastSync }}</span>
                  <strong>{{ selectedEmployee.syncState }}</strong>
                </div>
              </article>
            </aside>
          </div>
        </div>

        <footer class="detail-actions">
          <button class="back-action" type="button" @click="selectedEmployee = null">
            <i class="mdi mdi-arrow-left"></i>
            <span>返回员工列表</span>
          </button>

          <div class="detail-action-group">
            <button class="minor-action" type="button">
              <i class="mdi mdi-content-save-outline"></i>
              <span>保存草稿</span>
            </button>
            <button class="minor-action" type="button">
              <i class="mdi mdi-account-cancel-outline"></i>
              <span>停用账号</span>
            </button>
            <button class="major-action" type="button">
              <i class="mdi mdi-check-circle-outline"></i>
              <span>保存并生效</span>
            </button>
          </div>
        </footer>
      </article>

      <article v-else key="list" class="employee-list panel">
        <nav class="status-tabs" aria-label="员工状态筛选">
          <button
            v-for="tab in tabs"
            :key="tab"
            type="button"
            :class="{ active: activeTab === tab }"
            @click="activeTab = tab"
          >
            {{ tab }}
          </button>
        </nav>

        <div class="list-toolbar">
          <div class="filter-set">
            <div class="list-search">
              <i class="mdi mdi-magnify"></i>
              <input type="search" placeholder="搜索员工姓名、工号、部门或岗位..." />
            </div>

            <button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
              <span>{{ filter }}</span>
              <i class="mdi mdi-chevron-down"></i>
            </button>
          </div>

          <button class="create-btn" type="button">
            <i class="mdi mdi-plus"></i>
            <span>新增员工</span>
          </button>
        </div>

        <p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意员工行可进入基础信息与角色权限编辑界面</p>

        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>员工</th>
                <th>工号</th>
                <th>部门</th>
                <th>岗位</th>
                <th>职级</th>
                <th>直属上级</th>
                <th>财务归口</th>
                <th>系统角色</th>
                <th>状态</th>
                <th>最近更新</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="employee in visibleEmployees"
                :key="employee.id"
                :class="{ spotlight: employee.spotlight }"
                @click="selectedEmployee = employee"
              >
                <td>
                  <div class="employee-cell">
                    <span class="employee-avatar">{{ employee.avatar }}</span>
                    <div>
                      <strong>{{ employee.name }}</strong>
                      <span>{{ employee.email }}</span>
                    </div>
                  </div>
                </td>
                <td>{{ employee.employeeNo }}</td>
                <td>{{ employee.department }}</td>
                <td>{{ employee.position }}</td>
                <td><span class="level-pill">{{ employee.grade }}</span></td>
                <td>{{ employee.manager }}</td>
                <td>{{ employee.financeOwner }}</td>
                <td>
                  <div class="role-stack">
                    <span v-for="role in employee.roles.slice(0, 2)" :key="role" class="role-pill">{{ role }}</span>
                    <span v-if="employee.roles.length > 2" class="more-pill">+{{ employee.roles.length - 2 }}</span>
                  </div>
                </td>
                <td><span class="status-pill" :class="employee.statusTone">{{ employee.status }}</span></td>
                <td>{{ employee.updatedAt }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </article>
    </Transition>
  </section>
</template>

<script src="./scripts/EmployeeManagementView.js"></script>

<style scoped src="../assets/styles/views/employee-management-view.css"></style>
