<template>
    <div class="risk-responsibility">
        <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>
                    <!--<span slot="right">取消</span>-->
                </md-input-item>
            </div>
            <span class="cancel-btn"  v-if="isSearchBtn" @click="cancelSearch">取消</span>
        </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)">
                        <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 class="list-child">
                            <h4 class="child-tit" v-text="item.riskPointType == 1 ? '设备设施' : '作业活动'"> </h4>
                            <p class="child-wz">{{item.riskName}}</p>
                        </div>
                        <div class="list-child">
                            <h4 class="child-tit">危害因素 </h4>
                            <p class="child-wz">{{item.riskReason}}</p>
                        </div>
                        <div class="list-child">
                            <h4 class="child-tit">事故后果 </h4>
                            <p class="child-wz">{{item.riskConsequence}}</p>
                        </div>
                        <div class="list-child" @click="goDetails(item)">
                            <h4 class="child-tit">管控级别 </h4>
                            <p class="child-wz">
                                {{item.riskCtrlLevelTitle}}
                            </p>
                        </div>
                        <div class="list-child">
                            <h4 class="child-tit">管控岗位 </h4>
                            <p class="child-wz">{{item.positionTitle}}</p>
                        </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>
</template>

<script>
    import {
        TabBar,
        Swiper,
        SwiperItem,
        ScrollView,
        ScrollViewRefresh,
        ScrollViewMore,
        Button,
        InputItem,
        Icon,
        Tag,
        Toast,
    } from 'mand-mobile'
    import {queryRiskDutyListByPage} 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: [],
            }
        },
        created() {
        },
        computed: {
            ...mapGetters([
                'job_ticket_aId',
                'job_ticket_cId',
            ])
        },
        mounted(){
            if(this.$route.query.fromUrl){
                this.$store.dispatch('request_config/setBaseUrl', this.$route.query.fromUrl)
            }else{
                this.$store.dispatch('request_config/setBaseUrl', location.host)
            }
            // 所以接口传 aId=294，cId=1
            if(this.$route.query.aId && this.$route.query.cId){
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId
                })
                this.$_onEndReached(this.searchVal)
            }else{
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: '',
                    cId: ''
                })
            }
        },
        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 queryRiskDutyListByPage({
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId,
                    page: this.page,
                    keyword: this.searchVal
                }).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(res)
                    }
                }).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){
                if(this.showRiskIndex === n){
                    this.showRiskIndex = '';
                    return;
                }
                this.showRiskIndex = n;
            }
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
    .risk-responsibility{
        height: 100vh;
        background: #F2F2F2;
        .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;
            }
        }
        .my-scroll{
            height: calc(100vh - 1.3rem);
        }
        .list-box{
            margin-bottom: 0.2rem;
            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;
                    .child-tit{
                        color: #888888;
                        font-weight: normal;
                    }
                    .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>