<template>
  <view class="task-list">
    <view class="list" v-if="dataList.length">
      <view class="list-item" v-for="item in dataList" :key="item.id" @click="detailClick(item.id)">
        <view
          class="item-top"
          :class="{ 'disable-top': item.realFlag == '1' || item.taskStatus == '4' }"
        >
          <view
            class="top-clock"
            :class="{ 'disable-text': item.realFlag == '1' || item.taskStatus == '4' }"
          >
            <image
              v-if="item.realFlag == '1' || item.taskStatus == '4'"
              class="clock-icon"
              src="/static/images/task/clock2.png"
            />
            <image v-else class="clock-icon" src="/static/images/task/clock.png" />
            <text :class="{ 'disable-text': item.realFlag == '1' || item.taskStatus == '4' }">{{
              formatTime(item.createTime)
            }}</text>
          </view>
          <view class="top-ing" v-if="item.realFlag == '1' || item.taskStatus == '4'"
            >审核不通过</view
          >
          <uv-icon
            name="arrow-right"
            :color="item.realFlag == '1' || item.taskStatus == '4' ? '#999999' : '#fff'"
            size="16"
          />
        </view>
        <view class="item-bottom">
          <text :class="{ 'disable-text': item.realFlag == '1' || item.taskStatus == '4' }">{{
            item.taskTypeId
          }}</text>
          <text :class="{ 'disable-text': item.realFlag == '1' || item.taskStatus == '4' }"
            >+{{ item.score }}积分</text
          >
        </view>
      </view>
    </view>
    <noData v-else />
  </view>
</template>

<script setup lang="ts">
import formatTime from '@/utils/formatTime'
import { getTaskListByPackageIdApi } from '@/service/modules/getTask'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import { useLoginStore } from '@/store/login'
import noData from '@/components/noData/index.vue'

const loginStore = useLoginStore()

const total = ref()
const params = reactive({
  taskUserId: loginStore?.currentUserInfo.userId,
  scorePackageId: '',
  current: 1,
  size: 10
})

const dataList = ref<any[]>([])
async function getTaskListByPackageId() {
  const res = await getTaskListByPackageIdApi(params)
  if (res.code === 0) {
    dataList.value = dataList.value.concat(res.data.records)
    total.value = res.data.total
  }
}
onLoad((e) => {
  params.scorePackageId = e?.id
  getTaskListByPackageId()
})

onReachBottom(() => {
  if (dataList.value.length === total.value) return
  params.current++
  getTaskListByPackageId()
})

const detailClick = (id: string) => {
  uni.navigateTo({
    url: `/pages/task/task-detail/index?id=${id}`
  })
}
</script>

<style lang="scss" scoped>
.task-list {
  .list {
    margin-top: 20rpx;
    padding: 30rpx;
    .list-item {
      border-radius: 12rpx;
      margin-top: 32rpx;
      box-shadow: 0 10rpx 20rpx 10rpx #eaeaea;
      .item-top {
        box-sizing: border-box;
        border-top-right-radius: 12rpx;
        border-top-left-radius: 12rpx;
        height: 102rpx;
        background: #6eb657;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22rpx 34rpx;
        .top-clock {
          background: #ffffff;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          padding: 12rpx 18rpx;
          font-size: 26rpx;
          color: #6eb657;
          .disable-text {
            color: #9a9a9a;
          }
          .clock-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 20rpx;
          }
        }
        .top-ing {
          text-align: right;
          line-height: 1.5;
          font-size: 28rpx;
          color: #ffffff;
        }
      }
      .disable-top {
        background: linear-gradient(180deg, rgba(203, 203, 203, 1) 0%, rgba(183, 183, 183, 1) 100%);
      }
      .disable-text {
        color: #9a9a9a;
      }
      .item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 44rpx 28rpx 22rpx;
        font-size: 28rpx;
        color: #6eb657;
        .disable-text {
          color: #9a9a9a;
        }
      }
    }
  }
}
</style>
