<template>
    <div>
        <van-sticky>
            <LHeader :text="text"></LHeader>
        </van-sticky>
        <!-- tab标签 -->
        <template v-if="tabs.length">
            <van-tabs v-model="active" color="#2980f7" animated @change="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-list v-model="i.loading" :finished="i.finished" finished-text="没有更多了">
                            <van-cell-group @click="toDanger(index)" inset v-for="(item, index) in i.messageList"
                                :key="index">
                                <van-row gutter>
                                    <van-col span="20" class="con_type">{{ item.name }}</van-col>
                                    <!-- v-if="item.patrolStatus == 1"  -->
                                    <van-col v-if="item.patrolStatus == 1" style="color:red">
                                        <div class="ribbon">
                                            <div class="ribbon1">异常</div>
                                        </div>
                                    </van-col>
                                </van-row>
                                <van-row gutter>
                                    <van-col class="con_inner" span="5">风险因素:</van-col>
                                    <van-col class="con_inner" span="19">{{ item.factor }}</van-col>
                                </van-row>
                                <van-row gutter>
                                    <van-col class="con_inner" span="5">风险类型
                                        :</van-col>
                                    <van-col class="con_inner" span="19">{{ item.type }}</van-col>
                                </van-row>
                                <van-row gutter>
                                    <van-col class="con_inner" span="5">风险等级
                                        :</van-col>
                                    <van-col class="con_inner" span="19">{{ item.level }}</van-col>
                                </van-row>
                                <van-row gutter>
                                    <van-col class="con_inner" span="5">管控措施
                                        :</van-col>
                                    <van-col class="con_inner" span="19">{{ item.measuresProject }}</van-col>
                                </van-row>
                                <van-overlay :show="showIndex === index">
                                    <div class="wrapper" @click.stop="showIndex = null">
                                        <van-button round type="danger" @click="goDetail(item)">异常上报</van-button>
                                    </div>
                                </van-overlay>
                            </van-cell-group>
                        </van-list>
                    </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>
        </template>
        <!-- 暂无数据 -->
        <div style="
                        width: 100%;
                        text-align: center;
                        font-size: 0.48rem;
                        position: fixed;
                        top: 30%;
                    " v-else>暂无数据</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
            showIndex: null,
            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() {
            this.showIndex = null;
        },
        loadingTabs() {
            getFun("/risk/currentRiskPatrolDetail/detailList", { projectId: this.id, patrolId: this.$route.query.patrolId }).then(res => {
                const tabs = new Set(res.rows.map(x => x.type));
                this.lists = res.rows;
                Array.from(tabs).forEach(name => {
                    this.tabs.push({
                        title: name,
                        messageList: res.rows.filter(x => x.type === name),
                        finished: true,
                        loading: false
                    })
                })
            })
                .catch(err => {
                    this.$toast.clear();
                    this.$toast.fail("加载失败,请稍后再试");
                });
        },
        toDanger(index) {
            this.showIndex = index;
        },
        goDetail(item) {
            // 为后一步添加数据
            this.$store.commit('SET_DANGER_DATA', {
                riskContent: item.measuresEmergency,
                patrolId: item.patrolId || 1,
                patrolDetailId: item.patrolDetailId,
                factor: item.factor,
                level: item.level,
                type: item.type,
                measuresProject: item.measuresProject,
                buildingId: item.buildId
            })
            sessionStorage.setItem("buildingId", item.buildId); //为评测分数添加
            this.$router.push({
                name: 'addDanger'
            })
        },
        finish() {
            this.$dialog
                .confirm({
                    title: "提示",
                    message: "确定提交吗？"
                }).then(() => {
                    this.$toast.loading({
                        message: "提交中...",
                        forbidClick: true,
                        loadingType: "spinner",
                        duration: 0
                    });
                    const list = this.lists.map(x => ({
                        patrolDetailId: x.patrolDetailId,
                        patrolStatus: x.patrolStatus
                    }))
                    postFun("/risk/currentRiskPatrolDetail/updateStatus", {
                        patrolId: this.$route.query.patrolId,
                        list
                    })
                        .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(() => {

                });
        },
    }
};
</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;
}

.con_inner {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card-wrap {
    text-align: center;
}


.ribbon {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    position: absolute;
    top: 0rem;
    right: 0;
}

.ribbon1 {
    line-height: 12px;
    transform: rotate(45deg) translate(0.2rem, 0.5rem);
    position: relative;
    padding: 8px 0;
    width: 3rem;
    background: red;
    color: white;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    text-align: center;
}

// .ribbon1:before,
// .ribbon1:after {
//     content: "";
//     border-top: 4px solid #4e7c7d;
//     border-left: 4px solid transparent;
//     border-right: 4px solid transparent;
//     position: absolute;
//     bottom: -4px;
// }

.ribbon1:before {
    left: 0;
}

.ribbon1:after {
    right: 0;
}
</style>
