<!-- components/TaskItem.vue -->
<template>
  <view class="u-tab-item" :class="{ 'u-tab-item-active': active }" @tap.stop="handleClick">
    <u-row class="full-width">
      <u-col span="2" class="text-center" style="position: relative">
        <u-icon :color="taskStyle(task)" name="tags-fill" size="34"></u-icon>
        <text class="seq">{{ seq }}</text>
      </u-col>
      <u-col span="10">
        <view class="fs18">{{ task.taskNo }}</view>
        <view class="mt3 mb3">{{ task.taskName }}{{ task.assayOper }}</view>
        <view class="x-f">
          <u-icon name="clock"></u-icon>
          <text class="ml5">{{ taskOperatorTime }}</text>
        </view>
      </u-col>
    </u-row>
  </view>
</template>

<script setup>
import nx from '@/nx'

const props = defineProps({
  task: {
    type: Object,
    required: true
  },
  active: {
    type: Boolean,
    default: false
  },
  seq: {
    type: Number,
    required: true
  }
})

const taskOperatorTime = nx.$dayjs(props.task.taskOperatorTime).format('YYYY-MM-DD HH:mm:ss')
const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}

// 与原逻辑一致的 taskStyle 方法
const taskStyle = task => {
  if ((task.weightTaskStatus === 0 || task.weightTaskStatus === 1) && task.reviewCount > 0) return 'red'
  if (task.weightTaskStatus === 2 && task.reviewCount > 0) return 'green'
  return ''
}
</script>

<style lang="scss" scoped>
.u-tab-item {
  padding: 3px;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #444;
  border-bottom: 2px dotted;
}

.u-tab-item-active {
  position: relative;
  color: #0055a2;
  font-weight: 600;
  background: #fff;
}
.seq {
  position: absolute;
  top: 9px;
  left: 12px;
  color: #fff;
  font-size: 11px;
}
</style>
