<template>
  <div class="process-card-list">
    <el-card
      v-for="(item, index) in data"
      :key="index"
      class="process-card"
      :class="{ 'is-final': item.isEnd }"
    >
      <div class="process-card__header">
        <div class="process-name">
          <i class="el-icon-office-building"></i>
          {{ item.deptName | dv}}
        </div>
        <div class="process-tags">
          <el-tag v-if="item.isEnd" size="mini" type="success">最终工序</el-tag>
        </div>
      </div>

      <div class="process-card__body">
        <div class="progress-wrapper">
          <el-progress
            :percentage="item.progress"
            :color="ProgressColors"
            :format="ProgressFormat"
            :stroke-width="8"
          >
          </el-progress>
        </div>
      </div>

      <div class="process-card__info">
        <div class="info-item">
          <span class="label">计划数量:</span>
          <span class="value">{{ item.num }}</span>
        </div>
        <div class="info-item">
          <span class="label">已上报:</span>
          <span class="value">{{ item.reportNum }}</span>
        </div>
        <div class="info-item">
          <span class="label">已清点:</span>
          <span class="value">{{ item.storeNum }}</span>
        </div>
      </div>

      <div v-if="item.remark" class="process-card__remark">
        <div class="remark-title">
          <i class="el-icon-info"></i>{{ item.remark }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ProgressColors, ProgressFormat } from '@/utils/constants'

export default {
  name: 'ProcessCardList',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      ProgressColors,
    }
  },
  methods: {
    ProgressFormat,
  }
}
</script>

<style scoped lang="scss">
.process-card-list {
  max-height: 600px;
  padding: 4px;
  overflow-y: auto;
  .process-card {
    margin-bottom: 6px;
    border-radius: 6px;

    :deep(.el-card__body) {
      padding: 10px 12px;
    }

    &.is-final {
      border: 1px solid #67c23a;
    }

    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;

      .process-name {
        font-size: 14px;
        font-weight: bold;
        color: #303133;
        display: flex;
        align-items: center;
        gap: 6px;

        .remark-icon {
          font-size: 14px;
          color: #909399;
          cursor: help;

          &:hover {
            color: #409eff;
          }
        }
      }

      .process-tags {
        flex-shrink: 0;
      }
    }

    &__body {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;

      .workshop {
        min-width: 90px;
        color: #606266;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;

        i {
          margin-right: 4px;
        }

        .dept-process {
          color: #909399;
          font-size: 11px;
        }
      }

      .progress-wrapper {
        flex: 1;
        :deep(.el-progress-bar__outer) {
          background-color: #f5f7fa;
          height: 6px !important;
        }
      }
    }

    &__info {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 6px;
      padding: 6px;
      background: #f8f9fb;
      border-radius: 4px;

      .info-item {
        font-size: 12px;

        .label {
          color: #909399;
          margin-right: 4px;
        }
        .value {
          color: #303133;
          font-weight: 500;
        }
      }
    }

    &__remark {
      margin-top: 6px;
      padding: 6px 8px;
      background: #fafafa;
      border-radius: 4px;

      .remark-title {
        display: flex;
        align-items: center;
        gap: 3px;
        color: #606266;
        font-size: 12px;
        margin-bottom: 4px;

        i {
          color: #909399;
          font-size: 12px;
        }
      }

      .remark-content {
        color: #606266;
        font-size: 13px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .process-card-list {
    .process-card {
      &__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;

        .workshop {
          min-width: auto;
        }

        .progress-wrapper {
          width: 100%;
        }
      }

      &__info {
        flex-direction: column;
        gap: 4px;
      }
    }
  }
}
</style>
