<template>
    <div>
        <van-sticky>
            <LHeader :text="text"></LHeader>
        </van-sticky>
        <!-- tab标签 -->
        <van-tabs
            v-model="active"
            @change="onChange"
            color="#2980f7"
            animated
            :sticky="true"
            offset-top="1.5rem"
        >
            <van-tab v-for="(item, key) in tabs" :key="key" :title="item.title">
                <!-- 内容列表 -->
                <div class="con-list">
                    <van-cell-group inset v-for="(item, index) in messageList" :key="index">
                        <van-row gutter>
                            <!-- <van-col span="18">
                                <span class="con_title">日查</span>
                                <span>&nbsp;&nbsp;制度、规程、方案</span>
                            </van-col>-->
                            <van-col span="24" class="con_type">{{item.hdLev}}</van-col>
                        </van-row>
                        <van-row gutter>
                            <van-col span="24">应建立地下有限空间作业安全生产责任制、安全生产规章制度和操作规程。</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">《北京市地下有限空间管理办法》</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)"
                                >
                                    <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>
                </div>
                <!-- 暂无数据 -->
                <div
                    style="
                        width: 100%;
                        text-align: center;
                        font-size: 0.48rem;
                        position: fixed;
                        top: 30%;
                    "
                    v-if="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";
export default {
    name: "implement",
    components: {
        LHeader
    },
    data() {
        return {
            id: "", //巡查周期id
            text: "执行巡查",
            messageList: [],
            active: 0,
            tabs: [
                {
                    title: "安全管理类",
                    api: "/rectification/list1"
                },
                {
                    title: "文明施工类",
                    api: "/rectification/list2"
                },
                {
                    title: "临时用电类",
                    api: "/rectification/finishList"
                }
            ],
            showPopover: false,
            showPopoverFlag:[],
        };
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
        }
        this.postList();
    },
    methods: {
        onChange() {
            console.log(this.active);
        },
        postList(val) {
            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0
            });
            let obj = {
                cycle: this.id
            };
            postWork("patrol/running/list", obj)
                .then(res => {
                    this.messageList = res.data;
                    this.$toast.clear();
                })
                .catch(err => {
                    this.$toast.clear();
                    this.$toast.fail("加载失败,请稍后再试");
                });
        },
        operation(val, index) {
            if(val == 1){
                return
            }
            // 如果不合格跳转到隐患上报页面
            this.$dialog
                .confirm({
                    title: "提示",
                    message: "确定跳转到隐患上报页面吗？"
                })
                .then(() => {
                    this.$router.push({
                        name: "add-danger"
                    });
                })
                .catch(() => {
                    this.messageList[index].result = 1
                });
        },
        finish() {
            this.$toast.loading({
                message: "提交中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0
            });
            let obj2 = {
                cycle: this.id
            };
            postWork("patrol/running/save", obj2)
                .then(res => {
                    this.$toast.clear();
                    this.$toast.success({
                        message: "提交成功",
                        duration: 2000
                    });
                    // history.go(-1);
                })
                .catch(() => {
                    this.$toast.clear();
                    this.$toast.fail("提交失败,请稍后再试");
                });
        }
    }
};
</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;
            }
        }
        .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:  10px 10px;
    position: fixed;
    bottom: 50px;
    right: 0;
    left: 0;
}
.tip {
    width: auto;
    height: 28px;
    padding: 0 8px;
    line-height: 28px;
}
</style>
