<template>
    <div>
        <van-sticky>
            <LHeader :text="text"></LHeader>
        </van-sticky>
        <!-- tab标签 -->
        <van-tabs
            v-model="active"
            color="#2980f7"
            animated
            @click="tabClick"
           
            :sticky="true"
            offset-top="1.5rem"
        >
            <van-tab v-for="(i, key) in tabs" :key="key" :title="i.title">
                <!-- 内容列表 -->
                <div class="con-list">
                    <van-pull-refresh v-model="i.refreshing" @refresh="onRefresh">
             <van-list
                v-model="i.loading"
                :finished="i.finished"
                finished-text="没有更多了"
                @load="onLoad()"
            >
                    <van-cell-group inset v-for="(item, index) in i.messageList" :key="index">
                        <van-row gutter>
                            <!-- <van-col span="18">
                                <span class="con_title">日查</span>
                                <span>&nbsp;&nbsp;制度、规程、方案</span>
                            </van-col>-->
                            <van-col span="12" class="con_type">
                                
                                <van-popover
                                    v-model="showPopoverFlag2[index]"
                                    theme="dark"
                                    trigger="click"
                                    placement="bottom-start"
                                >
                                    <span class="tip">{{item.postName}}</span>
                                    <template #reference>{{item.postName.length>10?item.postName.substring(0,10)+'...':item.postName}}</template>
                                </van-popover>
                            </van-col>
                            <van-col span="12" class="cont-end">{{item.hdLev|hdLev}}</van-col>
                        </van-row>
                        <van-row gutter>
                            <van-col span="24">{{item.hdName}}</van-col>
                        </van-row>
                        <van-row gutter class="cont-operation">
                            <van-col span="10" class="con_type">
                                <van-popover
                                    v-model="showPopoverFlag[index]"
                                    theme="dark"
                                    trigger="click"
                                    placement="bottom-start"
                                >
                                    <span class="tip">《{{item.regulatoryBasis}}》</span>
                                    <template #reference>法律依据/出处</template>
                                </van-popover>
                            </van-col>
                            <van-col span="14" class="con_right">
                                <van-radio-group
                                    v-model="item.result"
                                    direction="horizontal"
                                    @change="operation(item.result,index,item)"
                                >
                                    <van-radio :name="1" shape="square" :disabled="item.result == '2'">合格</van-radio>
                                    <van-radio :name="2" shape="square" >不合格</van-radio>
                                </van-radio-group>
                            </van-col>
                        </van-row>
                    </van-cell-group>
                    </van-list>
        </van-pull-refresh>
                </div>
                <!-- 暂无数据 -->
                <div
                    style="
                        width: 100%;
                        text-align: center;
                        font-size: 0.48rem;
                        position: fixed;
                        top: 30%;
                    "
                    v-if="i.messageList.length == 0"
                >暂无数据</div>
                
            </van-tab>
        </van-tabs>

        <div class="operation-btn">
            <van-button
                block
                type="info"
                native-type="submit"
                style="border-radius: 5px;"
                @click="finish"
            >结束巡查</van-button>
        </div>
        
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { postWork } from "@/service/workbench";
import { getFun, postFun } from "@/service/table.js";
export default {
    name: "implement",
    components: {
        LHeader
    },
    data() {
        return {
            id: "", //巡查周期id
            content:'',
            text: this.$route.query.content?this.$route.query.content:'执行巡查',
            messageList: [],
            active: 0,
            hdType:'',
            total:0,//总条数
            page:1,//页码
            psize:5,//页数量
            refreshing:false,
            cycle:'',
            tabs: [
                // {
                //     title: "安全管理类",
                //     api: "/rectification/list1"
                // },
                // {
                //     title: "文明施工类",
                //     api: "/rectification/list2"
                // },
                // {
                //     title: "临时用电类",
                //     api: "/rectification/finishList"
                // }
            ],
            showPopover: false,
            showPopoverFlag:[],
            showPopoverFlag2:[]
        };
    },
    filters:{
        hdLev(val){
            if(val=='S'){
                return '重大隐患'
            }else if(val=='A'){
                return '严重隐患'
            }else if(val=='B'){
                return '较大隐患'
            }else{
                return '危险隐患'
            }
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
        }
        if (this.$route.query.cycle) {
            this.cycle = this.$route.query.cycle;
        }
        if (this.$route.query.content) {
            this.content = this.$route.query.content;
        }
        this.loadingTabs()
    },
    methods: {
        tabClick(name,title){
            this.page=1
            this.hdType=title
            this.tabs.forEach((i)=>{
                if(i.title==this.hdType){
                    i.messageList=[]
                    i.loading=true
                    i.finished=false
                }
            })
            this.onLoad();
        },
        // tabChange(name,title){
        //     console.log(title)
        //     this.page=1
        //     this.hdType=title
        //     this.tabs.forEach((i)=>{
        //         if(i.title==this.hdType){
        //             i.messageList=[]
        //             i.loading=true
        //             i.finished=false
        //         }
        //     })
        //     this.onLoad();
        // },
        loadingTabs(){
             postWork("patrol/running/hdType?cycle="+this.id).then(res => {
                // this.hdType=res.data[0].hdType
                res.data.forEach((i)=>{
                    this.tabs.push({
                        title:i.hdType,
                        api:i.id,
                        messageList:[],
                        loading: false,
                        finished: false,
                        refreshing:false,
                    })
                })
                if(sessionStorage.getItem('type')){
                    this.hdType=sessionStorage.getItem('type')
                    var j=0
                    this.tabs.forEach((i)=>{
                        if(i.title==this.hdType){
                            this.active=j
                        }
                        j++;
                    })
                }else{
                    this.hdType=res.data[0].hdType
                }
                this.$toast.clear();
            })
            .catch(err => {
                this.$toast.clear();
                this.$toast.fail("加载失败,请稍后再试");
            });
        },
        postList(val) {
            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0
            });
            let obj = {
                cycle: this.id,
                hdType:this.hdType,
                pageNum:this.page,
                pageSize:this.psize,
            };
            postFun("patrol/running/list?cycle="+this.id+'&hdType='+this.hdType+'&pageNum='+this.page+'&pageSize='+this.psize)
                .then(res => {
                    res.rows.forEach((item)=>{
                        this.tabs.forEach((i)=>{
                            if(i.title==this.hdType){
                                i.messageList.push(item)
                            }
                        })
                    })
                    this.$toast.clear();
                    this.total=res.total
                    this.page++;
                    this.tabs.forEach((i)=>{
                        if(i.title==this.hdType){
                            if (i.messageList.length>=this.total) {
                                i.finished = true;
                            }
                            i.loading = false;
                        }
                    })
                    //防止分页超出操作
                    // if(!(this.page*5-this.total>=0)){
                    //      this.page++;
                    // }
                })
                .catch(err => {
                    this.$toast.clear();
                    this.$toast.fail("加载失败,请稍后再试");
                });
        },
        operation(val, index,item) {
            console.log(val)
            if(val == 1){
                return
            }
            console.log(item)
            // 如果不合格跳转到隐患上报页面
            this.$dialog
                .confirm({
                    title: "提示",
                    message: "确定跳转到隐患上报页面吗？"
                })
                .then(() => {
                    this.$router.push({
                        name: "add-danger",
                    });
                    var obj={
                        id:item.id,
                        proId:item.proId,
                        hdRange:item.hdRange,
                        hdType:item.hdType,
                        hdName:item.hdName,
                        hdId:item.hdId,
                        hdLev:item.hdLev,
                    }
                    sessionStorage.setItem('obj',JSON.stringify(obj))
                })
                .catch(() => {
                    item.result = 1
                });
        },
        finish() {
            this.$dialog
                .confirm({
                    title: "提示",
                    message: "确定提交吗？"
                }).then(() => {
            this.$toast.loading({
                message: "提交中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0
            });
            // let obj2 = {
            //     cycle: this.id
            // };
            postWork("patrol/running/save?cycle="+this.id)
                .then(res => {
                    this.$toast.clear();
                    this.$toast.success({
                        message: "提交成功",
                        duration: 2000
                    });
                    this.$router.push('/danger-Patrol-Time')
                    // history.go(-1);
                })
                .catch(() => {
                    this.$toast.clear();
                    this.$toast.fail("提交失败,请稍后再试");
                });
                 })
                .catch(() => {
                    
                });
        },
         //下拉页面刷新
        onRefresh() {
            // 清空列表数据
            this.page=1
            this.tabs.forEach((i)=>{
                if(i.title==this.hdType){
                    i.loading=true
                    i.finished=false
                }
            })
            this.onLoad();
        },
        //上拉页面加载数据
        onLoad(value) {
            this.tabs.forEach((i)=>{
                if(i.title==this.hdType){
                    if (i.refreshing) {
                       i.messageList=[]
                        i.refreshing = false;
                    }
                }
            })
            this.postList()
        },
    }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
#app {
    font-family: "";
    color: #2c3e50;
}
.con-list {
    padding: 0 0 60px;
    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;
            .con_title {
                color: #05a7f0;
                font-weight: 600;
            }
            .con_type {
                color: #05a7f0;
                padding-right: 10px;
            }
            .cont-end{
                display: flex;
                justify-content: flex-end;
                color: #05a7f0;
                padding-right: 12px;
            }
        }
        .con_right {
            display: flex;
            justify-content: flex-end;
        }
        .cont-operation {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        .van-overlay {
            position: absolute;
            .wrapper {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                height: 100%;
            }
        }
    }
}
/deep/.van-tab__pane-wrapper {
    min-height: 8rem;
}
.van-tabs__track {
    min-height: 3rem;
}
.operation-btn {
    width: 95%;
    margin: 20px 10px 10px;
    position: fixed;
    bottom: 1.3333rem;
    right: 0;
    left: 0;
}
.tip {
    width: auto;
    height: 28px;
    padding: 0 8px;
    line-height: 28px;
}
</style>
