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

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

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

const handleClaim = (item) => {
  emits("claim", item);
}
</script>

<template>
  <div class="item-wrapper">
    <template v-for="(item, index) in list" :key="index">
      <div class="card" @click="handleClockInPage(item)">
        <div class="title">*************任务</div>
        <div class="row">
          <div class="col">方格编号：{{ item?.fgId || '04' }}</div>
          <div class="col right">任务日期：{{ item?.rwRq }}</div>
        </div>
        <div class="btn" v-if="showReceive" @click.stop="handleClaim(item)">领取</div>
      </div>
    </template>
  </div>
</template>

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

  .card {
    background: #fff;
    border-radius: 3.73vw;
    padding: 4vw;
    margin-bottom: 3vw;
    box-shadow: 0 1.6vw 4vw rgba(0, 0, 0, 0.04);

    .title {
      font-size: 4vw;
      font-weight: bold;
      color: #333;
      margin-bottom: 3vw;
    }

    .row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4vw;
      font-size: 3.4vw;
      color: #999;
      
      .col {
        &.right {
          text-align: right;
        }
      }
    }

    .btn {
      height: 11vw;
      line-height: 11vw;
      text-align: center;
      border-radius: 6vw;
      color: #ffffff;
      background: linear-gradient(90deg, #28A5FF 0%, #3E6EE8 100%);
      font-size: 4vw;
      box-shadow: 0 2vw 4vw rgba(62, 110, 232, 0.3);
      
      &.disabled {
        background: #ccc;
        box-shadow: none;
      }
    }
  }
}
</style>
