<template>
  <view class="setting-funReport">
    <!-- 筛选框start -->
    <view class="ding">
      <uni-datetime-picker
        v-model="datetimerange"
        type="daterange"
        start-placeholder="请选择开始时间"
        end-placeholder="请选择结束时间"
        start="2000-3-20 12:00:00"
        end="2025-10-20 20:00:00"
        rangeSeparator="至"
      />
    </view>
    <!-- 筛选框end -->
    <view class="site-items" style="margin-top: 0; height: calc(100vh - 80.33px)">
      <view class="cu-list menu-avatar">
        <view
          class="cu-item"
          :class="modalName == 'move-box-' + index ? 'move-cur' : ''"
          v-for="(item, index) in funcReport"
          :key="index"
          @touchstart="ListTouchStartCange"
          @touchmove="ListTouchMove"
          @touchend="ListTouchEnd"
          :data-target="'move-box-' + index"
        >
          <view class="cu-avatar round lg" style="background: transparent">
            <image class="image-bg" style="width: 46px; height: 46px" src="@/static/images/setting/funcList.png" />
          </view>
          <view class="content">
            <view class="pro-title">
              <view class="cut">{{ item.report_name }}</view>
            </view>
            <view class="pro-des">
              <view class="text-cut">
                {{ item.remarks }}
              </view>
            </view>
            <view class="pro-date">{{ item.add_time }}</view>
          </view>
          <view class="nav-right num">
            <view class="text-grey">
              <text class="icon iconfont mr10 ml20">&#xe629;</text>
            </view>
          </view>
          <view class="move">
            <view class="bg-grey" @click.stop="editItem(item)">编辑</view>
            <view class="bg-red" @click.stop="deleteItem(item)">删除</view>
          </view>
        </view>
      </view>
      <u-empty v-if="funcReport.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
      <view v-show="isLoadMore && pages > 1">
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>
    </view>

    <view class="app-scan-fixed">
      <u-image width="67" height="67" src="@/static/images/add.png" shape="circle" @tap="goAddPage()"></u-image>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onReachBottom, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, watchEffect, getCurrentInstance } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { del, index } from "@/api/business/zhxf/funReport/index.js";

const useStore = useStores();

const { proxy } = getCurrentInstance();

const funcReport = ref([]);
const modalName = ref(null);
const dwtype = ref(0);
const datetimerange = ref(["", ""]);

const listTouchStart = ref(0);
const listTouchDirection = ref(null);

const flag = ref(false);

const pages = ref(1);
const size = ref(12);
const loadStatus = ref("loading"); //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
const isLoadMore = ref(false); //是否加载中
const deleteStatus = ref(false);

function loadData() {
  // getDeviceList({
  //   company_code: uni.getStorageSync("selectedCode"),
  //   start_time: datetimerange.value[0],
  //   end_time: datetimerange.value[1],
  //   pages: pages.value,
  //   size: size.value,
  // });
}

// 设备类型数据请求
function getDeviceList(params = {}) {
  index(params).then((res) => {
    if (deleteStatus.value) {
      funcReport.value = [];
      deleteStatus.value = false;
    }

    if (res.data.totalcount) {
      funcReport = res.data;
      if (res.data.length < size.value) {
        //判断接口返回数据量小于请求数据量，则表示此为最后一页

        isLoadMore.value = true;
        loadStatus.value = "nomore";
      } else {
        isLoadMore.value = false;
      }
    } else {
      isLoadMore.value = true;
      loadStatus.value = "nomore";
    }
  });
}

//编辑
function editItem(item) {
  uni.redirectTo({
    url: "/pages/mine/setting/funReport/funcAdd/index?id=" + item.id + "",
  });
}

// 新增
function goAddPage(type) {
  uni.redirectTo({
    url: "/pages/mine/setting/funReport/funcAdd/index",
    success: (res) => {},
    fail: () => {},
    complete: () => {},
  });
}

//删除
function deleteItem(item) {
  let deleteT = 0;
  deleteStatus.value = true;
  uni.showModal({
    title: "确认删除吗？",
    content: "",
    success: function (result) {
      if (result.confirm) {
        del({
          id: item.id,
        }).then((res) => {
          if (!res.flag) {
            alert("删除失败");
            return;
          }
          getDeviceList({ company_code: uni.getStorageSync("selectedCode") });
        });
      } else if (result.cancel) {
        console.log("用户点击取消");
      }
    }.bind(this),
  });
}

// ListTouch触摸开始
function ListTouchStartCange(e) {
  listTouchStart.value = e.touches[0].pageX;
}

// ListTouch计算方向
function ListTouchMove(e) {
  listTouchDirection.value = e.touches[0].pageX - listTouchStart.value < -80 ? "left" : "right";
}

// ListTouch计算滚动
function ListTouchEnd(e) {
  if (listTouchDirection.value == "left") {
    modalName.value = e.currentTarget.dataset.target;
  } else {
    modalName.value = null;
  }
  listTouchDirection.value = null;
}

function datetimerangeChage() {
  funcReport.value = [];
  pages.value = 1;
  loadData();
}

watchEffect(() => {
  datetimerangeChage();
});

onLoad((option) => {
  dwtype.value = option.dwtype;
  loadData();
});

onReady(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onReachBottom(() => {
  //上拉触底函数
  if (!isLoadMore.value) {
    //此处判断，上锁，防止重复请求
    isLoadMore.value = true;
    pages.value += 1;
    loadData();
  }
});
</script>

<style lang="scss">
.cu-item {
  height: 180rpx !important;
}
</style>
