<template>
    <div class="risk-details">
        <md-scroll-view
                ref="scrollView"
                :bouncing="false"
                :scrolling-x="false"
                :auto-reflow="true"
                @end-reached="$_onEndReached"
        >
            <div class="detail-top zhongda" v-if="infoRiskData.riskLevel == 1">
                <h4 class="top-tit">{{infoRiskData.riskCode}}</h4>
                <div class="dengji" ><img src="../../assets/risk_list/common_icon_zhongda@3x.png" alt=""> 重大风险</div>
            </div>
            <div class="detail-top jiaoda" v-else-if="infoRiskData.riskLevel == 2">
                <h4 class="top-tit">{{infoRiskData.riskCode}}</h4>
                <div class="dengji" ><img src="../../assets/risk_list/common_icon_jiaoda@3x.png" alt=""> 较大风险</div>
            </div>
            <div class="detail-top yiban" v-else-if="infoRiskData.riskLevel == 3">
                <h4 class="top-tit">{{infoRiskData.riskCode}}</h4>
                <div class="dengji" ><img src="../../assets/risk_list/common_icon_yiban@3x.png" alt=""> 一般风险</div>
            </div>
            <div class="detail-top di" v-else>
                <h4 class="top-tit">{{infoRiskData.riskCode}}</h4>
                <div class="dengji" ><img src="../../assets/risk_list/common_icon_jiaodi@3x.png" alt=""> 低风险</div>
            </div>

            <div class="info-box">
                <h3><i></i>基本信息</h3>
                <div class="info-list">
                    <div class="tit">一级危险源</div>
                    <div class="cont" v-if="infoRiskData.rootDangerSrcName">{{infoRiskData.rootDangerSrcName}}</div>
                    <div class="cont" v-else>暂无</div>
                </div>
                <div class="info-list">
                    <div class="tit">二级危险源</div>
                    <div class="cont" v-if="infoRiskData.parentDangerSrcName">{{infoRiskData.parentDangerSrcName}}</div>
                    <div class="cont" v-else>暂无</div>
                </div>
                <div class="info-list">
                    <div class="tit">作业步骤</div>
                    <div class="cont">{{infoRiskData.riskName}}</div>
                </div>
                <div class="info-list">
                    <div class="tit">危害因素</div>
                    <div class="cont">{{infoRiskData.riskReason}}</div>
                </div>
                <div class="info-list">
                    <div class="tit">事故后果</div>
                    <div class="cont">{{infoRiskData.riskConsequence}}</div>
                </div>
            </div>
            <div class="info-box cuoshi-box" v-if="infoRiskData.myRiskMeasure">
                <h3><i></i>管控措施</h3>
                <div class="cuoshi-list">
                    <div class="cs-tit">工程技术措施</div>
                    <div class="cs-cont" v-if="infoRiskData.myRiskMeasure.project.length > 0">
                        <p v-for="(item, index) in infoRiskData.myRiskMeasure.project">{{index+1}}.{{item.riskMeasureContent}}</p>
                        <!--{{infoRiskData.project}}-->
                    </div>
                    <div class="cs-cont" v-else>无</div>
                </div>
                <div class="cuoshi-list">
                    <div class="cs-tit">管理措施</div>
                    <div class="cs-cont" v-if="infoRiskData.myRiskMeasure.manage.length > 0">
                        <p v-for="(item, index) in infoRiskData.myRiskMeasure.project">{{index+1}}.{{item.riskMeasureContent}}</p>
                    </div>
                    <div class="cs-cont" v-else>无</div>
                </div>
                <div class="cuoshi-list">
                    <div class="cs-tit">教育措施</div>
                    <div class="cs-cont" v-if="infoRiskData.myRiskMeasure.education.length > 0">
                        <!--{{infoRiskData.education}}-->
                        <p v-for="(item, index) in infoRiskData.myRiskMeasure.education">{{index+1}}.{{item.riskMeasureContent}}</p>
                    </div>
                    <div class="cs-cont" v-else>无</div>
                </div>
                <div class="cuoshi-list">
                    <div class="cs-tit">应急措施</div>
                    <div class="cs-cont" v-if="infoRiskData.myRiskMeasure.emergency.length > 0">
                        <!--{{infoRiskData.emergency}}-->
                        <p v-for="(item, index) in infoRiskData.myRiskMeasure.emergency">{{index+1}}.{{item.riskMeasureContent}}</p>
                    </div>
                    <div class="cs-cont" v-else>无</div>
                </div>
                <div class="cuoshi-list">
                    <div class="cs-tit">个体防护</div>
                    <div class="cs-cont" v-if="infoRiskData.myRiskMeasure.protection.length > 0">
                        <!--{{infoRiskData.protection}}-->
                        <p v-for="(item, index) in infoRiskData.myRiskMeasure.protection">{{index+1}}.{{item.riskMeasureContent}}</p>
                    </div>
                    <div class="cs-cont" v-else>无</div>
                </div>
            </div>
        </md-scroll-view>

    </div>
