<template>
  <div class="patrolTaskPipe">
    <div class="publicTabNF">
      <!-- 顶部切换卡 -->
      <div class="topTabsNF">
        <div
          class="tabsList"
          v-for="item in AllData.TopTabsData"
          :key="item.status"
          @click="topTabsChange(item)"
          :class="{ tabsListActive: AllData.ActiveID == item.status }"
        >
          <van-badge :content="item.count" solute="top-left" :offset="[10, 14]">
            <div class="box">{{ item.statusName }}</div>
          </van-badge>
        </div>
      </div>
      <!-- 中部搜索框 -->
      <div class="searchBox">
        <input
          class="uni-input searchInput"
          v-model="AllData.searchV"
          confirm-type="search"
          placeholder="综合搜索"
          @confirm="getList(true)"
        />
        <img :src="getImgPatrol('Search.png')" class="SearchIcon" alt="" @click="getList(true)" />
      </div>
    </div>
    <!-- 下部数据列表 -->
    <div class="dataListBox">
      <van-empty v-if="AllData.dataList.length == 0" style="margin-top: 20px" description="暂无数据" />
      <van-list
        v-model:loading="AllData.loading"
        :finished="AllData.finished"
        finished-text="已经到底了~~"
        :offset="50"
        @load="lowerRefresh"
      >
        <div v-for="(item, index) in AllData.dataList" :key="index" class="dataList" @click="checkDetail(item)">
          <div class="dataListTitle">
            <!-- 标题 -->
            <div class="fontView">
              <img :src="getImgPatrol('ListiIcon.png')" alt="" class="fontViewIcon" />
              {{ item.taskName }}
            </div>
          </div>
          <div class="dataListTime">
            <div class="dataListTimeLabel">巡查时间:</div>
            <div class="dataListTimeValue ellipsis">{{ item.planStartDatetime }} 至 {{ item.planEndDatetime }}</div>
          </div>
          <div class="dataListSolid">
            <!-- 分割线 -->
          </div>
          <div class="dataListBtn" v-show="item.status != 'done'">
            <div
              class="typeView"
              :class="[
                item.status == 'to_start'
                  ? 'typeClass_to_start'
                  : item.status == 'expired'
                  ? 'typeClass_expired'
                  : item.status == 'proceed'
                  ? 'typeClass_proceed'
                  : '',
              ]"
            >
              <img
                :src="
                  item.status == 'to_start'
                    ? getImgPatrol('wks.png')
                    : item.status == 'expired'
                    ? getImgPatrol('ycs.png')
                    : item.status == 'proceed'
                    ? getImgPatrol('jxz.png')
                    : ''
                "
                alt=""
                class="typeViewIcon"
              />
              {{
                item.status == 'to_start'
                  ? '未开始'
                  : item.status == 'expired'
                  ? '未完成'
                  : item.status == 'proceed'
                  ? '进行中'
                  : ''
              }}
            </div>
            <!-- 按钮 -->
            <div
              class="ListBotton ListBotton_1"
              v-show="item.status == 'proceed'"
              @click="ToPath(item.status, 1, item.id, item.sectionType)"
            >
              重新巡查
              <!--  -->
            </div>
            <div
              class="ListBotton ListBotton_2"
              v-show="item.status == 'proceed'"
              @click="ToPath(item.status, 2, item.id, item.sectionType)"
            >
              继续巡查
            </div>
            <div
              class="ListBotton ListBotton_3"
              v-show="item.status == 'to_start' || item.status == 'expired'"
              @click="ToPath(item.status, 3, item.id, item.sectionType)"
            >
              开始巡查
            </div>
          </div>
          <img :src="getImgPatrol('DoneImg.png')" v-show="item.status == 'done'" alt="" class="DoneImg" />
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, reactive, getCurrentInstance } from 'vue';
import { getImgPatrol } from '@/utils/common.js';
import { patrolTaskpage, patrolTaskbeginPatrol, status_statistics, patrolTaskRestartPatrol } from '@/api/xuncha';
import { getCurrentPositon } from '@/utils/common.js';
import { useStore } from '@/pinia/store.js';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const pinias = useStore();
const router = useRouter();
const AllData = reactive({
  loading: false,
  finished: false,
  // 顶部tab数据源
  TopTabsData: [
    {
      count: null,
      status: 'to_start',
      statusName: '未开始',
    },
    {
      count: null,
      status: 'proceed',
      statusName: '进行中',
    },
    {
      count: null,
      status: 'done',
      statusName: '已完成',
    },
  ],

  // 顶部tab选取项
  ActiveID: 'to_start',
  // 数据列表
  dataList: [],
  triggered: false,
  ListPage: {
    page: 1,
    size: 10,
    total: 0, //当前接口返回数据的总条数
  },
  searchV: '',
});

