<template>
  <view class="award_page">
    <BackBar title="奖励管理" custom @back="back" />
    <Empty v-if="pageStatus === 'empty'" />
    <template v-else>
      <view class="exchange_tip"> 奖励物品均为本人发出奖励，平台概不兑换 </view>
      <scroll-view
        class="scroll_view"
        scroll-with-animation
        :scroll-y="isScroll"
        :scroll-top="scrollView.scrollTop"
        :show-scrollbar="false"
        lower-threshold="30"
        @scroll="handleScroll"
        @scrolltolower="loadData"
      >
        <SwipeAction
          :list="list"
          @handleSrcoll="handleSrcoll"
          @handleEditBtn="handleEditBtn"
          @handleDeleteBtn="handleDeleteBtn"
        />
      </scroll-view>
    </template>
    <!-- 添加 -->
    <view class="add_care" @click="handleAddItem">
      <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>
    <!-- 删除提示 -->
    <CustomPopup
      v-model="showCustomPopup"
      titleText="删除提示"
      @handleConfirmBtn="handleConfirmPopup"
    >
      <view class="popup_box"> 是否确认删除？ </view>
    </CustomPopup>
  </view>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { getRewardListApi, deleteRewardApi } from '@/api';
import Empty from '@/components/Empty/index.vue';
import CustomPopup from '@/components/CustomPopup/index.vue';
import SwipeAction from './swipeAction.vue';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const swipeRef = ref(null);
const showCustomPopup = ref(false);
const id = ref(); // 编辑删除id
const pageStatus = ref('');

const scrollView = ref({
  oldScrollTop: 0,
  scrollTop: 0,
});
const isScroll = ref(false);
const timer = ref(null);
const pageInfo = ref({
  size: 10,
  current: 1,
  total: 0,
});
const list = ref([]);
const back = () => {
  uni.navigateTo({
    url: '/pages/mine/index',
  });
};
// 新增
function handleAddItem() {
  uni.navigateTo({
    url: '/pages/mine/awardManage/awardItem',
  });
}
// 回到顶部
function handleBackTop() {
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    scrollView.value.scrollTop = scrollView.value.oldScrollTop;
    nextTick(() => {
      scrollView.value.scrollTop = 0;
    });
  }, 300);
}

function handleSrcoll(val) {
  isScroll.value = val;
}

function handleEditBtn(val) {
  uni.navigateTo({
    url: `/pages/mine/awardManage/awardItem?id=${val.id}`,
  });
}

function handleDeleteBtn(val) {
  console.log('删除', val);
  id.value = val.id;
  showCustomPopup.value = true;
}
// 确认删除
function handleConfirmPopup() {
  deleteRewardApi(id.value).then(res => {
    if (res.code === 200) {
      let index = list.value.findIndex(item => item.id === id.value);
      list.value.splice(index, 1);
      pageInfo.value.total = -1;
      showCustomPopup.value = false;
      uni.showToast({
        title: '删除成功',
        icon: 'none',
      });
    }
  });
}

// 获取奖励列表
function fetchAwardList() {
  uni.showLoading({
    title: '加载中',
  });
  getRewardListApi({
    ...pageInfo.value,
  })
    .then(res => {
      if (res.code === 200) {
        const { data } = res;
        pageStatus.value = data.totalRows === 0 ? 'empty' : '';
        pageInfo.value.total = data.totalRows;
        for (let i in data.rows) {
          list.value.push({
            ...data.rows[i],
            right: 0,
          });
        }
        wx.hideLoading();
      }
    })
    .catch(err => {
      uni.hideLoading();
    });
}

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

<style lang="scss" scoped>
.award_page {
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;

  .exchange_tip {
    padding: 20rpx 0 20rpx 30rpx;
    margin: 10rpx 0 20rpx 0;
    background-color: #615dff;
    border-radius: 20rpx;
    font-size: 30rpx;
    color: #fff;
    line-height: 42rpx;
    font-weight: 400;
  }

  .popup_box {
    margin: 50rpx 0;
    box-sizing: border-box;
  }

  .scroll_view {
    overflow-y: auto;
    height: calc(100vh - 142rpx);
  }

  .award_list {
    margin: 0 0 30rpx 0;
    border-radius: 20rpx;

    .uni-swipe_button {
      border-radius: 20rpx !important;
    }

    .award_item {
      display: flex;
      padding: 30rpx 30rpx 40rpx 30rpx;
      border-radius: 20rpx;
      background-color: #fff;
      box-sizing: border-box;
      color: #333;

      .img {
        margin-right: 30rpx;
        width: 120rpx;
        height: 120rpx;
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 8rpx 0;
        width: calc(100vw - 270rpx);

        .name {
          font-size: 32rpx;
          font-weight: 500;
        }

        .description {
          margin: 20rpx 0 0 0;
          font-size: 28rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          box-sizing: border-box;
        }
      }
    }
  }

  .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>
