<script setup>
const props = defineProps({
  list: {
    type: Array,
    required: true,
    default: () => []
  }
})

const emits = defineEmits(["click"]);

const handleClockInPage = (item) => {
  emits("click", item);
}
</script>

<template>
  <div class="item-wrapper">
    <template v-for="(item, index) in list" :key="index">
      <div class="item" @click="handleClockInPage(item)">
        <div class="rowWrapper">
          <div class="title">{{ item?.fgMc }}</div>
          <div class="progress">{{ item?.bddAllProgress || 0 }}%</div>
        </div>

        <div class="rowWrapper mt co99 fz12">
          <div>预警等级：{{ item?.fgYjdjLabel }}</div>
          <div>任务日期：{{ item?.rwRq }}</div>
        </div>
        <div class="rowWrapper mt co99 fz12">
          <div>高发类型：{{ item?.fgJqtjLx }}</div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.item-wrapper {
  margin: 2vw;

  .item {
    padding: 2vw;
    border-top: 0.13333vw solid #f4f5f1;

    .rowWrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 14px;
      }

      .progress {
        font-weight: 400;
        font-size: 3.73vw;
        color: #3E6EE8;
      }
    }

    .fz12 {
      font-size: 3.2vw;
    }

    .co99 {
      color: #999999;
    }

    .mt {
      margin-top: 2vw;
    }
  }
}
</style>