</template>

<script>
    import {getRiskMeasureListByRiskId} from '@/api/risk_list';

    import {
        TabBar,
        Swiper,
        SwiperItem,
        ScrollView,
        ScrollViewRefresh,
        ScrollViewMore,
        Button,
        InputItem,
        Icon,
        Tag,
        Toast,
    } from 'mand-mobile'
    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,
        },
        data() {
            return {
                infoRiskData: {}
            }
        },
        created() {
        },
        mounted(){
          console.log(this.$route.query.infoData)
            // this.infoRiskData = this.$route.query.infoData
            this.getDetails()
        },
        methods: {
            async getDetails(){
                await getRiskMeasureListByRiskId({
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId,
                    riskId: this.$route.query.id,
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 1) {

                        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.infoRiskData = data;
                        console.log(this.infoRiskData)
                    }
                }).catch(err => {
                })
            },
            $_onEndReached(){

            }
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
.risk-details{
    height: 100vh;
    .detail-top{
        background: #FFF6EE;
        padding: 0.25rem 0.2rem 0.7rem 0.2rem;
        .top-tit{
            font-size: 0.38rem;
            color: #222222;
        }
        .dengji{
            margin-top: 0.2rem;
            font-size: 0.22rem;
            img{
                width: 0.14rem;
                height: 0.2rem;
            }
        }
    }
    .zhongda{
        background: #FFF3F3;
        .dengji{
            color: #F01716;
        }
    }
    .jiaoda{
        background: #FFF6EE;
        .dengji{
            color: #FF7800;
        }
    }
    .yiban{
        background: #FFFBEC;
        .dengji{
            color: #FFCC00;
        }
    }
    .di{
        background: #EBF5FF;
        .dengji{
            color: #3095FD;
        }
    }
    .info-box{
        background: #FFFFFF;
        border-radius: 0.3rem 0.3rem 0 0;
        padding: 0.3rem 0 0.65rem 0.34rem;
        margin-top: -0.4rem;
        h3{
            font-size: 0.34rem;
            color: #222222;
            i{
                display: inline-block;
                background: #0ABC88;
                width: 0.06rem;
                height: 0.33rem;
                vertical-align: top;
                margin-right: 0.13rem;
                border-radius: 0.8rem;
            }
        }
        .info-list{
            border-bottom: solid 1px #E6E6E6;
            padding: 0.28rem 0;
            .tit{
                font-size: 0.28rem;
                color: #999999;
            }
            .cont{
                font-size: 0.3rem;
                color: #000;
                margin-top: 0.18rem;
            }
        }
        .info-list:last-of-type{
            border-bottom: none;
        }
    }
    .cuoshi-box{
        background: #F8F8F8;
        .cuoshi-list{
            border-bottom: solid 1px #E6E6E6;
            padding: 0.28rem 0;
            .cs-tit{
                color: #999999;
                font-size: 0.28rem;
            }
            .cs-cont{
                font-size: 0.3rem;
                margin-top: 0.2rem;
                padding-right: 0.25rem;
                p{
                    margin-top: 0.1rem;
                }
            }
        }
        .cuoshi-list:last-of-type{
            border-bottom: none;
        }
    }
}
</style>