<template>
  <div class="experience-distribution">
    <h1 class="page-title">开机人员年限分布</h1>

    <div class="table-container">
      <el-table :data="teams" border stripe class="distribution-table"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
        <el-table-column prop="brigadeName" label="业务大队" align="center">
          <template #default="{ row }">
            <span class="team-name">{{ row.brigadeName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="5年及5年以上人员数" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.cntGe5Year" :min="0" :controls="false" size="small" placeholder="0"
              class="number-input" />
          </template>
        </el-table-column>

        <el-table-column label="4年人员数" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.cnt4Years" :min="0" :controls="false" size="small" placeholder="0"
              class="number-input" />
          </template>
        </el-table-column>

        <el-table-column label="3年人员数" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.cnt3Years" :min="0" :controls="false" size="small" placeholder="0"
              class="number-input" />
          </template>
        </el-table-column>

        <el-table-column label="2年人员数" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.cnt2Years" :min="0" :controls="false" size="small" placeholder="0"
              class="number-input" />
          </template>
        </el-table-column>

        <el-table-column label="1年人员数" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.cnt1Years" :min="0" :controls="false" size="small" placeholder="0"
              class="number-input" />
          </template>
        </el-table-column>

        <el-table-column label="不足1年人员数" width="130" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.cntLt1Year" :min="0" :controls="false" size="small" placeholder="0"
              class="number-input" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="button-container">
      <el-button type="primary" size="medium" @click="handleConfirm" class="confirm-button">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getTenurelistAll, editTenure } from '@/api/blockingData/experienceDistributionStartupPerson'
export default {
  name: 'ExperienceDistributionStartupPerson',
  data() {
    return {
      teams: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const response = await getTenurelistAll()
        if (response.code === 200) {
          this.teams = response.data || []
        } else {
          this.$message.error('获取数据失败：' + response.msg)
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败')
      }
    },
    async handleConfirm() {
      try {
        const savePromises = this.teams.map(row => {
          const saveData = {
            id: row.id,
            brigadeId: row.brigadeId,
            brigadeName: row.brigadeName,
            cntGe5Year: row.cntGe5Year || 0,
            cnt4Years: row.cnt4Years || 0,
            cnt3Years: row.cnt3Years || 0,
            cnt2Years: row.cnt2Years || 0,
            cnt1Years: row.cnt1Years || 0,
            cntLt1Year: row.cntLt1Year || 0
          }
          return editTenure(saveData)
        })
        
        const results = await Promise.all(savePromises)
        const allSuccess = results.every(result => result.code === 200)
        
        if (allSuccess) {
          this.$message.success('数据保存成功！')
        } else {
          this.$message.error('部分数据保存失败，请检查后重试')
        }
      } catch (error) {
        console.error('保存数据失败:', error)
        this.$message.error('保存数据失败')
      }
    }
  }
}
</script>

<style scoped>
.experience-distribution {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.table-container {
  margin-bottom: 30px;
}

.distribution-table {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.team-name {
  font-weight: bold;
  color: #333;
}

.number-input {
  width: 100px;
}

.number-input :deep(.el-input__inner) {
  text-align: center;
}

.button-container {
  text-align: center;
}

.confirm-button {
  width: 120px;
  height: 40px;
  font-size: 16px;
}
</style>