<template lang="pug">
    el-dialog(width="60%" :visible.sync='visible' :append-to-body='true' :before-close="handleClose")
        div(slot='title')
            span.title-bold 资源点详情
        el-form(:model='dataForm' :rules='dataRule' ref='dataForm'  label-width='100px')
            el-row()
                el-col(:span="12" class='info-block')
                    div(class='info-title') 基本信息
                    div(class='info-form')
                        el-form-item(label='资源点名称:' prop='name' )
                            el-input(v-model='dataForm.name'  readonly)
                        el-form-item(label='资源点类型:' prop='type' )
                            el-input(v-model='dataForm.resourceName'  readonly)
                        el-form-item(label='楼栋:' prop='stationName' )
                            el-input(v-model='dataForm.stationName'  readonly)
                        el-form-item(label='资源点编码:' prop='code')
                            el-input(v-model='dataForm.code'  readonly)
                        el-form-item(label='地址码:' prop='addressCode')
                            el-input(v-model='dataForm.addressCode'  readonly)
                        el-form-item(label='端口号:' prop='port')
                            el-input(v-model='dataForm.port'  readonly)
                        el-form-item(label='用户名:' prop='username')
                            el-input(v-model='dataForm.username'  readonly)
                        el-form-item(label='密码:' prop='password')
                            el-input(v-model='dataForm.password'  readonly)
                        el-form-item(label='父节点名称:' prop='parentName' v-if="dataForm.dicTypeName ==='枪机' && dataForm.subCode ==='04'")
                            el-input(v-model='dataForm.pName'  readonly)
                        el-form-item(label='设备品牌:' prop='brand')
                            el-input(v-model='dataForm.brandName'  readonly)
                        el-form-item(label='关联摄像头:' prop='cameraNames')
                            //el-input(v-model='dataForm.cameraNames'  @focus="checktable")
                            el-input(v-model='dataForm.cameraNames'  readonly)
                        el-form-item(label='通道:' prop='byx1' v-if="dataForm.dicTypeName === '枪机' || dataForm.dicTypeName === '球机' || dataForm.dicTypeName === '安检机'")
                            el-input(v-model='dataForm.byx1' readonly)

                el-col(:span="11" style="margin-left: 30px;")
                    el-row( class='info-block')
                        div(class='info-title') 位置信息
                        div(class='info-form')
                            el-form-item(:label='(dataForm.dicTypeName === "振动光纤" || dataForm.dicTypeName === "红外探测器") ? "X坐标(起点):":"X坐标:"' prop='xlongit')
                                el-input(v-model='dataForm.xlongit'  readonly)
                            el-form-item(:label='(dataForm.dicTypeName === "振动光纤" || dataForm.dicTypeName === "红外探测器") ? "Y坐标(起点):":"Y坐标:"' prop='ylat')
                                el-input(v-model='dataForm.ylat'  readonly)
                            el-form-item(label='X坐标(终点):' prop='xpoint' v-if="dataForm.dicTypeName === '振动光纤' || dataForm.dicTypeName === '红外探测器' ")
                                el-input(v-model='dataForm.xpoint'  readonly)
                            el-form-item(label='Y坐标(终点):' prop='ypoint' v-if="dataForm.dicTypeName === '振动光纤' || dataForm.dicTypeName === '红外探测器' ")
                                el-input(v-model='dataForm.ypoint'  readonly)
                            el-form-item(label='地图层级:' prop='tierId')
                                el-input(v-model='dataForm.tierName'  readonly)
                            el-form-item(label='部署位置:' prop='deployLocation')
                                el-input(v-model='dataForm.deployLocation'  readonly)
                    el-row( class='info-block' style="margin-top: 20px;")
                        div(class='info-title') 附属信息
                        div(class='info-form')
                            el-form-item(label='当前操作员:' prop='operatorName')
                                el-input(v-model='dataForm.operatorName'  readonly)
                            el-form-item(label='附属信息:' prop='attachedInfo')
                                el-input.mywidth(type="textarea" :rows=5 resize="none" v-model="dataForm.attachedInfo"   readonly)
                            el-form-item(label='备注:' prop='remark')
                                el-input.mywidth(type="textarea" :rows=5 resize="none" v-model="dataForm.remark"   readonly)
        el-dialog(top="2vh" class='videoMap' v-if="addVisible"  :visible.sync="addVisible" width="85%" :append-to-body='true' :modal-append-to-body='true' :before-close='dialogClose')
            div(slot='title')
                span.title-bold 关联摄像头详情
            div(id="mapDialog" style="width: 100%;height: 680px;position: relative;")
            span.dialog-footer(slot="footer")
                el-button(@click="closeC" type='primary' size='medium') 关闭

        span.dialog-footer(slot='footer')
            el-button(@click='handleClose' type='primary' size='medium') 关闭
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'

