<template>
    <div>
        <LHeader :text="text"></LHeader>
        <!-- <van-sticky offset-top="1.5rem">
            <van-search v-model="searchValue" show-action placeholder="请输入搜索内容" @search="onSearch">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </van-sticky> -->
        <!-- 内容列表 -->
        <!-- 接口对接4 START -->
        <div class="con-list" @touchmove="showIndex = null">
            <!-- v-for="(item, index) in messageList"
        :key="index"
            @click="touchstart(index, item)"-->
            <van-cell-group inset @click="touchstart(item)" v-for="(item, index) in patrolList" :key="index"> 
                <van-row gutte>
                    <van-col span="10">
                        <span class="record-time">{{util.timestampToTime(item.startTime,'DT2',true)}}</span>
                    </van-col>
                     <van-col span="10">
                        <span class="record-time">{{util.timestampToTime(item.startTime,'DT2',true)}}</span>
                    </van-col>
                    <van-col span="4" class="cont-end record-status">已执行</van-col>
                </van-row>
                <!-- <van-row gutte>
                    <van-col span="12">开始时间: 09:30</van-col>
                    <van-col span="12" class="cont-end">结束巡查时间: 11:25</van-col>
                </van-row>
                 -->
                <van-row gutter>
                    <van-col span="24">岗位: {{item.postName}}</van-col>
                </van-row>
                <van-row gutter>
                    <van-col span="24">巡查频次: {{item.cycle|cycle}}</van-col>
                </van-row>
                <van-row gutter>
                    <van-col span="24">上报隐患: {{item.hdReportCount?item.hdReportCount:0}}</van-col>
                </van-row>
                <van-row gutter>
                    <van-col span="24">确认隐患: {{item.hdConfirmCount?item.hdConfirmCount:0}}</van-col>
                </van-row>
                <!-- 长按显示遮罩层 -->
                <!-- :show="showIndex == index" -->
                <van-overlay :show="item.show">
                    <div class="wrapper" @click.stop="item.show=false;$forceUpdate()">
                        <van-button round type="primary" @click="goDetail(item)">详情</van-button>
                    </div>
                </van-overlay>
            </van-cell-group>
        </div>
        <!-- 暂无数据 -->
        <!-- v-if="isHaveNews" -->
        <div
            style="width: 100%;text-align: center; font-size: .48rem;position: fixed; top: 30%;"
            v-if="false"
        >暂无数据</div>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
let that;
import tabBar from "@/components/TabBar";
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import { superviseSABlist } from "@/service/danger";

/*接口对接2 START*/
// 例子：
// import {
//   getFormList,
//   postHdTyp,
//   postHdName,
//   postHdInventories,
//   postHdRiskSource,
//   postHdShowPeople,
//   postHdReportAdd,
//   dangerReturnEcho,
// } from "@/service/danger";

/*接口对接2 END*/

export default {
    name: "record-patrol",
    components: {
        LHeader,
        tabBar
    },
    data() {
        return {
            id:'',//巡查周期id
            text: "巡查记录",
            searchValue: "",
            showIndex:false,
            messageList: [],
            patrolList:[],//巡查数组
            isHaveNews: false,
            contentList:[
                {
                    id: "1",
                    content: "日查"
                },
                {
                    id: "2",
                    content: "周查"
                },
                {
                    id: "3",
                    content: "半月查"
                },
                {
                    id: "4",
                    content: "月查"
                },
                {
                    id: "5",
                    content: "季查"
                },
                {
                    id: "6",
                    content: "半年查"
                },
                {
                    id: "7",
                    content: "年查"
                }
            ]
        };
    },
    beforeCreate () {
	    that = this
    },
    filters:{
        cycle(val){
            var value;
            that.contentList.forEach((i)=>{
                if(i.id==val){
                    value=i.content
                }
            })
            return value
        }
    },
    mounted(){
        if(this.$route.query.id){
            this.id=this.$route.query.id
        }
        this.loading();
    },
    methods: {
        loading(){
            var obj={
                cycle:this.id
            }
            this.patrolList=[]
            getFun('patrol/list',obj).then((res)=>{
                this.patrolList=res.data
                this.patrolList.forEach((i)=>{
                    i.show=false
                })
            })
        },
        onSearch(val) {
            this.getList(this.searchValue);
        },

        touchstart(item) {
            item.show = true
            this.$forceUpdate()
        },
        
        // 详情
        goDetail(data) {
            console.log(data)
            this.$router.push({
                name: "record-detail"
            });
            // 先跳转到详情页
            //   this.$router.push({
            //     name: "normal-detail",
            //     params: {
            //       id: data.pid
            //     }
            //   });
            //   this.showIndex = null;
        }
    }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
#app {
    font-family: "";
    color: #2c3e50;
}
.con-list {
    padding: 0;
    background-color: #f0f1f5;
    .van-cell-group--inset {
        margin: 0;
        margin-bottom: 0.26667rem;
        padding: 0.25rem;
        font-size: 0.4rem;
        position: relative;
        border-radius: 4%;
        box-shadow: 0px 0px 10px 2px #f3f3f3;
        width: 90%;
        margin: 0.4rem auto;
        .van-row {
            font-size: 0.4rem;
            line-height: 0.8rem;
            margin-bottom: 0;
            .record-time {
                color: #f59a83;
            }
            .record-status {
                color: #008080;
            }
            .cont-end {
                display: flex;
                justify-content: flex-end;
            }
        }
        .van-overlay {
            position: absolute;
            .wrapper {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                height: 100%;
            }
        }
    }
}
</style>
