<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>
        <span slot="footer" class="dialog-footer">
        <el-button size='medium' type='primary' @click="visible = false">关闭</el-button>
        </span>
</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: {
    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
        }
      })
    }
    //获取截图和视频
    // 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)
    //             }
    //         }
    //     })
    // },
  }
}
</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>
