<template>
  <div class="patrolTaskPipe">
    <div class="publicTabNF">
      <!-- 顶部切换卡 -->
      <div class="topTabsNF">
        <div
          class="tabsList"
          v-for="(item, index) 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="getPatrolTaskPage(true)"
        />
        <img :src="getImgPatrol('Search.png')" class="SearchIcon" alt="" @click="getPatrolTaskPage(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">
          <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 { getCurrentPositon } from '@/utils/common.js';
import { useStore } from '@/pinia/store.js';
import { useRouter } from 'vue-router';
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: [
    {
      taskName: '河道线路巡查测试2023090122',
      planStartDatetime: '2023-09-22 00:00:00',
      planEndDatetime: '2023-09-19 23:59:59',
      status: 'expired',
      sectionType: '',
    },
    {
      taskName: '河道线路巡查测试2023090122',
      planStartDatetime: '2023-09-22 00:00:00',
      planEndDatetime: '2023-09-19 23:59:59',
      status: 'proceed',
    },
    {
      taskName: '河道线路巡查测试2023090122',
      planStartDatetime: '2023-09-22 00:00:00',
      planEndDatetime: '2023-09-19 23:59:59',
      status: 'to_start',
    },
    {
      taskName: '河道线路巡查测试2023090122',
      planStartDatetime: '2023-09-22 00:00:00',
      planEndDatetime: '2023-09-19 23:59:59',
      status: 'to_start',
    },
  ],
  triggered: false,
  ListPage: {
    page: 1,
    size: 10,
    total: 0, //当前接口返回数据的总条数
  },
  searchV: '',
});

// 顶部tab切换事件
const topTabsChange = (item) => {
  AllData.ActiveID = item.status;
  AllData.ListPage.page = 1;
  // AllData.dataList = [];
  // getPatrolTaskPage(true);
};

/**
 * 点击按钮执行巡查功能
 */
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: '/inspectionPipe',
      // query: { type: type, num: num, id: id, sectionType: sectionType },
    });
  }
};

//根据经纬度获取地名
/**
 * 开始巡查
 */
const BeginPatrol = (type, num, id, sectionType) => {
  router.push({
    path: '/inspectionPipe',
  });

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

/**
 * 获取当前状态下的任务列表
 * bol:true: 重置分页条件
 */
const getPatrolTaskPage = async (bol) => {
  pinias.showLoading();
  AllData.finished = false;
  AllData.loading = false;
};
const lowerRefresh = (e) => {
  AllData.finished = true;
  AllData.loading = false;
  // if (AllData.ListPage.total > AllData.dataList.length) {
  //   AllData.ListPage.page += 1;
  //   getPatrolTaskPage();
  // } else {
  //   AllData.finished = true;
  //   AllData.loading = false;
  // }
};
</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;

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