<template>
  <div class="task-process-panel">
    <el-card class="box-card" header="负责人">
      <div class="process-list">
        <el-row :gutter="10">
          <el-col :span="24" v-for="owner in ownerList" :key="owner.userId">
            <div class="process-item">
              <div class="user-info">
                <avatar :size="28" :src="owner.avatar" :name="owner.nickName" :id="owner.userId" />
                <span class="user-name">{{ owner.nickName }}</span>
                <div class="status-tag">
                  <el-tag size="mini" :type="hasSubmitted(owner.userId) ? 'success' : 'info'">
                    {{ hasSubmitted(owner.userId) ? '已完成' : '未完成' }}
                  </el-tag>
                </div>
              </div>
              <div class="process-info">
                <div class="info-item">
                  <span class="label">提交数：</span>
                  <span class="value">{{ getSubmitCount(owner.userId) }}</span>
                </div>
                <div class="info-item">
                  <span class="label">通过数：</span>
                  <span class="value">{{ getPassCount(owner.userId) }}</span>
                </div>
                <div class="info-item">
                  <span class="label">通过时间：</span>
                  <span class="value">{{ getFirstPassSubmitTime(owner.userId) }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar'
import { TaskSubmitStatus } from '@/utils/enums'
import { parseTime } from '@/utils'

export default {
  name: 'TaskProcessPanel',
  components: {
    Avatar
  },
  props: {
    detail: {
      type: Object,
      required: true
    }
  },
  computed: {
    ownerList() {
      return this.detail.ownerList || []
    },
    submitList() {
      return this.detail.submitList || []
    }
  },
  methods: {
    // 获取用户提交次数
    getSubmitCount(userId) {
      return this.submitList.filter(item => item.userId === userId).length
    },
    // 获取用户通过次数
    getPassCount(userId) {
      return this.submitList.filter(item => item.userId === userId && item.status === TaskSubmitStatus.PASS).length
    },
    // 获取用户已通过的最早提交时间
    getFirstPassSubmitTime(userId) {
      const userPassSubmits = this.submitList.filter(item => 
        item.userId === userId && 
        item.status === TaskSubmitStatus.PASS
      )
      if (userPassSubmits.length === 0) return '暂未通过'
      const firstPassSubmit = userPassSubmits.reduce((prev, curr) => {
        return new Date(prev.createTime) < new Date(curr.createTime) ? prev : curr
      })
      return firstPassSubmit.createTime;
    },
    // 判断用户是否已完成
    hasSubmitted(userId) {
      return this.submitList.some(item => 
        item.userId === userId && 
        item.status === TaskSubmitStatus.PASS
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.task-process-panel {
  .process-list {
    .process-item {
      padding: 8px 12px;
      margin-bottom: 8px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
      }

      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 6px;

        .user-name {
          margin-left: 8px;
          font-size: 13px;
          font-weight: bold;
          flex: 1;
        }

        .status-tag {
          margin-left: auto;
        }
      }

      .process-info {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .info-item {
          font-size: 12px;
          flex: 1;
          min-width: 120px;

          .label {
            color: #909399;
          }

          .value {
            color: #303133;
            margin-left: 4px;
          }
        }
      }
    }
  }
}
</style>