<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="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 { 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() {
            getFun("/risk/currentRiskPatrolDetail/detailList", { id: 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: "addDanger",
                    });
                    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
                    // };
                    postFun("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>
