<template>
  <el-table :data="list" :header-cell-style="{ background: '#f8f9fa', color: '#333', fontWeight: 'bold', borderBottom: 'none' }" style="width: 100%" class="custom-table">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column prop="workOrderNo" label="工单号" min-width="140" align="center" />
    <el-table-column label="状态" width="100" align="center">
      <template slot-scope="{ row }">
        <span class="status-tag" :class="row.status === '已完工' ? 'status-done' : 'status-doing'">
          {{ row.status }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="进度" min-width="180" align="center">
      <template slot-scope="{ row }">
        <div class="progress-cell">
          <div class="progress-bar-bg">
            <div class="progress-bar-fill" :style="{ width: row.progress + '%', backgroundColor: row.progress >= 100 ? '#52c41a' : '#00bcd4' }"></div>
          </div>
          <span class="progress-text" v-if="row.progress < 100">{{ row.progress }}%</span>
          <i class="el-icon-success progress-icon" v-else></i>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="totalQty" label="总数量" width="100" align="center" />
  </el-table>
</template>

<script>
export default {
  name: 'WorkOrderProgress',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-table {
  &::before {
    display: none;
  }
  ::v-deep .el-table__row > td {
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
  }
}

.status-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  
  &.status-done {
    background-color: #f6ffed;
    color: #52c41a;
  }
  &.status-doing {
    background-color: #e6fffb;
    color: #13c2c2;
  }
}

.progress-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  .progress-bar-bg {
    width: 100px;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  .progress-text {
    font-size: 12px;
    color: #8c8c8c;
    width: 30px;
    text-align: left;
  }

  .progress-icon {
    color: #52c41a;
    font-size: 14px;
    width: 30px;
    text-align: left;
  }
}
</style>