image.png

<template>
  <div>
    <!--    頭部-->
    <div class="top fs26">
      <div class="flex align-center">
        <div class="flex-column">
          <div class="banks">您管理的網(wǎng)點(diǎn)</div>
          <div class="fs48">{{ manageInfo.manageComNum }}</div>
        </div>
        <div class="line"></div>
        <div>
          <div class="mb20">今日已拜訪網(wǎng)點(diǎn)：{{ manageInfo.todayVisit }}</div>
          <div class="mb20">近7天未拜訪網(wǎng)點(diǎn)：{{ manageInfo.lastWeekNoVisit }}</div>
          <div>近10天未拜訪網(wǎng)點(diǎn)：{{ manageInfo.lastTenDayNoVisit }}
            <img src="../../images/returnDanger.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <!--    近10天未拜訪網(wǎng)點(diǎn)-->
    <van-cell class="clock-data" center>
      <template #title>
        <span class="title fw600 fs34"><p class="ml25">近10天未拜訪網(wǎng)點(diǎn), <span class="red">最需關(guān)注網(wǎng)點(diǎn)</span></p></span>
      </template>
    </van-cell>
    <div>
      <van-cell is-link center class="clock-data"
                v-for="(tenItem,tenIndex) in lastTenDayNoVisitList" :key="tenIndex+'11'">
        <template #title>
          <div class="flex flex-space-between fs26">
            <div class="flex">
              <div class="bank-title fw600 ellipsis">{{ tenItem.name }}</div>
              <div class="bank-num ellipsis">本月出單：{{ tenItem.visitNum }}</div>
            </div>
            <div>
              <div class="tblue" @click="goClockDetail(tenItem)">歷史打卡</div>
            </div>
          </div>
        </template>
        <template #right-icon>
          <van-icon name="arrow" class="tblue"/>
        </template>
      </van-cell>
    </div>
    <!--    <div v-if="lastTenDayNoVisitList&&lastTenDayNoVisitList.length==0" class="tc cl99 fs28 mt16">暫無數(shù)據(jù)</div>-->
    <div v-if="lastTenDayNoVisitList&&lastTenDayNoVisitList.length==0">
      <van-empty description="暫無數(shù)據(jù)"/>
    </div>
    <van-pagination v-if="lastTenDayNoVisitList&&lastTenDayNoVisitList.length>0" v-model="currentPage10" :page-count="pageCount10" mode="simple" @change="changePage10"/>
    <!--    <div v-if="lastTenDayNoVisitList1.length>3">-->
    <!--      <div class="flex align-center flex-center all fs26 cl66 fw600" v-if="!isAll1" @click="showTenAll">-->
    <!--        <div>全部</div>-->
    <!--        <i class="el-icon-caret-bottom"></i>-->
    <!--      </div>-->
    <!--      <div class="flex align-center flex-center all fs26 cl66 fw600" v-else @click="showTenAll">-->
    <!--        <div>收起</div>-->
    <!--        <i class="el-icon-caret-top"></i>-->
    <!--      </div>-->
    <!--    </div>-->


    <!--    近7天未拜訪網(wǎng)點(diǎn)-->
    <van-cell class="clock-data" center>
      <template #title>
        <span class="title fw600 fs34"><p class="ml25">近7天未拜訪網(wǎng)點(diǎn), <span class="red">需關(guān)注網(wǎng)點(diǎn)</span></p></span>
      </template>
    </van-cell>
    <van-cell is-link center class="clock-data" v-for="(weekItem,weekIndex) in lastWeekNoVisitList"
              :key="weekIndex+'22'">
      <template #title>
        <div class="flex flex-space-between fs26">
          <div class="flex">
            <div class="bank-title fw600 ellipsis">{{ weekItem.name }}</div>
            <div class="bank-num ellipsis">本月出單：{{ weekItem.visitNum }}</div>
          </div>
          <div>
            <div class="tblue" @click="goClockDetail(weekItem)">歷史打卡</div>
          </div>
        </div>
      </template>
      <template #right-icon>
        <van-icon name="arrow" class="tblue"/>
      </template>
    </van-cell>
    <!--    <div v-if="lastWeekNoVisitList1.length>3">-->
    <!--      <div class="flex align-center flex-center all fs26 cl66 fw600" v-if="!isAll2" @click="showWeekAll">-->
    <!--        <div>全部</div>-->
    <!--        <i class="el-icon-caret-bottom"></i>-->
    <!--      </div>-->
    <!--      <div class="flex align-center flex-center all fs26 cl66 fw600" v-else @click="showWeekAll">-->
    <!--        <div>收起</div>-->
    <!--        <i class="el-icon-caret-top"></i>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div v-if="lastWeekNoVisitList&&lastWeekNoVisitList.length==0" class="tc cl99 fs28 mt16">暫無數(shù)據(jù)</div>-->
    <div v-if="lastWeekNoVisitList&&lastWeekNoVisitList.length==0">
      <van-empty description="暫無數(shù)據(jù)"/>
    </div>
    <van-pagination v-if="lastWeekNoVisitList&&lastWeekNoVisitList.length>0" v-model="currentPage7" :page-count="pageCount7" mode="simple" @change="changePage7"/>

    <!--    今日拜訪網(wǎng)點(diǎn)-->
    <van-cell>
      <template #title>
        <span class="title fw600 fs34"><p class="ml25">今日拜訪網(wǎng)點(diǎn)</p></span>
      </template>
    </van-cell>
    <van-cell is-link center class="clock-data" v-for="(todayItem,todayIndex) in todayVisitList" :key="todayIndex+'33'">
      <template #title>
        <div class="flex flex-space-between fs26">
          <div class="flex">
            <div class="bank-title fw600 ellipsis">{{ todayItem.name }}</div>
            <div class="bank-num ellipsis">本月出單：{{ todayItem.visitNum }}</div>
          </div>
          <div>
            <div class="tblue" @click="goClockDetail(todayItem)">歷史打卡</div>
          </div>
        </div>
      </template>
      <template #right-icon>
        <van-icon name="arrow" class="tblue"/>
      </template>
    </van-cell>
    <!--    <div v-if="todayVisitList1.length>3">-->
    <!--      <div class="flex align-center flex-center all fs26 cl66 fw600" v-if="!isAll3" @click="showTodayAll">-->
    <!--        <div>全部</div>-->
    <!--        <i class="el-icon-caret-bottom"></i>-->
    <!--      </div>-->
    <!--      <div class="flex align-center flex-center all fs26 cl66 fw600" v-else @click="showTodayAll">-->
    <!--        <div>收起</div>-->
    <!--        <i class="el-icon-caret-top"></i>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div v-if="todayVisitList&&todayVisitList.length==0" class="tc cl99 fs28 mt16">暫無數(shù)據(jù)</div>-->
    <div v-if="todayVisitList&&todayVisitList.length==0">
      <van-empty description="暫無數(shù)據(jù)"/>
    </div>
    <van-pagination v-if="todayVisitList&&todayVisitList.length>0" v-model="currentPage1" :page-count="pageCount1" mode="simple"/>
    <!--        <van-cell is-link center class="clock-data">-->
    <!--          <template #title>-->
    <!--            <div class="flex flex-space-between fs26">-->
    <!--              <div class="flex">-->
    <!--                <div class="bank-title fw600 ellipsis">北京郵政代理局懷柔區(qū)北京分布昭陽(yáng)區(qū)</div>-->
    <!--                <div class="bank-num ellipsis">本月出單：887</div>-->
    <!--              </div>-->
    <!--              <div>-->
    <!--                <div class="tblue">歷史打卡</div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--          <template #right-icon>-->
    <!--            <van-icon name="arrow" class="tblue"/>-->
    <!--          </template>-->
    <!--        </van-cell>-->
  </div>