/**
 * 点击按钮执行巡查功能
 */
const ToPath = (type, num, id, sectionType) => {
  console.log(type, 'type');
  if (type == 'proceed' && num == 1) {
    // 重新
    BeginPatrol2(type, num, id, sectionType);
  } else if (type == 'to_start' || type == 'expired') {
    // 开始巡查
    BeginPatrol(type, num, id, sectionType);
  } else if (type == 'proceed' && num == 2) {
    // 继续巡查
    proxy.showSuccessToast('开始巡查');
    router.push({
      path: '/inspectionA',
      query: { type: type, num: num, id: id, sectionType: sectionType },
    });
  }
};

/**
 * 开始巡查
 */
const BeginPatrol = (type, num, id, sectionType) => {
  getCurrentPositon((lng, lat, address) => {
    console.log('获取安卓定位参数--', lng, '--', lat, '--', address);
    patrolTaskbeginPatrol({
      taskId: id,
      startPlace: address,
    }).then((res) => {
      if (res && res.code == 200) {
        proxy.showSuccessToast('开始巡查');
        router.push({
          path: '/inspectionA',
          query: { id: id },
        });
      } else {
        proxy.showFailToast(res.msg || '巡查启动失败,请稍后再试');
      }
    });
  });
};

/**
 * 重新巡查
 */
const BeginPatrol2 = (type, num, id, sectionType) => {
  patrolTaskRestartPatrol({
    taskId: id,
  }).then((res) => {
    if (res && res.code == 200) {
      proxy.showSuccessToast('重新开始巡查');
      router.push({
        path: '/inspectionA',
        query: { id: id },
      });
    } else {
      proxy.showFailToast('巡查启动失败,请稍后再试');
    }
  });
};

// 顶部tab切换事件
const topTabsChange = (item) => {
  AllData.ActiveID = item.status;
  AllData.ListPage.page = 1;
  AllData.dataList = [];
  getList(true);
};
const lowerRefresh = (e) => {
  if (AllData.ListPage.total > AllData.dataList.length) {
    AllData.ListPage.page += 1;
    getList();
  } else {
    AllData.finished = true;
    AllData.loading = false;
  }
};
// 列表查询接口
const getList = async (bol) => {
  pinias.showLoading();
  AllData.finished = false;
  AllData.loading = true;
  if (bol) {
    // 初始化分页
    AllData.ListPage.page = 1;
    AllData.ListPage.size = 10;
  }
  let params = {
    pageNum: AllData.ListPage.page,
    pageSize: AllData.ListPage.size,
    statusList: AllData.ActiveID == 'to_start' ? 'to_start,expired' : AllData.ActiveID,
    fatherCode: -1,
    taskName: AllData.searchV,
    taskUserId: pinias.userNo,
  };
  let res = await patrolTaskpage(params);
  if (res && res.code == 200) {
    if (bol) {
      // 直接覆盖所有信息
      AllData.dataList = res.data;
    } else {
      // 追加列表信息
      AllData.dataList = AllData.dataList.concat(res.data);
    }
    getTaskTypeNum(); //重新加载tab数据
    AllData.ListPage.total = res.total;
    pinias.hideLoading();
    // 加载状态结束 状态更新为false
    AllData.loading = false;
  }
};

/**
 * 获取当前任务类型的各个数量
 */
