<template lang="pug">
    el-dialog(:modal="false"  :append-to-body="true" top="5vh" class="dialogClass" width="1390px" :close-on-press-escape="false" :visible.sync="visible" )
        div(slot="title")
            span.title-bold 报警处理详情
        <div style="height:410px; margin-bottom:20px;">
        <div class="instruct-list-dialog instruct-list-dialog-left">
        <div class="header">基本信息</div>
        <div>
        el-form(ref="dataForm" :model="dataForm" label-width="100px")
            el-form-item.el_form_item(label="报警编码")
                el-input(v-model="this.dataForm.eventNumber" size="mini" readonly)
            el-form-item.el_form_item(label="报警名称")
                el-input(v-model="this.dataForm.eventName" :title='dataForm.eventName' size="mini" readonly)
            el-form-item.el_form_item(label="资源点名称")
                el-input(v-model="this.dataForm.resourceName" size="mini" readonly)
            el-form-item.el_form_item(label="报警类型")
                el-input(v-model="this.dataForm.eventTypeName"  size="mini" readonly)
            el-form-item.el_form_item(label="发生时间")
                el-input(v-model="this.dataForm.occurrenceTime" size="mini" readonly)
            el-form-item.el_form_item(label="报警等级")
                el-input(v-if="dataForm.eventLevel === 1" value="特别重大" size="mini" readonly)
                el-input(v-if="dataForm.eventLevel === 2" value="重大" size="mini" readonly)
                el-input(v-if="dataForm.eventLevel === 3" value="一般" size="mini" readonly)
            el-form-item.el_form_item(label="处理状态")
                //- font(v-if="dataForm.status === 3") 已处理
                //- font(v-if="dataForm.status === 2") 处理中
                //- font(v-if="dataForm.status === 1") 未处理
                el-input(v-if="dataForm.status === 1" value="未处理" size="mini" readonly)
                el-input(v-if="dataForm.status === 2" value="处理中" size="mini" readonly)
                el-input(v-if="dataForm.status === 3" value="已处理" size="mini" readonly)
        </div>
        </div>
        <div class="instruct-list-dialog instruct-list-dialog-center">
        <div class="header">报警截图</div>
        <div style="padding:0px 10px" v-if ="dataForm.eventType != 4">
        img(v-if="imgList.length === 0" height="260px" width="430px" src="../../../assets/images/videoImg.png" alt="")
        el-carousel(v-if="imgList.length > 0" height="260px" arrow="always")
            el-carousel-item(v-for="(item,index) in imgList")
                img(:src="item.src" height="220px" width="430px")
                <div class="carousel-name">
                <span style="float:left;margin-left:10px;"><span style="font-size:18px;font-weight:bold;color:rgba(33,172,252,1);">{{index+1}}</span>{{'/'+imgList.length}}</span>
                //span(style="float:right;margin-right:10px;") 名字
                </div>
        </div>
        <div v-if ="dataForm.eventType == 4" style="padding:0px 10px;float: left;">
        img(v-if="imgList.length > 0" height="260px" width="210px" :src="imgList[0].src" alt="" )
        //- <span>黑名单库图片</span>
        img(v-if="imgList.length > 0" height="260px" width="210px" :src="imgList[1].src" alt="" style="padding-left:5px")
        img(v-if="imgList.length === 0" height="260px" width="210px" src="../../../assets/images/videoImg.png" alt="" )
        //- <span>黑名单库图片</span>
        img(v-if="imgList.length === 0" height="260px" width="210px" src="../../../assets/images/videoImg.png" alt="" style="padding-left:5px")
        //- <span>抓拍图片</span>
        </div>
        </div>
        <div class="instruct-list-dialog instruct-list-dialog-right">
        <div class="header">报警视频</div>
        <div style="padding:0px 10px">
        img(v-if="videoList.length === 0" height="260px" width="430px" src="../../../assets/images/videoImg.png" alt="")
        el-carousel(v-if="videoList.length > 0" height="260px" arrow="always")
            el-carousel-item(v-for="(item,index) in videoList")
                video(width="430px" height="220px" :src="item.src" autoplay loop controls muted="true")
                <div class="carousel-name">
                <span style="float:left;margin-left:10px;"><span style="font-size:18px;font-weight:bold;color:rgba(33,172,252,1);">{{index+1}}</span>{{'/'+videoList.length}}</span>
                //span(style="float:right;margin-right:10px;") 名字
                </div>
        </div>
        </div>
        </div>
        div.alarms-untreated-dialog-bottom(v-if="dataForm.type !== null")
            el-tabs(v-model="activeName" type='border-card')
                el-tab-pane(v-if="dataForm.type === 1" label="处理报警" name="first")
                    <div class="instruct-list-dialog" style="width:100%; height:230px">
                    <div style="margin:20px;" :style="{'width':`${opinionList.length}`*200+'px'}">
                    el-steps(:space="300" :active="opinionActive")
                        el-step(v-for="item in opinionList" :key='item.id' icon='el-icon-stepsIcon' )
                                    template(slot="description")
                                        div 处理人： {{item.name }}
                                        div 处理时间： {{item.opinionTime}}
                                        div 处理意见：
                                            font(:title="item.content") {{item.content,82|substr}}
                    </div>
                    </div>
                el-tab-pane(v-if="dataForm.type === 2" label="应急预案" name="second" )
                    div.instruct-list-dialog(v-if="planStepList.length > 0" style="width:100%; height:230px" v-loading="loading")
                        div(style="margin:20px;" :style="{'width':`${planStepList.length}`*200+'px'}")
                            el-steps(:space="300" :active="stepActive")
                                el-step(v-for="(item,index) in planStepList" :key='index' icon='el-icon-stepsIcon')
                                    template(slot="description")
                                        div(v-if="item.instrId == null")
                                            el-row
                                                el-col(:span="24" v-if="item.runMode === 1") 人为响应：
                                                el-col(:span="24" v-if="item.runMode === 2") 系统响应：
                                            el-row
                                                el-col(:span="24" v-if="item.runMode === 1") 执行单位：{{item.exeName}}
                                                el-col(:span="24" v-if="item.runMode === 2") 资源点：{{item.resName}}
                                            el-row
                                                el-col(:span="24" v-if="item.runMode === 1")
                                                    div 动作：
                                                        font(:title="item.content" ) {{item.content,25|substr}}
                                                el-col(:span="24" v-if="item.runMode === 2") 动作：{{item.actionName}}
                                            el-row(v-if="item.runMode == 2 && item.status === 2")
                                                el-col(:span="24" )
                                                    div 执行结果：
                                                        span(v-if="item.byx1 === '1'")
                                                            font(color='#67C23A') 成功
                                                            font.action_font(class="el-icon-picture" v-if="item.actionName === '抓图'" @click="queryActionHandle(item.id,1)") 抓图详情
                                                            font.action_font(class="el-icon-picture" v-if="item.actionName === '录像下载'" @click="queryActionHandle(item.id,2)") 录像下载详情
                                                        font(color='#F56C6C' v-if="item.byx1 === '2'") 失败
                                                        font(color='#F56C6C' v-if="item.byx1 === '3'") 中止
                                            el-row
                                                el-col(:span="24") 开始执行：{{item.updateTime}}
                                            el-row
                                                el-col(:span="24") 执行完成：{{item.byx1 === '1' ? item.endTime: item.runMode == 1 ? item.endTime : ''}}
                                            //el-row(v-if="stepActive === index && item.runMode === 1")
                                                el-col(:span="24")
                                                    el-button(mini="size" type="primary" @click="nextHandle(item)") 下一步
        <span slot="footer" class="dialog-footer">
        <el-button size='medium' type='primary' @click="visible = false">关闭</el-button>
        </span>

        el-dialog(:modal="false" width="35%" :modal-append-to-body="false" class="dialogActionClass" :close-on-press-escape="false" :visible.sync="actionVisible")
            div(slot="title")
                span.title-bold {{actionType == 0 ? '' : actionType==1 ? '抓图详情' : '录像下载详情'}}
            div(v-loading="actionLoading")
                img(v-if="actionList.length === 0" height="360px" width="100%" src="../../../assets/images/videoImg.png" alt="")
                el-carousel(v-if="actionList.length > 0" height="360px" arrow="always")
                    el-carousel-item(v-for="(item,index) in actionList")
                        img(v-if="item.fileType === 'jpg' && item.path && item.path != 'null'" :src="urlPath+item.path" height="320px" width="100%")
                        video(v-else-if="item.fileType === 'mp4' && item.path && item.path != 'null'" height="320px" width="100%" :src="urlPath+item.path" autoplay loop controls muted="true")
                        img(v-else height="360px" width="100%" src="../../../assets/images/videoImg.png" alt="")
                        div.action_div
                            span.action_span(style="") {{index+1}}</span>{{'/'+actionList.length}}
            //span.dialog-footer(slot="footer" style="padding:0 20px 0px 20px;")
                el-button(size='medium' type='primary' @click="actionVisible = false") 关闭
