<template>
  <view class="card-item" @click="detailClick">
    <view class="title">
      <view class="t-l">
        <text>
          {{ props!.item!.scorePackageName
          }}{{ props!.item!.packageSn ? `(${props!.item!.packageSn})` : '' }}
        </text>
        <view class="tags">
          <uv-tags
            v-if="props!.item!.packageType1 === '1' || props!.item!.packageType1 === '6'"
            size="mini"
            borderColor="rgba(63, 163, 241, .1)"
            bgColor="rgba(63, 163, 241, .1)"
            text="积分值"
            color="#3FA3F1"
            plain
          />
          <uv-tags
            v-if="props!.item!.packageType1 === '2'"
            size="mini"
            borderColor="rgba(76,217,100, .1)"
            bgColor="rgba(76,217,100, .1)"
            color="#4cd964"
            text="任务量"
            plain
          />
          <uv-tags
            v-if="props!.item!.packageType1 === '3'"
            size="mini"
            borderColor="rgba(221,82,77, .1)"
            bgColor="rgba(221,82,77, .1)"
            color="#dd524d"
            text="通用"
            plain
          />
          <uv-tags
            v-if="props!.item!.packageType1 === '4'"
            size="mini"
            borderColor="rgba(221,82,77, .1)"
            bgColor="rgba(221,82,77, .1)"
            color="#dd524d"
            text="特定"
            plain
          />
        </view>
      </view>
      <view class="t-r">
        <view class="btn" v-if="props.type === '1'" @click.stop="getTaskClick">立即领取</view>
        <view class="status" v-else-if="props.type === '2'">
          <template v-if="props!.item!.enableType == '0' && props!.item!.status === '0'">
            <view class="point" :style="{ background: '#eeeeee' }"></view>未领取
          </template>
          <template v-if="props!.item!.enableType == '0' && props!.item!.status === '1'">
            <view class="point" :style="{ background: '#288AFF' }"></view>审核中
          </template>
          <template v-if="props!.item!.enableType == '0' && props!.item!.status === '2'">
            <view class="point" :style="{ background: '#34C939' }"></view>申领审核通过
          </template>
          <template v-if="props!.item!.enableType == '0' && props!.item!.status === '3'">
            <view class="point" :style="{ background: '#DF2E2B' }"></view>审核未通过
          </template>
          <template v-if="props!.item!.enableType == '1'">
            <view class="point" :style="{ background: '#DF2E2B' }"></view>已终止，全部收回
          </template>
          <template v-if="props!.item!.enableType == '2'">
            <view class="point" :style="{ background: '#DF2E2B' }"></view>已终止，剩余收回
          </template>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="info-list">
        <text>发包企业：{{ props!.item!.packageEntName }}</text>
      </view>
      <view class="info-list">
        <text>需求人数：{{ props!.item!.userGetNum }}/{{ props!.item!.userNum }}</text>
        <text>预计积分值：{{ props!.item!.score }}分</text>
        <text v-if="props!.item!.taskNum">任务数：{{ props!.item!.taskNum }}个</text>
      </view>
      <view class="info-list">
        <text>发布时间：{{ formatTime(props!.item!.createTime) }}</text>
      </view>
      <view class="info-list">
        <text>需求描述：{{ props!.item!.description || '无' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import formatTime from '@/utils/formatTime'
import { defineEmits } from 'vue'

const emit = defineEmits(['getTaskClick'])

const props = defineProps({
  item: Object,
  type: String
})

const getTaskClick = () => {
  emit('getTaskClick')
}

const detailClick = () => {
  uni.navigateTo({
    url: `/pages-sub-packages/get-task/detail?id=${props!.item!.id}`
  })
}
</script>

<style lang="scss" scoped>
.card-item {
  margin-bottom: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  width: 690rpx;
  min-height: 300rpx;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .t-l {
      flex: 1;
      min-height: 56rpx;
      .tags {
        display: inline-block;
        margin-left: 20rpx;
      }
    }

    .t-r {
      .btn {
        margin-left: 20rpx;
        width: 160rpx;
        background: #6eb657;
        border-radius: 200rpx;
        text-align: center;
        line-height: 56rpx;
        color: #fff;
        font-size: 28rpx;
        font-weight: 500;
      }
      .status {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 28rpx;
        font-weight: 400;
        .point {
          line-height: 56rpx;
          display: inline-block;
          width: 10rpx;
          height: 10rpx;
          border-radius: 100%;
          margin-right: 10rpx;
        }
      }
    }
  }
  .content {
    .info-list {
      margin-bottom: 10rpx;
      text {
        font-size: 24rpx;
        color: #999;
        margin-right: 10rpx;
        font-weight: 400;
      }
    }
  }
}
</style>
