<template>
  <view class="task_page">
    <BackBar title="任务管理" custom @back="back" />
    <Empty v-if="pageStatus === 'empty'" />
    <template v-else>
      <scroll-view
        class="scroll_view"
        scroll-with-animation
        scroll-y
        :scroll-top="scrollView.scrollTop"
        :show-scrollbar="false"
        lower-threshold="30"
        @scroll="handleScroll"
        @scrolltolower="loadData"
      >
        <view class="list">
          <view v-for="(i, idx) in list" :key="idx" class="item" @click="handleTaskItem(1, i)">
            <view class="header">
              <image
                :src="
                  i.customTask === 0
                    ? `${OSS_URL}/iconfont/system_task_icon.png`
                    : `${OSS_URL}/iconfont/custom_task_icon.png`
                "
                mode=""
                class="task_icon"
              ></image>
              <text>{{ i.title }}</text>
            </view>
            <view class="reward">
              <image
                v-for="(o, idx2) in i.rewardList"
                :key="idx2"
                :src="o.rewardImageUrl"
                mode=""
                class="reward_img"
              ></image>
            </view>
            <view class="date">
              <view class="range">
                任务有效期：{{ dayjs(i.startTime).format('YYYY.MM.DD') }}-{{
                  dayjs(i.endTime).format('YYYY.MM.DD')
                }}
              </view>
              <view class="send">
                {{ dayjs(i.sendTime).format('YYYY.MM.DD HH:mm') }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <!-- 添加 -->
    <view class="add_care" @click="handleTaskItem(2, '')">
      <image :src="`${OSS_URL}/add_icon.png`" mode="" class="add_icon"> </image>
    </view>
    <!-- 回到顶部 -->
    <view v-if="scrollView.oldScrollTop > 0" class="top" @click="handleBackTop">
      <image :src="`${OSS_URL}/backTop2.png`" mode="" class="top_icon"> </image>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { getTaskListApi } from '@/api';
import dayjs from 'dayjs';
import Empty from '@/components/Empty/index.vue';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const timer = ref(null);
const pageStatus = ref();
const scrollView = ref({
  oldScrollTop: 0,
  scrollTop: 0,
});
const pageInfo = ref({
  size: 10,
  current: 1,
  total: 0,
});
const list = ref([]); // 任务列表
const back = () => {
  uni.navigateTo({
    url: '/pages/mine/index',
  });
};
// 任务列表
async function fetchTaskList() {
  try {
    uni.showLoading({
      title: '加载中...',
    });
    const { data } = await getTaskListApi({
      ...pageInfo.value,
    });
    pageInfo.value.total = data.totalRows;
    pageStatus.value = data.totalRows !== 0 ? '' : 'empty';
    for (let i in data.rows) {
      list.value.push({
        ...data.rows[i],
      });
    }
    uni.hideLoading();
  } catch (err) {
    uni.hideLoading();
  }
}
// 新增
function handleTaskItem(type, item) {
  let details = encodeURIComponent(JSON.stringify(item));
  uni.navigateTo({
    url: `/pages/mine/taskManage/taskItem?pageType=${type}&details=${details}`,
  });
}
// 回到顶部
function handleBackTop() {
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    scrollView.value.scrollTop = scrollView.value.oldScrollTop;
    nextTick(() => {
      scrollView.value.scrollTop = 0;
    });
  }, 300);
}

function handleScroll(e) {
  e.stopPropagation();
  scrollView.value.oldScrollTop = e.detail.scrollTop;
}
// 加载更多
function loadData() {
  if (list.value.length < pageInfo.value.total) {
    pageInfo.value.current++;
    fetchTaskList();
  }
}
onMounted(() => {
  list.value = [];
  pageInfo.value.current = 1;
  fetchTaskList();
});
</script>

<style lang="scss" scoped>
.task_page {
  padding: 0 30rpx 0 30rpx;

  scroll-view ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }

  .scroll_view {
    overflow-y: auto;
    height: 100vh;

    .list {
      margin-top: 30rpx;

      .item {
        padding: 30rpx 30rpx 40rpx 30rpx;
        margin-bottom: 16rpx;
        border-radius: 20rpx;
        background-color: #fff;
        box-sizing: border-box;

        .header {
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 32rpx;
          color: #333;
          line-height: 45rpx;

          .task_icon {
            margin-right: 10rpx;
            width: 40rpx;
            height: 40rpx;
          }
        }

        .reward {
          margin: 30rpx 0 16rpx 0;

          .reward_img {
            margin-right: 32rpx;
            width: 100rpx;
            height: 100rpx;
          }
        }

        .date {
          color: #666666;

          .range {
            margin-bottom: 30rpx;
            line-height: 40rpx;
            font-size: 28rpx;
          }

          .send {
            line-height: 36rpx;
            font-size: 26rpx;
          }
        }
      }
    }
  }

  .add_care {
    position: fixed;
    bottom: 316rpx;
    right: 30rpx;

    .add_icon {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .top {
    position: fixed;
    bottom: 186rpx;
    right: 30rpx;

    .top_icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
</style>
