<template>
  <u-navbar leftIconColor="#fff" :autoBack="false" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color" @leftClick="handleToBack()">
    <template #center>
      <view class="u-navbar__content__center__item"> 采集记录 </view>
    </template>
    <template #right>
      <view class="u-navbar__content__right__item ">
        <text class="iconfont oaIcon-shaixuan font18" @click="handleIconClick('筛选')"></text>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="scroll-height"
    :total="state.total"
    :refresherEnabled="true"
    :refresherEnabledTitle="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view v-if="show">
        <uni-datetime-picker v-model="dateTimeRange" type="daterange" rangeSeparator="~" @change="confirm" />
      </view>
      <view class="collect-area bg-white" v-for="(cu, index) in state.siteList" :key="index">
        <view class="collect-area_left">
          <u-image style="margin: auto" width="40" height="40" src="http://192.168.123.165:9300/statics/images/xunjian/scan.png" v-if="cu.siteType == 1" shape="circle"></u-image>

          <u-image style="margin: auto" width="40" height="40" src="http://192.168.123.165:9300/statics/images/xunjian/NFC.png" v-if="cu.siteType == 2" shape="circle"></u-image>
        </view>
        <view class="collect-area_center">
          <view class="collect-area_center_title">
            {{ cu.siteName }}
          </view>

          <view class="collect-area_center_time">
            {{ cu.createTime == "" || cu.createTime == null ? "无" : cu.createTime }}
          </view>
        </view>
        <view style="margin: auto"></view>
        <view class="collect-area_right">
          <view class="collect-area_right_item"> 已提交 </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { siteList } from "@/api/business/zhaf/xunJian/collect.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const show = ref(false);
const dateTimeRange = ref("");
const state = reactive({
  siteList: [],
  total: 0,
  startTime: "",
  endTime: "",
});

/**
 * @日期选中事件回调
 */
function confirm(e) {
  state.startTime = e[0];
  state.endTime = e[1];
  handleSelectApi();
}

/**
 * @采集记录接口查询
 * @api请求
 */
async function handleSelectApi() {
  if (!proxy.$common.isNetwork()) {
    return false;
  }

  siteList({
    startTime: state.startTime, //开始时间
    endTime: state.endTime, //结束时间
  })
    .then((res) => {
      if (res.status == "SUCCESS") {
        state.siteList = res.data;
        state.total = res.data.length;
      } else {
      }
    })
    .catch((err) => {
      proxy.$modal.msg(err);
    });
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  state.startTime = "";
  state.endTime = "";
  handleSelectApi();
}

//右侧按钮点击事件
function handleIconClick(type) {
  if (type === "筛选") {
    show.value = !show.value;
  }
}

//返回
function handleToBack() {
  proxy.$tab.navigateBack(1); //返回到需要执行方法的页面
}

onLoad((options) => {
  handleSelectApi();
});

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

onReady(() => {});
</script>

<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
}

.collect-area {
  display: flex;
  padding: 15px;
  margin-bottom: 15px;

  &_left {
    display: flex;
    margin-right: 15px;
  }

  &_center {
    &_title {
      display: flex;
      font-size: 15px;
      margin-bottom: 5px;
      height: 20px;
      line-height: 20px;
    }

    &_time {
      font-size: 13px;
      color: #a1a1a1;
    }
  }

  &_right {
    display: flex;
    padding: 0 15px;

    &_item {
      padding: 0;
      margin: auto;
      font-size: 14px;
      color: #a1a1a1;
    }
  }
}
</style>
