<template>
  <module-page-shell title="我的信息">
    <div class="workbench-profile-page" v-loading="loading">
      <workbench-summary :cards="summaryCards" />

      <div class="profile-grid">
        <section class="panel">
          <div class="panel__header">
            <h3>我的信息</h3>
          </div>
          <el-table :data="infoRows" size="small" :show-header="true">
            <el-table-column label="字段" prop="label" min-width="140" />
            <el-table-column label="内容" prop="value" min-width="260" />
          </el-table>
        </section>

        <section class="panel">
          <div class="panel__header">
            <h3>常用功能</h3>
          </div>
          <el-table :data="actionRows" size="small">
            <el-table-column label="功能" prop="label" min-width="160" />
            <el-table-column label="操作" min-width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleAction(scope.row)">{{ scope.row.actionText }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </section>
      </div>
    </div>
  </module-page-shell>
</template>

<script>
import ModulePageShell from '@/components/ModulePageShell'
import WorkbenchSummary from './components/WorkbenchSummary'
import { DEFAULT_ASSESSOR_NAME, DEFAULT_ASSESSOR_ROLE, loadWorkbenchSnapshot } from './shared'

export default {
  name: 'RiskWorkbenchProfile',
  components: {
    ModulePageShell,
    WorkbenchSummary
  },
  data() {
    return {
      loading: false,
      summaryCards: [],
      currentProject: {},
      infoRows: [],
      actionRows: [
        { key: 'message', label: '消息通知', actionText: '查看' },
        { key: 'record', label: '操作记录', actionText: '查看' },
        { key: 'setting', label: '账号设置', actionText: '查看' },
        { key: 'logout', label: '退出登录', actionText: '执行' }
      ]
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    async loadPage() {
      this.loading = true
      try {
        const snapshot = await loadWorkbenchSnapshot()
        this.summaryCards = snapshot.summaryCards
        this.currentProject = snapshot.currentProject
        this.infoRows = [
          { label: '账号', value: DEFAULT_ASSESSOR_NAME },
          { label: '角色', value: DEFAULT_ASSESSOR_ROLE },
          { label: '数据范围', value: '项目级' },
          { label: '当前项目', value: `${snapshot.currentProject.projectCode} ${snapshot.currentProject.projectName}` }
        ]
      } finally {
        this.loading = false
      }
    },
    handleAction(row) {
      if (row.key === 'logout') {
        this.$confirm('确认退出当前账号吗？', '提示', { type: 'warning' })
          .then(() => {
            this.$store.dispatch('LogOut').then(() => {
              this.$router.push('/login')
            })
          })
          .catch(() => {})
        return
      }
      if (row.key === 'record') {
        this.$router.push('/system/operlog')
        return
      }
      if (row.key === 'setting') {
        this.$message.info('账号设置入口暂未开放，当前可继续使用系统默认设置。')
        return
      }
      this.$message.info('当前暂无新的消息通知。')
    }
  }
}
</script>

<style lang="scss" scoped>
.workbench-profile-page {
  display: flex;
  flex-direction: column;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}

.panel {
  min-height: 260px;
  padding: 12px 14px;
  border: 1px solid #e4e8ef;
  border-radius: 6px;
  background: #fff;
}

.panel__header {
  margin-bottom: 12px;
}

.panel__header h3 {
  margin: 0;
  color: #2f3542;
  font-size: 16px;
}

@media screen and (max-width: 1200px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}
</style>
