<template>
    <div>
        <LHeader :text="text"></LHeader>
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索内容"
            @search="onSearch" 
            :right-icon="require('@/assets/workbench/news.png')"
            >
            <template #action>
                <div @click="onSearch" >搜索</div>
            </template>
            <template #right-icon>
                <van-icon name="calendar-o" @click="show=true"/>
            </template>
        </van-search>
        <van-calendar v-model="show"  type="range" :min-date="minDate" :default-date="defaultData" @confirm="onConfirm" />
        <!-- 内容列表 -->
        <!-- 接口对接4 START -->
        <div class="con-list" @touchmove="showIndex = null">
            <!-- v-for="(item, index) in messageList"
        :key="index"
            @click="touchstart(index, item)"-->
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
             <van-list
                 v-model="Loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
            <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.endTime,'DT2',true)}}</span>
                    </van-col>
                    <van-col span="4" class="cont-end record-status">
                        <span v-if="item.result!=true">
                            <span class="record-status" v-if="item.status=='0'">{{item.status|status}}</span>
                            <span class="record-status1" v-else-if="item.status=='1'">{{item.status|status}}</span>
                        </span>
                        <span v-else class="record-status2">已取消</span></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.projectName}}</van-col>
                </van-row>
                <van-row gutter>
                    <van-col span="24" v-if="item.result==null">上报隐患: {{item.hdReportCount?item.hdReportCount:0}}</van-col>
                   <van-col span="24" v-else>申请原因: {{item.approveContent?item.approveContent:''}}</van-col>
                </van-row>
                <van-row gutter>
                    <van-col span="24" v-if="item.result==null">确认隐患: {{item.hdConfirmCount?item.hdConfirmCount:0}}</van-col>
                      <van-col span="24" v-else>申请结果: {{item.result==true?'同意':'不同意'}}</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>
             </van-list>
        </van-pull-refresh>
        </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 {
            minDate: new Date(1900, 0, 1),
            defaultData:[new Date(new Date().getFullYear(), new Date().getMonth(), 1)
            ,new Date(new Date().getFullYear(), new Date().getMonth(), new Date(new Date().getFullYear(),new Date().getMonth()+1,0).getDate())],
            startTime:'',
            endTime:'',
            Loading: false,
            finished: false,
            refreshing:false,
            total:0,//总条数
            page:1,//页码
            psize:5,//页数量
            date: '',
            id:'',//巡查周期id
            text: this.$route.query.content?this.$route.query.content:"巡查记录",
            value:'',//搜索值
            show:false,//是否显示日历
            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
        // },
        status(val){
            if(val=='0'){
                return '已执行'
            }else if(val=='1'){
                return '未执行'
            }else{
                return '未知'
            }
        }
    },
    mounted(){
        if(this.$route.query.id){
            this.id=this.$route.query.id
        }
    },
    methods: {
        onConfirm(date) {
            this.show = false;
            this.date=date
        },
        loading(){
            if(this.date.length){
                this.startTime=this.util.timestampToTime(this.date[0],'DT5',true)
                this.endTime=this.util.timestampToTime(this.date[1],'DT5',true)
            }
            var obj={
                cycle:this.id,
                startTime:this.startTime,
                endTime:this.endTime,
                pageNum:this.page,
                pageSize:this.psize,
                postName:this.value

            }
            getFun('patrol/list',obj).then((res)=>{
                res.rows.forEach((item)=>{
                    this.patrolList.push(item)
                })
                this.patrolList.forEach((i)=>{
                    i.show=false
                })
                //防止分页超出操作
                this.page++
                this.total=res.total
                console.log(this.patrolList.length)
                if (this.patrolList.length>=this.total) {
                        this.finished = true;
                    }
                    this.Loading = false
            })
        },
        onSearch(val) {
            this.page=1
            this.patrolList=[]
            this.loading()
        },
        touchstart(item) {
            item.show = true
            this.$forceUpdate()
        },
        //下拉页面刷新
        onRefresh() {
            // 清空列表数据
            this.page=1
            this.finished = false;
            this.Loading=true
            this.onLoad();
        },
        //上拉页面加载数据
        onLoad() {
            if (this.refreshing) {
                this.patrolList=[]
                this.refreshing = false;
            }
            this.loading()
        },
        // 详情
        goDetail(data) {
            console.log(data)
            this.$router.push({
                name: "record-detail",
                query:{
                    cycle:data.cycle,
                    startTime:data.startTime
                }
            });
            // 先跳转到详情页
            //   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;
            }
            .record-status1{
                color: #FF0000;
            }
            .record-status2 {
                color: #4472C4;
            }
            .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>