// openlayer
import 'ol/ol.css'
import { Map, View, layer, Markers } from 'ol'
import { Projection, transform, fromLonLat } from 'ol/proj'
import { getCenter } from 'ol/extent'
import overviewmap from 'ol/control/OverviewMap'
import interaction from 'ol/interaction/Interaction'
import Modify from 'ol/interaction/Modify'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import { format } from 'ol/coordinate'
import { control } from 'ol/control/Control'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom } from 'ol/interaction'
import MousePosition from 'ol/control/MousePosition'
import Draw from 'ol/interaction/Draw'
import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'

// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
import { log } from 'util'
let that

export default {
  computed: {
    ...mapState('d2admin/user', ['info'])
  },
  data() {
    return {
      mapDialog: null,
      vectorLayer: null,
      imgLayer: null,
      projection: null,
      urlPath: window.CONFIG.urlPath,
      extent: [-1100, 110, 1460, 820],
      clickFlag: false,
      visible: false,
      addVisible: false,
      icon: {},
      list: [],
      sysOrgList: [],
      dataListSelections: [],
      lineList: [],
      stationList: [],
      typeList: [],
      systemList: [],
      parentList: [],
      tierList: [],
      tier: {},
      checkCameraList: [],
      checkCameraNameList: [],
      brandList: [],
      dataForm: {
        id: 0,
        name: '',
        type: 1,
        stationId: localStorage.getItem('stationId'),
        stationName: '',
        tierId: '',
        cameraNames: '',
        code: '',
        addressCode: '',
        port: '',
        username: '',
        password: '',
        remark: '',
        status: 1,
        dicTypeName: ''
      },
      dataRule: {
        // name: [
        //   { required: true, message: '资源点名称不能为空', trigger: 'blur' },
        //   { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        // ],
        // type: [{ required: true, message: '资源点类型不能为空', trigger: 'blur' }],
        // lineId: [{ required: true, message: '线路不能为空', trigger: 'blur' }],
        // stationId: [{ required: true, message: '站点不能为空', trigger: 'blur' }],
        // subSystem: [{ required: true, message: '子系统不能为空', trigger: 'blur' }],
        // code: [{ required: true, message: '资源点编码不能为空', trigger: 'blur' },
        // { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }],
        // subCode: [{ required: true, message: '子系统编码不能为空', trigger: 'blur' },
        // { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }],
        // parentName: [{ required: true, message: '父节点名称不能为空', trigger: 'blur' }],
        // xpoint: [{ required: true, message: 'X坐标不能为空', trigger: 'blur' }],
        // ypoint: [{ required: true, message: 'Y坐标不能为空', trigger: 'blur' }],
        // xlongit: [{ required: true, message: 'X坐标不能为空', trigger: 'blur' }],
        // ylat: [{ required: true, message: 'Y坐标不能为空', trigger: 'blur' }],
        // width: [{ required: true, message: '长度不能为空', trigger: 'blur' }],
        // tierId: [{ required: true, message: '地图层级不能为空', trigger: 'blur' }],
        // deployLocation: [{ required: true, message: '部署位置不能为空', trigger: 'blur' },
        // { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }],
        // operatorName: [{ required: true, message: '当前操作员不能为空', trigger: 'blur' }],
        // // cameraNames: [{ required: true, validator: validatorCamer, trigger: ['blur', 'change'] }],
        // brand: [{ required: true, message: '品牌不能为空', trigger: ['blur', 'change'] }],
        // icon: [{ required: true, message: '资源点图标不能为空', trigger: 'blur' }],
        // attachedInfo: [{ min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }],
        // remark: [{ min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }]
      }
    }
  },
  created() {
    that = this
  },
  methods: {
    initMap(bean) {
      if (this.mapDialog) {
        this.mapDialog.removeLayer(this.imgLayer)
        this.mapDialog.removeLayer(this.vectorLayer)
      }
      let zoomControl = new Zoom({
        delta: 0.2,
        zoomInTipLabel: '',
        zoomOutTipLabel: ''
      })
      this.projection = new Projection({
        // 投影
        code: 'xkcd-image',
        units: 'pixels',
        extent: this.extent
      })

      this.imgLayer = new ImageLayer({
        id: bean.id,
        source: new ImageStatic({
          url: bean.readPath, //这里添加静态图片的地址
          projection: this.projection,
          imageExtent: this.extent
        }),
        visible: true
      })

      this.mapDialog = new Map({
        target: 'mapDialog',
        layers: [this.imgLayer],
        controls: [zoomControl],
        view: new View({
          projection: this.projection,
          center: getCenter([0, 0, 418, 600]), // 获取范围的中心坐标。
          zoom: 2.5,
          maxZoom: 5,
          minZoom: 1.5,
          extent: [-1100, -100, 2000, 1000]
        })
      })
    },
    changeImageLayer(bean) {
      if (bean === null) return
      if (this.mapDialog) {
        this.mapDialog.removeLayer(this.imgLayer)
      } else {
        return
      }
      this.imgLayer = new ImageLayer({
        id: bean.id,
        source: new ImageStatic({
          url: bean.readPath, //这里添加静态图片的地址
          projection: this.projection,
          imageExtent: this.extent
        }),
        visible: true
      })
      this.mapDialog.addLayer(this.imgLayer)
    },
    changeVectorLayer(list) {
      if (list) {
        this.list = list
      } else {
        return
      }
      if (this.mapDialog) {
        this.mapDialog.removeLayer(this.vectorLayer)
      } else {
        return
      }

      let featuresArr = []
      for (let i in list) {
        if (list[i].imageSrc) {
          featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
          let style = this.getPointStyle(
            list[i].imageSrc + '.png',
            this.list[i].name
          )
          featuresArr[i].setStyle(style)
          featuresArr[i].setId(list[i].id)
        }
      }
      this.vectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: featuresArr
        })
      })
      this.mapDialog.addLayer(this.vectorLayer)
    },
    getFeature(x, y) {
      return new OlFeature({
        type: 'icon',
        geometry: new OlGeomPoint([x, y])
      })
    },
    getPointStyle(src, name, zoom) {
      let style = new OlStyleStyle({
        image: new OlStyleIcon({
          anchor: [0.5, 0.5],
          scale: zoom || 0.4,
          //rotation:0 旋转度
          src: require('@/assets/images/' + src)
        }),
        text: new Text({
          text: name, // 添加文字描述
          font: '14px font-size', // 设置字体大小
          fill: new Fill({
            // 设置字体颜色
            color: 'black'
          }),
          offsetY: 30 // 设置文字偏移量
        })
      })
      return style
    },
    init(id) {
      this.visible = true
      this.initResource(id)
      this.dataForm.operatorName = this.info.name
    },
    initResource(id) {
      this.$http({
        url: this.$http.adornUrl(`/liResource/getId/`),
        method: 'get',
        params: { id: id }
      })
        .then((data) => {
          if (data && data.code === 0) {
            // this.dataForm = data.bean
            this.dataForm.addressCode = data.bean.addressCode
            this.dataForm.attachedInfo = data.bean.attachedInfo
            this.dataForm.brand = data.bean.brand
            this.dataForm.brandName = data.bean.brandName
            this.dataForm.byx1 = data.bean.byx1
            this.dataForm.byx2 = data.bean.byx2
            this.dataForm.byx3 = data.bean.byx3
            this.dataForm.cameraChange = data.bean.cameraChange
            this.dataForm.cameraIds = data.bean.cameraIds
            this.dataForm.cameraNames = data.bean.cameraNames
            this.dataForm.code = data.bean.code
            this.dataForm.codeType = data.bean.codeType
            this.dataForm.createTime = data.bean.createTime
            this.dataForm.createUserId = data.bean.createUserId
            this.dataForm.deleted = data.bean.deleted
            this.dataForm.deployLocation = data.bean.deployLocation
            this.dataForm.dicTypeName = data.bean.dicTypeName
            this.dataForm.icon = data.bean.icon
            this.dataForm.iconPath = data.bean.iconPath
            this.dataForm.id = data.bean.id
            this.dataForm.imageSrc = data.bean.imageSrc
            this.dataForm.name = data.bean.name
            this.dataForm.operatorId = data.bean.operatorId
            this.dataForm.operatorName = data.bean.operatorName
            this.dataForm.pName = data.bean.pName
            this.dataForm.parentName = data.bean.parentName
            this.dataForm.password = data.bean.password
            this.dataForm.port = data.bean.port
            this.dataForm.remark = data.bean.remark
            this.dataForm.resourceName = data.bean.resourceName
            this.dataForm.rotate = data.bean.rotate
            this.dataForm.stationId = data.bean.stationId
            this.dataForm.stationName = data.bean.stationName
            this.dataForm.status = data.bean.status
            this.dataForm.statusName = data.bean.statusName
            this.dataForm.tierId = data.bean.tierId
            this.dataForm.tierName = data.bean.tierName
            this.dataForm.type = data.bean.type
            this.dataForm.updateTime = data.bean.updateTime
            this.dataForm.updateUserId = data.bean.updateUserId
            this.dataForm.username = data.bean.username
            this.dataForm.width = data.bean.width
            this.dataForm.xlongit = data.bean.xlongit
            this.dataForm.xpoint = data.bean.xpoint
            this.dataForm.ylat = data.bean.ylat
            this.dataForm.ypoint = data.bean.ypoint

            this.checkCameraList = data.list.map((e) => {
              return { id: e.cameraId, name: e.cameraName }
            })

            if (
              this.checkCameraList != null &&
              this.checkCameraList.length > 0
            ) {
              var cameraIds = []
              var cameraNames = []
              for (var i = 0; i < this.checkCameraList.length; i++) {
                cameraIds.push(this.checkCameraList[i].id)
                cameraNames.push(this.checkCameraList[i].name)
              }
              this.dataForm.cameraIds = cameraIds.join(',')
              this.dataForm.cameraNames = cameraNames.join(',')
            }
          }
        })
        .then(() => {
          this.initResourceTypeDicList()
          this.getCameraByResourceId()
          this.initBrandDicList()
          this.initStationMapList()
        })
    },
    initStationMapList() {
      this.$http({
        url: this.$http.adornUrl(`/liStation/getId/${this.dataForm.stationId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then((data) => {
        if (data && data.code === 0) {
          this.tierList = data.bean.mapList
        }
      })
    },
    initStMapList() {
      this.$http({
        url: this.$http.adornUrl(`/liStationMap/getId/${this.dataForm.tierId}`),
        method: 'get',
        params: this.$http.adornParams()
      })
        .then((data) => {
          if (data && data.code === 0) {
            this.tier = data.bean
            this.tier.readPath = this.urlPath + this.tier.filePath
            this.initMap(this.tier)
          }
        })
        .then(() => {
          this.showResourceByMapId()
        })
    },
    initResourceTypeDicList() {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.typeList = data.list
          this.typeList.forEach((e) => {
            if (e.id === this.dataForm.type) {
              this.$nextTick(() => {
                this.dataForm.dicTypeName = e.name
              })
            }
          })
        }
      })
    },
    initBrandDicList() {
      this.brandList = []
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getBrandDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then((data) => {
        if (data && data.code === 0) {
          // this.brandList = data.list
          if (data.list !== null && data.list.length > 0) {
            // console.log(this.dataForm.type, '**********')
            data.list.forEach((res, index) => {
              if (
                (res.id === '6f43d870c0dd4327a38549d947b5cb6f' ||
                  res.id === '66eb8a17b56f4ca5a8d422591b42cd36') &&
                (this.dataForm.type === 'b6af764f2a6e454490a6b1b3c9057e57' ||
                  this.dataForm.type === 'ece0b8b2db27411886254e81134988a3')
              ) {
                //大华、海康威视  球机、枪机
                this.brandList.push(res)
              } else if (
                res.id === '47b0724186c848f481fe0b12681308e8' &&
                (this.dataForm.type === 'f4c840711eae4bcb9536a890cdfda493' ||
                  this.dataForm.type === '303310efddb34a2e9bf269bdff8a7dc5')
              ) {
                //同方威视    炸探、安检机
                this.brandList.push(res)
              } else if (
                res.id === '518be72e65d1441e8dab676cd2e2db89' &&
                this.dataForm.type === 'b47661ca1d454f9792ba5369f3cb2bc5'
              ) {
                //中泰通   液探
                this.brandList.push(res)
              } else if (
                res.id === 'b9dbc73e04b94e9294f65b5c2109ff22' &&
                this.dataForm.type === '683393c31cf0497bb0f62d457cb1e81f'
              ) {
                //安天下   安检门
                this.brandList.push(res)
              } else if (
                res.id === 'ae588516d2094d5d828f39a44d9b2973' &&
                this.dataForm.type === 'b45827c068254695864ee3c1d42573cb'
              ) {
                //爱克信   门禁系统
                this.brandList.push(res)
              } else if (
                res.id === '52b93b5b105b48bd8679cef6babfb6ba' &&
                this.dataForm.type === 'b45827c068254695864ee3c1d42573cb'
              ) {
                //臻通    入侵检测系统
                this.brandList.push(res)
              } else if (
                res.id === 'bdc14bb5e54f4c7d98d928c6622004e2' &&
                this.dataForm.type !== 'b6af764f2a6e454490a6b1b3c9057e57' &&
                this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' &&
                this.dataForm.type !== 'f4c840711eae4bcb9536a890cdfda493' &&
                this.dataForm.type !== '303310efddb34a2e9bf269bdff8a7dc5' &&
                this.dataForm.type !== '683393c31cf0497bb0f62d457cb1e81f' &&
                this.dataForm.type !== 'b45827c068254695864ee3c1d42573cb' &&
                this.dataForm.type !== 'b45827c068254695864ee3c1d42573cb'
              ) {
                this.brandList.push(res) //国产
              }
            })
            // console.log(this.brandList, '==========')
          }
        }
      })
    },
    tierChange(e) {
      this.tierList.forEach((a) => {
        if (a.name === e) {
          this.dataForm.tierId = a.id
          this.dataForm.tierName = a.name
        }
      })
    },
    // 图标选中
    iconChange(icon) {
      // this.icon = icon
      // this.dataForm.icon = icon.path
    },
    checktable() {
      this.addVisible = true
      this.initStMapList()
      this.oldCheckCameraList = JSON.parse(JSON.stringify(this.checkCameraList))
    },
    checkCamera() {
      this.addVisible = false
      this.dataForm.cameraIds = null
      this.dataForm.cameraNames = null
      if (this.checkCameraList != null && this.checkCameraList.length > 0) {
        var cameraIds = []
        var cameraNames = []
        for (var i = 0; i < this.checkCameraList.length; i++) {
          cameraIds.push(this.checkCameraList[i].id)
          cameraNames.push(this.checkCameraList[i].name)
        }
        this.dataForm.cameraIds = cameraIds.join(',')
        this.dataForm.cameraNames = cameraNames.join(',')
      }
    },
    dialogClose() {
      this.addVisible = false
      this.checkCameraList = JSON.parse(JSON.stringify(this.oldCheckCameraList))
    },
    closeC() {
      this.addVisible = false
      this.checkCameraList = JSON.parse(JSON.stringify(this.oldCheckCameraList))
    },
    // checkC (res) {
    //   if (this.dataForm.id === res.id) {
    //     return
    //   }
    //   var a = 0
    //   for (var i = 0; i < this.checkCameraList.length; i++) { //如果原来有，则移除出去，并还原颜色
    //     if (this.checkCameraList[i].id === res.id) {
    //       a = 1
    //       this.checkCameraList.splice(i, 1)
    //       break
    //     }
    //   }
    //   if (a === 0) { //如果原来没有，则添加进去，并改变颜色
    //     res.active = true
    //     var r = { id: res.id, name: res.name }
    //     this.checkCameraList.push(r)
    //   } else {
    //     res.active = false
    //   }
    // },
    //根据层级id查询所有的摄像头
    showResourceByMapId() {
      this.$http({
        url: this.$http.adornUrl('/liResource/getStationMapCameraList'),
        method: 'post',
        data: {
          stationId: this.dataForm.stationId,
          //- subCode: this.dataForm.subCode,
          tierId: this.dataForm.tierId,
          myId: this.dataForm.id
        }
      }).then((data) => {
        if (data && data.code === 0) {
          this.list = data.resourceList
          this.changeVectorLayer(this.list)
          let oldCheckCameraList = this.oldCheckCameraList
          if (oldCheckCameraList.length) {
            oldCheckCameraList.forEach((el) => {
              this.list.forEach((k) => {
                if (el.id == k.id) {
                  let style2 = this.getPointStyle(
                    k.imageSrc + '2.png',
                    k.name,
                    0.3
                  )
                  this.vectorLayer
                    .getSource()
                    .getFeatureById(k.id)
                    .setStyle(style2)
                }
              })
            })
          }
        }
      })
    },
    getCameraByResourceId() {
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl('/liResourceCamera/getByResourceId'),
          method: 'get',
          params: {
            resourceId: this.dataForm.id
          }
        }).then((data) => {
          if (data && data.code === 0) {
            this.checkCameraList = data.list.map((e) => {
              return { id: e.cameraId, name: e.cameraName }
            })
            if (
              this.checkCameraList != null &&
              this.checkCameraList.length > 0
            ) {
              var cameraIds = []
              var cameraNames = []
              for (var i = 0; i < this.checkCameraList.length; i++) {
                cameraIds.push(this.checkCameraList[i].id)
                cameraNames.push(this.checkCameraList[i].name)
              }
              this.dataForm.cameraIds = cameraIds.join(',')
              Vue.set(this.dataForm, 'cameraNames', cameraNames.join(',') || '')
            }
          }
        })
      }
    },
    // 表单提交
    dataFormSubmit(id) {
      // if (this.dataForm.type !== 'b6af764f2a6e454490a6b1b3c9057e57' && this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3') {
      //     if (this.dataForm.cameraIds === null || this.dataForm.cameraIds === undefined || this.dataForm.cameraIds === '') {
      //         this.$message.error('关联摄像头不能为空')
      //         return
      //     }
      // }
      if (
        this.dataForm.type !== 'b6af764f2a6e454490a6b1b3c9057e57' ||
        this.dataForm.subCode !== '04'
      ) {
        this.dataForm.parentName = null
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/liResource/${!this.dataForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: this.dataForm
          }).then((data) => {
            console.log(data)
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.checkCameraList = []
                  this.$emit('refreshdatalist', data.bean)
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    //关闭前
    handleClose() {
      this.visible = false
      this.$refs.dataForm.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-qiangji5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-qiuji5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-quanjing5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-fangqu5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-hongwai5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-yeti5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-zhaoming5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-ruqin5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-anjian5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-zhayao5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-anjianmen5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-baojing5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-menjin5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-icon-shuangjian5 {
  width: 31px;
  height: 34px;
  background-size: 182%;
}

.el-table__header {
  width: 100% !important;
}

.el-table__body {
  width: 100% !important;
}

.info-title {
  line-height: 50px;
  font-size: 18px;
  height: 50px;
  padding: 0 20px;
  background-color: #dfeaf7;
  border-bottom: 1px solid #cccccc;
}

.info-form {
  padding: 10px;
}

.info-block {
  border: 1px solid #cccccc;
}

.el-select {
  width: 100%;
}

.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;

  .span-box {
    height: 30px;
    width: 30px;
    background-color: #0097ff;
    font-size: 12px;
    border-radius: 5px;
    /* border: 1px solid red; */
    position: absolute;
    // left: 0;
    // top: 0;
    .span-img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }

  .isActive {
    background-color: #fd949d;
    width: 40px;
    height: 40px;

    .el-icon-qiangji5 {
      width: 40px;
      height: 46px;
      background-size: 182%;
    }

    .el-icon-qiuji5 {
      width: 40px;
      height: 46px;
      background-size: 182%;
    }
  }
}

.mod-menu {
  .icon-list__input {
    > .el-input__inner {
      cursor: pointer;
    }
  }

  &__icon-popover {
    max-width: 370px;
  }

  &__icon-list {
    max-height: 180px;
    padding: 0;
    margin: -8px 0 0 -8px;

    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;

      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }

  .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
}
.videoMap {
  /deep/ .el-dialog__body {
    padding: 0;
  }
}
</style>