</template>

<script>
import {getCheckinDataSecondDetail} from "../../global/api";

export default {
  name: "bankClockData",
  data() {
    return {
      all1: false,
      all2: false,
      all3: false,//三個(gè)全部狀態(tài)值標(biāo)識(shí)
      tenList: [],
      sevenList: [],
      todayList: [],
      manageInfo: {
        manageComNum: 0,
        lastTenDayNoVisit: 0,
        lastWeekNoVisit: 0,
        todayVisit: 0,
      },//網(wǎng)點(diǎn)打卡近幾天的詳細(xì)信息
      todayVisitList: [],//今日列表數(shù)據(jù)
      lastWeekNoVisitList: [],//
      lastTenDayNoVisitList: [],
      isAll1: false,//近10天未拜訪的全部標(biāo)識(shí)符
      isAll2: false,//近7天未拜訪的全部標(biāo)識(shí)符
      isAll3: false,//今日未拜訪的全部標(biāo)識(shí)符
      currentPage10: 1,//近10天分頁(yè)當(dāng)前頁(yè)
      currentPage7: 1,//近7天分頁(yè)當(dāng)前頁(yè)
      currentPage1: 1,//今日分頁(yè)當(dāng)前頁(yè)
      pageCount10: 1,
      pageCount7: 1,
      pageCount1: 1,
      page: {
        pageSize: 5,
        pageNum: 1
      }
    }
  },
  methods: {
    // showTenAll() {//切換10天全部和非全部
    //   this.lastTenDayNoVisitList = this.isAll1 ? this.lastTenDayNoVisitList3 : this.lastTenDayNoVisitList1
    //   this.isAll1 = this.isAll1 ? false : true
    // },
    // showWeekAll() {//切換7天全部和非全部
    //   this.lastWeekNoVisitList = this.isAll2 ? this.lastWeekNoVisitList3 : this.lastWeekNoVisitList1
    //   this.isAll2 = this.isAll2 ? false : true
    // },
    // showTodayAll() {//切換今天全部和非全部
    //   this.todayVisitList = this.isAll3 ? this.todayVisitList3 : this.todayVisitList1
    //   this.isAll3 = this.isAll3 ? false : true
    // },
    async getCheckinDataSecondDetail(queryDays, page = {...this.page}) {
      let res = await getCheckinDataSecondDetail({
        // agentMobile: localStorage.getItem("agentMobile"),//投顧手機(jī)號(hào)
        // userId: localStorage.getItem("userId"),
        agentMobile: 18655266240,//投顧手機(jī)號(hào)
        userId: 'xingyehua',
        agentCode: localStorage.getItem("agentCode"),
        page: page,
        queryDays: queryDays,
      })
      if (res.data.code == 0) { //list 為展示的數(shù)組，list1展示全部，list展示三條
        let data = res.data.data
        // this.manageInfo = res.data.data.manageInfo
        // this.todayVisitList1 = res.data.data.todayVisitList
        // this.todayVisitList3 = res.data.data.todayVisitList.slice(0, 3)
        // this.todayVisitList = this.todayVisitList3
        // this.lastWeekNoVisitList1 = res.data.data.lastWeekNoVisitList
        // this.lastWeekNoVisitList3 = res.data.data.lastWeekNoVisitList.slice(0, 3)
        // this.lastWeekNoVisitList = this.lastWeekNoVisitList3
        // this.lastTenDayNoVisitList1 = res.data.data.lastTenDayNoVisitList
        // this.lastTenDayNoVisitList3 = res.data.data.lastTenDayNoVisitList.slice(0, 3)
        // this.lastTenDayNoVisitList = this.lastTenDayNoVisitList3
        if (queryDays == 0) {
          this.todayVisitList = data.list
          this.pageCount1 = Math.ceil(data.total / this.page.pageSize)
        }
        if (queryDays == -7) {
          this.lastWeekNoVisitList = data.list
          this.pageCount7 = Math.ceil(data.total / this.page.pageSize)
        }
        if (queryDays == -10) {
          this.lastTenDayNoVisitList = data.list
          this.pageCount10 = Math.ceil(data.total / this.page.pageSize)
        }
      }
    },
    changePage10(val) {
      console.log(val)
      this.getCheckinDataSecondDetail(-10, {pageNum:val,pageSize: 5})
    },
    changePage7(val) {
      this.getCheckinDataSecondDetail(-7, {pageNum:val,pageSize: 5})
    },
    changePage1(val) {
      this.getCheckinDataSecondDetail(1, {pageNum:val,pageSize: 5})
    },
    goClockDetail(item) {
      this.$router.push({name: "bankClockDetail", query: {websiteName: item.name, websiteCode: item.agentCom}});
    }
  },
  created() {
    this.getCheckinDataSecondDetail(-10,this.page)
    this.getCheckinDataSecondDetail(-7,this.page)
    this.getCheckinDataSecondDetail(0,this.page)
  }
}
</script>

<style scoped>
.top {
  background-color: #EDF5FF;
  color: #333333;
  padding: 0.78rem 0.6rem;
}

.top .banks {
  margin-bottom: 1.12rem;
}

.top img {
  width: 2.32rem;
  height: 0.5rem;
  vertical-align: middle;
}

.top .line {
  width: 0.04rem;
  height: 2.28rem;
  background-color: #D2DFF1;
  margin: 0 1rem;
}

.bank-title {
  max-width: 6.1rem;
  margin-right: .42rem;
}

.bank-num {
  max-width: 3.48rem;
}

/*.title:first-child {*/
/*  border-left: 0.12rem solid #257ef1;*/
/*  padding: 0 0 0 0.3rem;*/
/*}*/
.title > p:first-child::after {
  content: "";
  position: absolute;
  left: .6rem;
  top: calc(50% - 0.28rem);
  height: 0.64rem;
  width: 0.12rem;
  background: #257ef1;
  border-radius: 0.06rem;
}

.all {
  margin: 0 auto;
  height: 2rem;
}

.all > div {
  margin-right: .26rem;
}

.clock-data.van-cell {
  height: 1.8rem;
}
</style>