<template>
    <div class="danger_details">
        <!--搜索功能暂时屏蔽-->
        <!--<div class="search-input-wrap">
            <div class="search-left" :style="{width:isSearchBtn ? '88%' : '100%'}" @click="startSearch">
                <md-input-item
                        class="search-input"
                        placeholder="请搜索风险编号/检查项/作业活动"
                        v-model="searchVal"
                >
                    <md-icon name="search" slot="left" @click.stop="searchDetail"></md-icon>
                    &lt;!&ndash;<span slot="right">取消</span>&ndash;&gt;
                </md-input-item>
            </div>
            <span class="cancel-btn"  v-if="isSearchBtn" @click="cancelSearch">取消</span>
        </div>-->
        <div>
            <div class="top-details" v-if="riskDataList.length > 0">
                <h4>{{riskDataList[0].parentDangerSrcName}}</h4>
                <p class="zhongda" v-if="parentLevel == 1"><i></i> 重大危险源</p>
                <p class="jiaoda" v-else-if="parentLevel == 2"><i></i> 较大危险源</p>
                <p class="yiban" v-else-if="parentLevel == 3"><i></i> 一般危险源</p>
                <p class="di" v-else-if="parentLevel == 4"><i></i> 低危险源</p>
            </div>
            <div class="top-details" v-else>
                <h4>暂无</h4>
                <!--<p class="zhongda" v-if="riskDataList[0].dangerSrcLevel == 1"><i></i> 重大危险源</p>-->

            </div>

            <md-scroll-view
                    ref="scrollView"
                    :bouncing="false"
                    :scrolling-x="false"
                    :auto-reflow="true"
                    @end-reached="$_onEndReached"
                    class="my-scroll"
            >
                <div style="padding: 0 0.15rem 0.25rem 0.15rem;">
                    <!--重大-->
                    <div class="list-box" v-for="(item, index) in riskDataList" :key="index">
                        <div class="list-father" :class="item.riskLevel == 1 ? 'zhongda' : item.riskLevel == 2 ? 'jiaoda' : item.riskLevel == 3 ? 'yiban' : 'di'" @click="changeStatus(index, item.riskId)">
                            <h4 class="tit" v-if="item.riskLevel == 1">
                                <img v-if="item.riskPointType == 1" src="../../assets/risk_list/cuoshi_icon__shebei_red@3x.png" alt="">
                                <img v-else src="../../assets/risk_list/zuoye_icon_red@3x.png" alt="">
                                {{item.riskCode}}
                            </h4>
                            <h4 class="tit" v-else-if="item.riskLevel == 2">
                                <img v-if="item.riskPointType == 1" src="../../assets/risk_list/cuoshi_icon__shebei_orange@3x.png" alt="">
                                <img v-else src="../../assets/risk_list/zuoye_icon_orange@3x.png" alt="">
                                {{item.riskCode}}
                            </h4>
                            <h4 class="tit" v-else-if="item.riskLevel == 3">
                                <img v-if="item.riskPointType == 1" src="../../assets/risk_list/cuoshi_icon__shebei_yellow@3x.png" alt="">
                                <img v-else src="../../assets/risk_list/zuoye_icon_yellow@3x.png" alt="">
                                {{item.riskCode}}
                            </h4>
                            <h4 class="tit" v-else>
                                <img v-if="item.riskPointType == 1" src="../../assets/risk_list/cuoshi_icon__shebei_blue@3x.png" alt="">
                                <img v-else src="../../assets/risk_list/zuoye_icon_blue@3x.png" alt="">
                                {{item.riskCode}}
                            </h4>
                            <p class="wz"> {{item.rootDangerSrcName ? item.rootDangerSrcName : item.parentDangerSrcName}}</p>
                            <i class="iconfont" :class="index === showRiskIndex ? 'iconicon_arrow_top' : 'iconicon_arrow_bottom'"></i>
                        </div>

                        <div class="child-box" v-if="index === showRiskIndex">
                            <div>
                                <div class="list-child">
                                    <h3><i class="bar"></i>基本信息</h3>
                                    <h4 class="child-tit sheshi" v-text="item.riskPointType == 1 ? '设备设施' : '作业步骤'"> </h4>
                                    <p class="child-wz" v-text="item.riskName ? item.riskName : '无'"></p>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">危害因素 </h4>
                                    <p class="child-wz" v-text="item.riskReason ? item.riskReason : '无'"></p>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">事故后果 </h4>
                                    <p class="child-wz" v-text="item.riskConsequence ? item.riskConsequence : '无'"></p>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">管控级别 </h4>
                                    <p class="child-wz" v-text="item.riskCtrlLevelTitle ? item.riskCtrlLevelTitle : '无'"></p>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">管控岗位 </h4>
                                    <p class="child-wz" v-text="item.positionTitle ? item.positionTitle : '无'"></p>
                                </div>
                            </div>
                            <div v-if="item.myRiskMeasure">
                                <div class="list-child" style="border-top: none;">
                                    <h3><i class="bar"></i>管控措施</h3>
                                    <h4 class="child-tit sheshi">工程技术措施 </h4>
                                    <div v-if="item.myRiskMeasure.project.length > 0">
                                        <p class="child-wz" v-for="(item, index) in item.myRiskMeasure.project">➤{{item.riskMeasureContent}}</p>
                                    </div>
                                    <div v-else>
                                        <p class="child-wz">无</p>
                                    </div>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">管理措施</h4>
                                    <!--<p class="child-wz" v-text="item.manage ? item.manage : '无'"></p>-->
                                    <div v-if="item.myRiskMeasure.manage.length > 0">
                                        <p class="child-wz" v-for="(item, index) in item.myRiskMeasure.manage">➤{{item.riskMeasureContent}}</p>
                                    </div>
                                    <div v-else>
                                        <p class="child-wz">无</p>
                                    </div>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">教育措施</h4>
                                    <!--<p class="child-wz" v-text="item.education ? item.education : '无'"></p>-->
                                    <div v-if="item.myRiskMeasure.education.length > 0">
                                        <p class="child-wz" v-for="(item, index) in item.myRiskMeasure.education">➤{{item.riskMeasureContent}}</p>
                                    </div>
                                    <div v-else>
                                        <p class="child-wz">无</p>
                                    </div>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">应急措施</h4>
                                    <!--<p class="child-wz" v-text="item.emergency ? item.emergency : '无'"></p>-->
                                    <div v-if="item.myRiskMeasure.emergency.length > 0">
                                        <p class="child-wz" v-for="(item, index) in item.myRiskMeasure.emergency">➤{{item.riskMeasureContent}}</p>
                                    </div>
                                    <div v-else>
                                        <p class="child-wz">无</p>
                                    </div>
                                </div>
                                <div class="list-child">
                                    <h4 class="child-tit">个体防护</h4>
                                    <!--<p class="child-wz" v-text="item.protection ? item.protection : '无'"></p>-->
                                    <div v-if="item.myRiskMeasure.protection.length > 0">
                                        <p class="child-wz" v-for="(item, index) in item.myRiskMeasure.protection">➤{{item.riskMeasureContent}}</p>
                                    </div>
                                    <div v-else>
                                        <p class="child-wz">无</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div v-if="riskDataList.length == 0">
                        <empty-data-page></empty-data-page>
                    </div>
                </div>
                <md-scroll-view-more
                        slot="more"
                        :is-finished="isFinished"
                >
                </md-scroll-view-more>
            </md-scroll-view>
        </div>

    </div>
