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

    <div class="con-list">
      <van-pull-refresh @refresh="onRefresh">
        <van-list finished-text="没有更多了" @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.time }}
              </van-col>
              <van-col span="12" class="cont-end">已执行</van-col>
            </van-row>
            <van-cell-group inset v-for="item in child.list" :key="item.job">
              <van-row gutter>
                <van-col span="24">岗&nbsp;位：{{ item.job }}</van-col>
                <van-row><van-col span="18">巡查频次：{{ item.time }}</van-col><van-col span="6" class="con_right"
                    @click="() => $router.push('/patrolLog/logDetail')">查看详情</van-col></van-row>
                <van-col span="24">上报异常：{{ item.count }}</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";
export default {
  name: 'patrolLog', //巡查记录
  components: {
    LHeader,
  },
  props: {

  },
  data() {
    return {
      text: '巡查记录',
      group: [
        {
          time: '2023年7月8日',
          list: [{
            name: '电工',
            job: '专职巡查人员',
            time: '日查',
            count: 1
          }, {
            name: '电工',
            job: '专职巡查人员',
            time: '日查',
            count: 1
          }, {
            name: '电工',
            job: '专职巡查人员',
            time: '日查',
            count: 1
          }, {
            name: '电工',
            job: '专职巡查人员',
            time: '日查',
            count: 1
          }, {
            name: '电工',
            job: '专职巡查人员',
            time: '日查',
            count: 1
          },]
        }
      ]
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {

  },
}
</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>
