<script setup>
import { ref, reactive, onMounted } from "vue";
import TopNav from "@/components/topNav.vue";
import Search from "@/components/search.vue";
import PatrolWrapper from "./copmonents/patrolWrapper.vue";
import { fetchTaskList } from "@/api/patrolList";
import { getDictListByCode } from "@/api/common";
import router from "@/router";
import SxPopup from "@/components/SxPopup.vue";
import SelectTime from "@/components/SelectTime.vue";
import { hintToast } from "@/utils/tools";
const tabsIndex = ref(1);
const showPopup = ref(false);
const timeShow = ref(false);
const finished = ref(false);
const loading = ref(false);
const loadingRefresh = ref(false);
const searchValue = ref("")
const pageData = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0,
})

const data = reactive({
  list: [],
  dictList: [],
  startTime: '',
  appRwlx: '01',//app任务类型 01当日任务 02历史任务
})

const onSearch = () => {
  loading.value = true;
  pageData.pageCurrent = 1;
  data.list = []
  getData()
}

const onRefresh = () => {
  tabsIndex.value++;
  loading.value = false;
  loadingRefresh.value = true;
  finished.value = false;
  pageData.pageCurrent = 1;
  data.list = []
  getData()
}

const onLoad = () => {
  if (data.list.length >= pageData?.total) {
    finished.value = true;
    return
  }
  pageData.pageCurrent++
  getData()
}

const handleClaim = (item) => {
  hintToast("领取成功");
  setTab('history')
}

const handleClockInPage = (item) => {
  if (activeTab.value === 'history') {
    router.push({ path: '/taskHistoryDetail', query: { id: item.id, current: pageData.pageCurrent } });
  }
}

const getData = async () => {
  const { total, ...ret } = pageData
  loading.value = true;
  try {
    const res = await fetchTaskList({ ...ret, fgMc: searchValue.value, rwRq: data.startTime, appRwlx: data.appRwlx })
    if (res?.records.length > 0) {
      data.list = data.list.concat(res?.records) || []
    }
    pageData.total = res?.total
    loading.value = false;
    loadingRefresh.value = false;
  } catch (error) {
    loading.value = false;
    loadingRefresh.value = false;
  }
}

const getDictList = async () => {
  const res = await getDictListByCode({ dictCode: 'D_ZDXL_FGXLRW_YJDJ' })
  if (res && res?.itemList?.length > 0) {
    data.dictList = res?.itemList
  }
}
const onSelectTime = (val) => {
  data.startTime = val;
  timeShow.value = false
}

const onClickTime = () => {
  timeShow.value = true;
}

const activeTab = ref('today');
const setTab = (tab) => {
  activeTab.value = tab;
  if (tab === 'today') {
    data.appRwlx = '01'
  } else {
    data.appRwlx = '02'
  }
  pageData.pageCurrent = 1;
  data.list = [];
  getData();
};

const onConfirm = () => {
  pageData.pageCurrent = 1;
  data.list = []
  getData()
  showPopup.value = false;
}

const handleReset = () => {
  data.startTime = ""
  onConfirm()
}


onMounted(async () => {
  await getDictList()
  await getData()
})
</script>

<template>
  <div>
    <TopNav nav-title="任务中心" show-left />
    <van-sticky>
      <div class="sticky_box">
        <div class="segment">
          <div class="segment-bg">
            <div class="segment-item" :class="{ active: activeTab === 'today' }" @click="setTab('today')">当日任务</div>
            <div class="segment-item" :class="{ active: activeTab === 'history' }" @click="setTab('history')">历史任务</div>
          </div>
        </div>
        <search :isSx="true" placeholder="请输入方格名称进行查询" v-model="searchValue" @update:sx="showPopup = !showPopup"
          @update:modelValue="onSearch" />
      </div>
    </van-sticky>

    <sx-popup :showPopup="showPopup" :p_top="150" @update:close="showPopup = false" @update:onConfirm="onConfirm"
      @reset="handleReset">
      <div class="time_box">
        <van-field v-model="data.startTime" label-width="60px" placeholder="请选择时间" input-align="left"
          right-icon="arrow-down" readonly @click.stop="onClickTime" />
      </div>
    </sx-popup>

    <select-time v-if="timeShow" time-type="选择任务日期" @update:time="onSelectTime" @update:cancelTime="timeShow = false" />

    <div class="content">
      <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" offset="1"
          :immediate-check="false">
          <patrol-wrapper :list="data?.list" :show-receive="activeTab === 'today'" @click="handleClockInPage"
            @claim="handleClaim" />

          <van-empty description="暂无采集数据" image="default" v-if="data.list.length <= 0 && loadingRefresh === false" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style scoped lang="scss">
.time_box {
  padding: 0 3vw 3vw;
}

.segment {
  padding: 0 4vw 3vw;
  box-sizing: border-box;
  margin-top: 13.5vw;

  .segment-bg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2f3f5;
    border-radius: 6vw;
    padding: 1vw;
  }

  .segment-item {
    flex: 1;
    text-align: center;
    padding: 2.5vw 0;
    border-radius: 5vw;
    font-size: 3.73vw;
    color: #999999;
  }

  .segment-item.active {
    color: #ffffff;
    background: linear-gradient(90deg, #28A5FF 0%, #3E6EE8 100%);
    box-shadow: 0 1vw 2vw rgba(62, 110, 232, 0.2);
  }
}

.header {
  margin-top: 13vw;
}

.content {
  margin-bottom: 16vw;
}
</style>
