<template>
  <div class="wrap">
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>

    <div class="con-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <div v-for="(child, index) in group" :key="index">
            <van-row gutter class="con_tip">
              <van-col span="12" class="con_type">
                {{ child.startTime }}
              </van-col>
              <van-col span="12" class="cont-end">已执行</van-col>
            </van-row>
            <van-cell-group inset>
              <van-row gutter type="flex" justify="center" align="center">
                <van-col span="18">
                  <van-col>项目名称：{{ child.projectName }}</van-col>
                  <van-col span="24">岗&nbsp;位：{{ child.riskPostName }}</van-col>
                  <van-col span="24">巡查类型：{{ patrolTypeList[child.patrolType] }}</van-col>
                  <van-col span="24" v-if="child.exceptStatus == 1">上报异常：1</van-col>
                </van-col><van-col span="6" class="con_right"
                  @click="() => $router.push({ path: '/patrolLog/logDetail', query: { id: child.id } })">查看详情</van-col>
              </van-row>
            </van-cell-group>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
export default {
  name: 'patrolLog', //巡查记录
  components: {
    LHeader,
  },
  props: {

  },
  data() {
    return {
      text: '巡查记录',
      loading: false,
      finished: false,
      patrolTypeList: ['日查', '周查', '月查', '年查'],
      group: [],
      pages: {
        pageNum: 0
      },
      refreshing: false,
      total: 0
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
  },
  methods: {
    onRefresh() {
      this.pages.pageNum = 1;
      this.group = []
      this.getData()
    },
    //上拉页面加载数据
    onLoad() {
      if (this.total && this.total <= this.group.length) {
        this.finished = true;
        return;
      }
      this.pages.pageNum += 1;
      this.getData();
    },
    getData() {
      let userInfoData = JSON.parse(localStorage.getItem('LocalUserInfo'))
      getFun('/risk/riskUserPatrol/detailList', {
        userId: userInfoData.userId,
        ...this.pages
      }).then(res => {
        this.group = this.group.concat(res.rows);
        this.refreshing = false;
        this.loading = false;
        if (!this.total) {
          this.total = res.total;
        }
      })
    }
  },
}
</script>

<style scoped lang='less'>
.wrap {
  height: 100vh;
  width: 100vw;
}

.con-list {
  background-color: #f0f1f5;
  padding: 0.2rem 0.4rem;

  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 0.26667rem;
    padding: 0.25rem;
    font-size: 0.4rem;
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px #f3f3f3;
    margin: 0 auto 0.4rem;

    &>.van-row {
      font-size: 0.4rem;
      line-height: 0.8rem;
      margin-bottom: 0;
      padding: 0 0.2rem;

      .con_right {
        display: flex;
        justify-content: flex-end;
        color: #05a7f0;
      }

      .van-overlay {
        position: absolute;

        .wrapper {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          height: 100%;
        }
      }
    }
  }


  .con_tip {
    font-size: 0.4rem;
    margin-bottom: 0.2rem;
    padding: 0 0.3rem;

    .con_type {
      color: #a1a1a1;
      padding-right: 10px;
    }

    .cont-end {
      display: flex;
      justify-content: flex-end;
      color: #a1a1a1;
      padding-right: 0;
    }
  }
}
</style>
