<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='lineId' )
                            el-input(v-model='dataForm.lineName'  readonly)
                        el-form-item(label='站点:' prop='stationId' )
                            el-input(v-model='dataForm.stationName'  readonly)
                        el-form-item(label='子系统:' prop='subSystem' )
                            el-input(v-model='dataForm.subSystem'  readonly)
                        el-form-item(label='资源点编码:' prop='code')
                            el-input(v-model='dataForm.code'  readonly)
                        el-form-item(label='子系统编码:' prop='subCode')
                            el-input(v-model='dataForm.subCode'  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-form-item(label='输送带端口号:' prop='ajjPort' v-if="dataForm.dicTypeName === '安检机'")
                            el-input(v-model='dataForm.ajjPort' placeholder='请填写输送带端口号')

                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,
        lineId: '',
        lineName: '',
        stationId: localStorage.getItem('stationId'),
        stationName: '',
        tierId: '',
        cameraNames: '',
        subSystem: '',
        code: '',
        subCode: '',
        addressCode: '',
        port: '',
        ajjPort: '',
        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.lineId = data.bean.lineId
          this.dataForm.lineName = data.bean.lineName
          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.ajjPort = data.bean.ajjPort
          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.subCode = data.bean.subCode
          this.dataForm.subSystem = data.bean.subSystem
          this.dataForm.sysSign = data.bean.sysSign
          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.initStationList(this.dataForm.lineId)
          this.initLineList()
          this.initSubSystemDicList()
          this.initResourceTypeDicList()
          this.getCameraByResourceId()
          this.initBrandDicList()
          this.initStationMapList()
          this.initParentNode()
      })
    },
    initParentNode () {
      this.$http({
        url: this.$http.adornUrl('/liResource/getResourceList'),
        method: 'post',
        data: {
          stationId: this.dataForm.stationId
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.parentList = data.list
        }
      })
    },
    initLineList () {
      this.$http({
        url: this.$http.adornUrl('/liLine/listAll'),
        method: 'post',
        data: {}
      }).then(data => {
        if (data && data.code === 0) {
          this.lineList = data.page.rows
          if (this.dataForm.lineId) {
            this.initStationList(this.dataForm.lineId)
          }
        }
      })
    },
    initStationList (lineId) {
      this.$http({
        url: this.$http.adornUrl('/liStation/listAll'),
        method: 'post',
        data: {
          lineId: lineId
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.stationList = data.page.rows
        }
      })
    },
    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()
      })
    },
    initSubSystemDicList () {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then(data => {
        if (data && data.code === 0) {
          this.systemList = data.list
          if (!this.dataForm.subCode) {
            this.dataForm.subCode = this.systemList[0].value
            this.dataForm.subSystem = this.systemList[0].name
          }
        }
      })
    },
    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, '==========')
          }
        }
      })
    },
    lineChange (lineId) {
      this.initStationList(lineId)
      this.stationList.forEach(a => {
        if (a.id === lineId) {
          this.dataForm.lineName = a.name
        }
      })
    },
    stationChange (stationId) {
      this.stationList.forEach(a => {
        if (a.id === stationId) {
          this.dataForm.stationName = a.stationName
        }
      })
    },
    subSystemChange (e) {
      this.systemList.forEach(a => {
        if (a.value === e) {
          // Vue.set(this.dataForm, 'subCode', a.value)
          // Vue.set(this.dataForm, 'subSystem', a.name)
          this.dataForm.subCode = a.value
          this.dataForm.subSystem = a.name
        }
      })
    },
    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>