const getTaskTypeNum = () => {
  let query = {
    taskUserId: pinias.userNo,
    taskName: AllData.searchV,
    statusList: AllData.ActiveID == 'to_start' ? 'to_start,expired' : AllData.ActiveID,
  };
  status_statistics(query).then((res) => {
    if (res && res.code == 200) {
      let data = res.data;
      AllData.TopTabsData = [
        {
          count: null,
          status: 'to_start',
          statusName: '未完成',
        },
        {
          count: null,
          status: 'proceed',
          statusName: '执行中',
        },
        {
          count: null,
          status: 'done',
          statusName: '已完成',
        },
      ];
      data.forEach((v, i) => {
        // 处理数据 这里不要 expired 已超时的状态 status不会变,遍历获取其状态的值
        if (v.status == 'to_start' || v.status == 'expired')
          AllData.TopTabsData[0].count = AllData.TopTabsData[0].count + v.count;
        if (v.status == 'proceed') AllData.TopTabsData[1].count = v.count;
        if (v.status == 'done') AllData.TopTabsData[2].count = v.count;
      });
    }
  });
};

// 已完成跳转详情
function checkDetail(query) {
  if (query.status == 'done') {
    console.log('234');
    router.push({
      path: '/patroLogDetails',
      query,
    });
  }
}

onMounted(() => {
  getList();
});
</script>
<style lang="less">
.patrolTaskPipe {
  width: 100%;
  height: 100%;
  background: #fafafa;
  .popup-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: rgba(176, 176, 176, 1);
  }

  .dataListBox {
    width: 100%;
    height: calc(100vh - 210px - var(--van-nav-bar-height));
    overflow: auto;
    box-sizing: border-box;
    padding: 30px;
    // background: yellowgreen;
    .dataList {
      width: 100%;
      height: auto;
      min-height: 210px;
      max-height: 274px;
      margin-bottom: 14px;
      background: #ffffff;
      box-shadow: 0px 5px 5px 0px rgba(18, 69, 101, 0.1);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      box-sizing: border-box;
      padding: 0px 30px 0px 30px;
      position: relative;

      .dataListTitle {
        width: 100%;
        height: 86px;
        line-height: 86px;
        box-sizing: border-box;
        border-bottom: 1px solid #eaeaea;

        .fontView {
          width: 100%;
          height: 86px;
          line-height: 86px;
          float: left;
          font-weight: 400;
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #121212;
          white-space: nowrap;
          overflow: auto;

          .fontViewIcon {
            width: 27px;
            height: 27px;
            vertical-align: middle;
          }
        }
      }

      .dataListTime {
        width: 100%;
        height: 84px;
        line-height: 84px;
        display: flex;

        .dataListTimeLabel {
          margin-right: 5px;
          height: 84px;
          line-height: 84px;
          font-weight: 400;
          color: #9f9f9f;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #565656;
        }

        .dataListTimeValue {
          flex: 1;
          width: calc(100% - 160px);
          height: 84px;
          line-height: 84px;
          white-space: nowrap;
          overflow: hidden;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #7b7b7e;
        }
      }

      .dataListBtn {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        padding-top: 15px;
        position: relative;

        .typeView {
          width: auto;
          width: 126px;
          height: 40px;
          line-height: 40px;
          border-radius: 20px;
          float: right;
          position: absolute;
          left: 10px;
          top: 30px;
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;

          .typeViewIcon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            float: left;
            margin: 5px;
          }
        }

        // 四个状态的样式 0:未开始  1:超时   2:进行中   3:已完成
        .typeClass_to_start {
          background: #2c79f9;
          font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular;
          font-weight: 400;
        }

        .typeClass_expired {
          background: #ff5959;
          font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular;
          font-weight: 400;
        }

        .typeClass_proceed {
          background: #0ac3f1;
          font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular;
          font-weight: 400;
        }

        .typeClass_done {
          background: #f5fff0;
          font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular;
          font-weight: 400;
          color: #67c23a;
        }

        .ListBotton {
          float: right;
          width: 175px;
          height: 60px;
          line-height: 60px;
          background: #ffffff;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          text-align: center;
          font-size: 24px;
          font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular;
          font-weight: 400;
          color: #409eff;
          margin-left: 20px;
        }

        .ListBotton_1 {
          color: #ffffff;
          background: #145bf7;
        }

        .ListBotton_2 {
          border: 2px solid #145bf7;
          border-radius: 10px;
          color: #145bf7;
        }

        .ListBotton_3 {
          color: #ffffff;
          background: #145bf7;
        }
      }

      .DoneImg {
        position: absolute;
        width: 120px;
        height: 120px;
        right: 10px;
        top: 10px;
      }
    }
  }
}
</style>