</template>

<script>
    import {
        TabBar,
        Swiper,
        SwiperItem,
        ScrollView,
        ScrollViewRefresh,
        ScrollViewMore,
        Button,
        InputItem,
        Icon,
        Tag,
        Toast,
    } from 'mand-mobile'
    import {queryRiskMeasureListByPage, getRiskMeasureListByRiskId} from '@/api/risk_list';
    import {mapGetters} from 'vuex';
    import {HeadBar, EmptyDataPage} from '@/components'

    export default {
        name: "",
        components: {
            [TabBar.name]: TabBar,
            [Swiper.name]: Swiper,
            [SwiperItem.name]: SwiperItem,
            [ScrollView.name]: ScrollView,
            [ScrollViewRefresh.name]: ScrollViewRefresh,
            [ScrollViewMore.name]: ScrollViewMore,
            [Button.name]: Button,
            [InputItem.name]: InputItem,
            [Icon.name]: Icon,
            [Tag.name]: Tag,
            [HeadBar.name]: HeadBar,
            [EmptyDataPage.name]: EmptyDataPage,
        },
        data() {
            return {
                searchVal: '',
                isSearchBtn: false,
                showRiskIndex: '',
                page: 0,
                isFinished: false,
                riskDataList: [],
                dangerId: 0,
                parentLevel: 0
            }
        },
        created() {
        },
        computed: {
            ...mapGetters([
                'job_ticket_aId',
                'job_ticket_cId',
            ])
        },
        mounted(){
            this.dangerId = this.$route.query.dangerId
            this.parentLevel = this.$route.query.level
            this.$_onEndReached()
        },
        methods: {
            goDetails(data){
                this.$router.push({
                    path: '/risk_details',
                    query: {
                        ...this.$route.query,
                        infoData: data
                    }
                })
            },
            goSearch(){

            },
            async $_onEndReached(){
                if(this.isFinished){
                    return
                }
                this.page +=1
                await queryRiskMeasureListByPage({
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId,
                    page: this.page,
                    keyword: this.searchVal,
                    dangerSrcId: this.dangerId
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 0) {
                        const lastPage = Math.ceil(count / limit);
                        if (page >= lastPage) {
                            this.isFinished = true
                        }

                        this.riskDataList = this.riskDataList.concat(data);
                        console.log(this.riskDataList)
                    }
                }).catch(err => {
                })
                this.$refs.scrollView.finishLoadMore()

            },
            searchDetail(){
                console.log(this.searchVal);
                this.page = 0;
                this.isFinished = false;
                this.showRiskIndex = '';
                this.$_onEndReached();
            },
            cancelSearch(){
                this.isSearchBtn = false;
                this.page = 0;
                this.isFinished = false;
                this.showRiskIndex = '';
                this.searchVal = ''
                this.$_onEndReached();
            },
            startSearch(){
                this.isSearchBtn = true;
                this.riskDataList = [];
            },
            changeStatus(n, id){
                // this.showRiskIndex = n;
                if(this.showRiskIndex === n){
                    this.showRiskIndex = '';
                    return;
                }
                getRiskMeasureListByRiskId({
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId,
                    riskId: id
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 1) {
                        console.log(data);
                        if(data.riskMeasureList){
                            let myArr = {
                                project: [],
                                manage: [],
                                education: [],
                                emergency: [],
                                protection: []
                            };
                            for(let j=0; j<data.riskMeasureList.length; j++){
                                // data[i].myRiskMeasure
                                if(data.riskMeasureList[j].riskMeasureType == 'project'){
                                    myArr.project.push(data.riskMeasureList[j]);
                                }else if(data.riskMeasureList[j].riskMeasureType == 'manage'){
                                    myArr.manage.push(data.riskMeasureList[j]);
                                }else if(data.riskMeasureList[j].riskMeasureType == 'education'){
                                    myArr.education.push(data.riskMeasureList[j]);
                                }else if(data.riskMeasureList[j].riskMeasureType == 'emergency'){
                                    myArr.emergency.push(data.riskMeasureList[j]);
                                }else{
                                    myArr.protection.push(data.riskMeasureList[j]);
                                }
                            }
                            data.myRiskMeasure = myArr;
                        }

                        // this.riskDataList[n] = data
                        this.$set(this.riskDataList, n, data)
                        // console.log(n, this.riskDataList[n])
                    }
                }).catch(err => {
                })
                this.showRiskIndex = n;
            }
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
    *{
        box-sizing: border-box;
    }
    .danger_details{
        /*height: 100vh;*/
        background: #F2F2F2;
        /*padding: 0.15rem;*/
        .search-input-wrap{
            padding: 15px;
            overflow:hidden;
            .search-left{
                width: 88%;
                float: left;
            }
            .cancel-btn{
                width: 12%;
                text-align: center;
                float: right;
                font-size: 0.28rem;
                margin-top: 0.3rem;
                cursor: pointer;
            }
            .search-input {
                border-radius: 10px;
                background: #FFF;
                padding: 0 15px;
            }
        }

        .top-details{
            position: fixed;
            background: #FFFFFF;
            padding: 35px 18px;
            top: 0;
            left: 0;
            height: 1.6rem;
            width: 100%;
            z-index: 10;
            h4{
                font-size: 0.35rem;
                color: #222222;
            }
            p{
                font-size: 0.22rem;
                margin-top: 0.22rem;
                i{
                    display: inline-block;
                    width: 0.15rem;
                    height: 0.15rem;
                    border-radius: 100%;
                    vertical-align: baseline;
                }
            }
            p.zhongda{
                color: #F01716;
                i{
                    background: #F01716;
                }
            }
            p.jiaoda{
                color: #FF7800;
                i{
                    background: #FF7800;
                }
            }
            p.yiban{
                color: #FFCC00;
                i{
                    background: #FFCC00;
                }
            }
            p.di{
                color: #3095FD;
                i{
                    background: #3095FD;
                }
            }
        }
        .my-scroll{
            height: calc(100vh - 1.6rem);
            margin-top: 1.6rem;
        }
        .list-box{
            margin: 0.2rem 0;
            border-radius: 0.15rem;
            box-shadow: 0 0 0.15rem #d5d3cd;
            .list-father{
                position: relative;
                padding: 0.3rem 0.2rem;
                /*border-radius: 0.15rem 0.15rem 0 0;*/
                border-radius: 0.15rem;
                .tit{
                    font-size: 0.3rem;
                    img{
                        width: 0.24rem;
                        height: 0.24rem;
                    }
                }
                .wz{
                    color: #222222;
                    font-size: 0.3rem;
                    margin-top: 0.17rem;
                }
                >i{
                    display: inline-block;
                    position: absolute;
                    color: #C9BBBB;
                    font-size: 0.29rem;
                    top: 0.56rem;
                    right: 0.2rem;
                }
            }
            .zhongda{
                background: #FFF3F3;
                .tit{
                    color: #F01716;
                }
            }
            .jiaoda{
                background: #FFF6EE;
                .tit{
                    color: #FF7800;
                }
            }
            .yiban{
                background: #FFFBEC;
                .tit{
                    color: #FFCC00;
                }
            }
            .di{
                background: #EBF5FF;
                .tit{
                    color: #3095FD;
                }
            }
            .child-box{
                background: #FFFFFF;
                border-radius: 0 0 0.15rem 0.15rem;
                .list-child{
                    padding: 0.3rem 0.2rem;
                    border-top: solid 1px #EFEEEE;
                    font-size: 0.3rem;
                    position: relative;
                    h3{
                        font-size: 0.34rem;
                        color: #222222;
                        .bar{
                            display: inline-block;
                            background: #0ABC88;
                            width: 0.06rem;
                            height: 0.33rem;
                            vertical-align: top;
                            margin-right: 0.13rem;
                            border-radius: 0.8rem;
                        }
                    }
                    .child-tit{
                        color: #888888;
                        font-weight: normal;
                    }
                    .sheshi{
                        margin-top: 0.36rem;
                    }
                    .child-wz{
                        margin-top: 0.17rem;
                    }
                    >i{
                        display: inline-block;
                        position: absolute;
                        color: #C9BBBB;
                        font-size: 0.29rem;
                        top: 0.38rem;
                        right: 0.2rem;
                    }
                }
                .list-child:last-of-type{
                    border-radius: 0 0 0.15rem 0.15rem;
                }
            }


        }

    }
</style>