</template>
<script>
    export default {
        data() {
            return {
                visible: false,
                loading: false,
                actionVisible: false,
                actionLoading: false,
                actionList: [],
                actionType: 0,
                dataForm: {}, //基本信息
                disposeForm: {}, //处理报警
                urlPath: window.CONFIG.urlPath,
                planForm: {},
                planList: [], //应急预案
                opinionList: [], //处理报警步骤集合
                stepList: [], //应急预案步骤集合
                planStepList: [],
                opinionActive: 0,
                stepActive: 0,
                activeName: 'first',
                imgList: [],
                videoList: []
            }
        },
        filters: {
            substr (val, len) {
                if (!val) return ''
                if (val.length > len) {
                    return val.slice(1, len) + '...'
                }
                return val
            }
        },
        methods: {
            //指令步骤抓图和录像下载查询
            queryActionHandle(id, type) {
                this.actionType = type
                this.actionList = []
                this.actionVisible = true
                this.actionLoading = true
                this.$http({
                    url: this.$http.adornUrlAlarm(`/orAttachment/queryByAlarmStepId/` + id),
                    method: 'get'
                }).then(data => {
                    this.actionLoading = false
                    if (data && data.code === 0) {
                        this.actionList = data.list
                    }
                })
            },
            init(bean) {
                this.activeName = 'first'
                this.visible = true
                this.dataForm = {}
                this.disposeForm = {}
                this.planList = {}
                this.planForm = {}
                this.opinionList = []
                this.stepList = []
                this.planStepList = []
                this.getById(bean.id)
                this.getListByAlarmsId(bean.id)
                this.getHmdListByAlarmsId(bean.id)
            },
            //获取报警基本信息
            getById(id) {
                this.$http({
                    url: this.$http.adornUrlAlarm(`/alarmsInfo/getId`),
                    method: 'get',
                    params: {
                        id: id,
                        stationId: null
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.dataForm = data.bean
                    }
                }).then(data => {
                    //初始化处理报警信息
                    if (this.dataForm.type === 1) {
                        this.activeName = 'first'
                        this.$http({
                            url: this.$http.adornUrlAlarm(`/alarmsOpinion/getAlarmsId/`),
                            method: 'get',
                            params: this.$http.adornParams({
                                stationId: null,
                                alarmsId: this.dataForm.id
                            })
                        }).then(data => {
                            if (data && data.code === 0) {
                                this.opinionList = data.list
                                this.opinionActive = this.opinionList.length
                            }
                        })
                    }
                    //应急预案
                    if (this.dataForm.type === 2) {
                        this.activeName = 'second'
                        this.getPlanInfo()
                    }
                })
            },
            //获取截图和视频
            getListByAlarmsId(id) {
                this.imgList = []
                this.videoList = []
                this.$http({
                    url: this.$http.adornUrlAlarm(`/linkAttachment/queryListByAlarmsId/` + id),
                    method: 'get'
                }).then(data => {
                    if (data && data.code === 0) {
                        let arr = data.list
                        for (let i in arr) {
                            let val = { 'src': this.urlPath + arr[i].path }
                            if (arr[i].fileType === 'jpg') {
                                this.imgList.push(val)
                            }
                            if (arr[i].fileType === 'mp4') {
                                this.videoList.push(val)
                            }
                        }
                    }
                })
            },
            //获取截图和视频
            getHmdListByAlarmsId(id) {
                // this.num = this.num + 1
                this.imgList = []
                this.videoList = []
                this.$http({
                    url: this.$http.adornUrlAlarm(`/alarmAttachment/list`),
                    method: 'post',
                    params: {
                        alarmsId: id,
                        stationId: null
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        let arr = data.list
                        for (let i in arr) {
                            let val = { 'src': this.urlPath + arr[i].path }
                            this.imgList.push(val)
                        }
                    }
                })
            },
            //获取应急预案信息
            getPlanInfo() {
                this.$http({
                    url: this.$http.adornUrlAlarm(`/alarmsPlanStep/getPlanStepList`),
                    method: 'get',
                    params: {
                        alarmsId: this.dataForm.id,
                        stationId: null
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.planStepList = data.list
                        for (let i in this.planStepList) {
                            if (this.planStepList[i].status === 1) {
                                this.stepActive = Number(i)
                                break
                            }
                        }
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .action_font{
        cursor:pointer;
        line-height: 20px;
        padding-left:10px;
    }
    .action_div{
        float:left;
        width:100%;
        height:40px;
        background: #F6F7FB;
        line-height: 40px;
        bottom: 0;
    }
    .action_span{
        float:left;
        text-indent: 1rem;
        font-size:18px;
        font-weight:bold;
        color:rgba(33,172,252,1)
    }
    .dialogActionClass{
        /deep/ .el-dialog__body{
            padding: 10px;
        }
    }
    .el_form_item{
        margin-bottom: 0px !important;
    }
    .col_style{
        height: 2rem;
        line-height: 2rem;
    }
    .row_div{
        padding: 1rem 1.5rem 1rem 0rem;
        border: 1px #DCDFE6 solid;
        /*background-color: #EBEEF5;*/
        height: 20rem;
    }
    .col_div{
        padding: 1rem;
        border: 1px #DCDFE6 solid;
        /*background-color: #EBEEF5;*/
        height: 13rem;
        max-height: 13rem;
        overflow-x:auto;
        overflow-y:hidden;

    }
    .no_img{
        text-align: center;
        font-size: 36px;
        font-weight: bold;
    }
    .col_div_two{
        padding: 1rem;
        border: 1px #DCDFE6 solid;
        /*background-color: #EBEEF5;*/
        border-left: none;
        height: 13rem;
    }
    .row_image_div{
        padding: 1.5rem 2rem;
        border: 1px #DCDFE6 solid;
        border-left: none;
        /*background-color: #EBEEF5;*/
        height: 20rem;
    }
    .alarms_font{
        color:#409EFF;
        line-height: 2rem;
        font-weight: bold;
    }
    .dialogClass {
        /deep/ .el-dialog__body{
            padding-bottom: 10px;
        }
    }
    .instruct-list-dialog{
        height:410px; width: 450px; float: left;background: #fff; box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2);  overflow: auto;
        .header{
            height: 40px; background: #EEF8FF; line-height: 40px; padding-left: 15px;font-weight:400;margin-bottom: 20px;
        }
        .el-tree{
            background:rgba(255,255,255,0);
        }
        .el-tree-node__content:hover{
            background: #35AFF8
        }
        .el-input{
            width: 90%;
        }
        .el-carousel__container{
            width:300px; margin:0 auto;
        }
        .el-carousel__arrow--left {
            left:-50px;
        }
        .el-carousel__arrow--right{
            right:-50px;
        }
        .carousel-name{
            position: absolute;
            width:100%; height:40px;background:#F6F7FB;bottom:0; line-height:40px;
        }
    }
    .alarms-untreated-dialog-bottom{
        .el-tabs__nav-scroll {
            height: 40px;
            padding-top: 10px;
            padding-left: 10px;
            background: #EEF8FF;
            .el-tabs__item{
                border-top-color: #DCDFE6 !important;
            }
        }
    }

    .alarms-untreated-dialog-bottom{
        .el-tabs{
            .el-tabs__content{
                padding:0 !important;
            }
        }

    }

</style>
