<template>
  <div class="staff-container">
    <el-card shadow="never">
      <div slot="header">
        <span>人员列表</span>
        <el-select v-model="filterWorkType" placeholder="筛选工种" clearable size="small"
                   style="margin-left: 16px; width: 150px;" @change="loadData">
          <el-option label="保洁" value="CLEANING" />
          <el-option label="保安" value="SECURITY" />
          <el-option label="工程维修" value="ENGINEERING" />
        </el-select>
      </div>
      <el-table :data="tableData" border stripe size="small" v-loading="loading">
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="tel" label="手机号" width="140" />
        <el-table-column prop="work_type" label="工种" width="120">
          <template slot-scope="scope">{{ workTypeLabel(scope.row.work_type) }}</template>
        </el-table-column>
        <el-table-column prop="role" label="角色" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.role === 'ADMIN' ? 'danger' : 'info'" size="small">
              {{ scope.row.role === 'ADMIN' ? '管理员' : '员工' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'ON' ? 'success' : 'danger'" size="small">
              {{ scope.row.status === 'ON' ? '在职' : '离职' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="180" />
      </el-table>
      <el-pagination
        style="margin-top: 16px; text-align: right;"
        @size-change="handleSizeChange" @current-change="handlePageChange"
        :current-page="pagination.page" :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.row" :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper" />
    </el-card>
  </div>
</template>

<script>
import { queryPropertyUsers } from '@/api/property/propertyApi'

export default {
  name: 'StaffView',
  data() {
    return {
      filterWorkType: '',
      tableData: [],
      loading: false,
      pagination: { page: 1, row: 20, total: 0 }
    }
  },
  mounted() { this.loadData() },
  methods: {
    workTypeLabel(type) {
      const map = { CLEANING: '保洁', SECURITY: '保安', ENGINEERING: '工程维修' }
      return map[type] || type
    },
    async loadData() {
      this.loading = true
      try {
        const params = { page: this.pagination.page, row: this.pagination.row }
        if (this.filterWorkType) params.workType = this.filterWorkType
        const res = await queryPropertyUsers(params)
        this.tableData = res.data && res.data.data || []
        this.pagination.total = res.data && res.data.total || 0
      } catch (e) { this.$message.error('加载失败') }
      finally { this.loading = false }
    },
    handleSizeChange(val) { this.pagination.row = val; this.loadData() },
    handlePageChange(val) { this.pagination.page = val; this.loadData() }
  }
}
</script>

<style scoped>
.staff-container { padding: 16px; }
</style>
