<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' placeholder='请填写资源点名称')
                        el-form-item(label='资源点类型:' prop='type' )
                            el-select( v-model="dataForm.type" placeholder="请选择资源点类型" disabled)
                                el-option(v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id")
                        el-form-item(label='线路:' prop='lineId' )
                            el-select(v-model="dataForm.lineId" placeholder="请选择线路" @change="lineChange" disabled )
                                el-option(v-for="(item,index) in lineList" :key="index" :label="item.name" :value="item.id")
                        el-form-item(label='站点:' prop='stationId' )
                            el-select(v-model="dataForm.stationId" placeholder="请选择站点" @change="stationChange" disabled )
                                el-option(v-for="(item,index) in stationList" :key="index" :label="item.stationName" :value="item.id")
                                //- el-option(v-for="(item,index) in stationList" :key="index" :label="item.code+'-'+item.stationName" :value="item.id")
                        el-form-item(label='子系统:' prop='subSystem' )
                            el-select(v-model="dataForm.subSystem" placeholder="请选择子系统" @change="subSystemChange")
                                el-option(v-for="(item,index) in systemList" :key="index" :label="item.name" :value="item.value" :code="item.value" :disabled="item.disabled")
                        el-form-item(label='资源点编码:' prop='code')
                            el-input(v-model='dataForm.code' placeholder='保存后系统自动生成' readonly)
                        el-form-item(label='子系统编码:' prop='subCode')
                            el-input(v-model='dataForm.subCode' placeholder='请填写子系统编码' readonly)
                        el-form-item(label='地址码:' prop='addressCode')
                            el-input(v-model='dataForm.addressCode' placeholder='请填写地址码')
                        el-form-item(label='端口号:' prop='port')
                            el-input(v-model='dataForm.port' placeholder='请填写端口号')
                        el-form-item(label='用户名:' prop='username')
                            el-input(v-model='dataForm.username' placeholder='请填写用户名')
                        el-form-item(label='密码:' prop='password')
                            el-input(v-model='dataForm.password' placeholder='请填写密码')
                        el-form-item(label='父节点名称:' prop='parentName' v-if="dataForm.dicTypeName ==='枪机' && dataForm.subCode ==='04'")
                            el-select(v-model="dataForm.parentName" placeholder="请选择父节点")
                                el-option(v-for="(item,index) in parentList" :key="index" :label="item.name" :value="item.id" :code="item.id")
                            //- el-input(v-model='dataForm.parentName' placeholder='请填写父节点名称')
                        el-form-item(label='设备品牌:' prop='brand')
                            el-select(v-model="dataForm.brand" placeholder="请选择设备品牌" )
                                el-option(v-for="(item,index) in brandList" :key="index" :label="item.name" :value="item.id" :code="item.id")
                        el-form-item(label='关联摄像头:' prop='cameraNames')
                            el-input(v-model='dataForm.cameraNames' placeholder='请选择关联摄像头' @click.native="checktable")
                        el-form-item(label='通道:' prop='byx1' v-if="dataForm.dicTypeName === '枪机' || dataForm.dicTypeName === '球机' || dataForm.dicTypeName === '安检机'")
                            el-input(v-model='dataForm.byx1' placeholder='请填写通道')
                        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' placeholder='请填写X坐标' readonly)
                            el-form-item(:label='(dataForm.dicTypeName === "振动光纤" || dataForm.dicTypeName === "红外探测器") ? "Y坐标(起点):":"Y坐标:"' prop='ylat')
                                el-input(v-model='dataForm.ylat' placeholder='请填写Y坐标' readonly)
                            el-form-item(label='X坐标(终点):' prop='xpoint' v-if="dataForm.dicTypeName === '振动光纤' || dataForm.dicTypeName === '红外探测器' ")
                                el-input(v-model='dataForm.xpoint' placeholder='请填写X坐标' readonly)
                            el-form-item(label='Y坐标(终点):' prop='ypoint' v-if="dataForm.dicTypeName === '振动光纤' || dataForm.dicTypeName === '红外探测器' ")
                                el-input(v-model='dataForm.ypoint' placeholder='请填写Y坐标' readonly)
                            el-form-item(label='地图层级:' prop='tierId')
                                el-select(v-model="dataForm.tierId" placeholder="请选择子系统" @change="tierChange" disabled)
                                    el-option(v-for="(item,index) in tierList" :key="index" :label="item.name" :value="item.id" :code="item.id")
                            el-form-item(label='部署位置:' prop='deployLocation')
                                el-input(v-model='dataForm.deployLocation' placeholder='请填写部署位置')
                    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' placeholder='请填写当前操作员' disabled)
                            el-form-item(label='附属信息:' prop='attachedInfo')
                                el-input.mywidth(type="textarea" :rows=5 resize="none" v-model="dataForm.attachedInfo"  placeholder='请填写附属信息')
                            el-form-item(label='备注:' prop='remark')
                                el-input.mywidth(type="textarea" :rows=5 resize="none" v-model="dataForm.remark"  placeholder='请填写备注')
        el-dialog(top="2vh" v-if="addVisible" :visible.sync="addVisible" width="1586px" :append-to-body='true' :before-close="dialogClose"  class="map-dialog" :modal-append-to-body='true')
            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') 取 消
                el-button(@click="submitCamera" size='medium' type="primary" v-prevent-re-click) 确 定

        span.dialog-footer(slot='footer')
            el-button(@click='cancel' type='primary' size='medium') 取消
            el-button(type='primary' size='medium' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'
// openlayer
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Projection } from 'ol/proj'
import { getCenter } from 'ol/extent'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import Zoom from 'ol/control/Zoom'

// 图上图标相关
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'
let that
export default {
  computed: {
    ...mapState('d2admin/user', ['info'])
  },
  props: ['pList'],
  data () {
    // var validatorCamer = (rule, value, callback) => {
    //   if (this.dataForm.type !== 'b6af764f2a6e454490a6b1b3c9057e57' && this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3') {
    //     if (this.dataForm.cameraIds === null || this.dataForm.cameraIds === undefined || this.dataForm.cameraIds === '') {
    //       callback(new Error('关联摄像头不能为空'))
    //     } else {
    //       callback()
    //     }
    //   } else {
    //     callback()
    //   }
    // }
    return {
      mapDialog: null,
      imgLayer: null,
      vectorLayer: null,
      projection: null,
      urlPath: window.CONFIG.urlPath,
      extent: [-1100, 110, 1460, 820],
      clickFlag: false,
      cFlag: false,
      visible: false,
      addVisible: false,
      icon: {},
      list: [],
      sysOrgList: [],
      dataListSelections: [],
      lineList: [],
      stationList: [],
      typeList: [],
      systemList: [],
      parentList: [],
      tierList: [],
      tierMap: {},
      tier: {},
      oldCheckCameraList: [],
      checkCameraList: [],
      checkCameraNameList: [],
      brandList: [],
      dataForm: {
        id: 0,
        name: '',
        type: 1,
        lineId: '',
        lineName: '',
        stationId: localStorage.getItem('stationId'),
        stationName: '',
        tierId: '',
        cameraNames: '',
        subSystem: '',
        code: '',
        subCode: '',
        addressCode: '',
        port: '',
        username: '',
        password: '',
        remark: '',
        status: 1
      },
      dataRule: {
        name: [
          { required: true, message: '资源点名称不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', 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' }],
        addressCode: [{ min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }],
        port: [{ message: '请输入端口号', trigger: 'change' },
          { validator(rule, value, callback) {
            if (value) {
              if (Number.isInteger(Number(value)) && Number(value) < 65536 && Number(value) > 0) {
                callback()
              } else {
                callback(new Error('请输入1到65535之间的正整数'))
              }
            } else {
              callback()
            }
          },
          trigger: 'blur' }
        ],
        ajjPort: [
          { validator(rule, value, callback) {
            if (value) {
              if (Number.isInteger(Number(value)) && Number(value) < 65536 && Number(value) > 0) {
                callback()
              } else {
                callback(new Error('请输入1到65535之间的正整数'))
              }
            } else {
              callback()
            }
          },
          trigger: 'blur' }
        ],
        username: [{ min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }],
        password: [{ min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }],
        xlongit: [{ required: true, message: 'X1坐标不能为空', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        ylat: [{ required: true, message: 'Y1坐标不能为空', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        xpoint: [{ required: true, message: 'X1坐标不能为空', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        ypoint: [{ required: true, message: 'Y1坐标不能为空', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', 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' }],
        byx1: [
          { validator(rule, value, callback) {
            if (value) {
              if (Number.isInteger(Number(value)) && Number(value) < 99 && Number(value) > 0) {
                callback()
              } else {
                callback(new Error('请输入1到99之间的正整数'))
              }
            } else {
              callback()
            }
          },
          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]
             })
         })
        //点击事件
        this.mapDialog.on('click', function (evt) {
            let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function (feature) {
                return feature
            })
            if (feature) {
                for (let i in that.list) {
                    if (feature.getId() === that.list[i].id) {
                        that.list[i].active = !that.list[i].active
                        let style = null
                        if (that.list[i].active) {
                            style = that.getPointStyle(that.list[i].imageSrc + '2.png', that.list[i].name, 0.3)
                        } else {
                            style = that.getPointStyle(that.list[i].imageSrc + '.png', that.list[i].name)
                        }
                        feature.setStyle(style)
                    }
                }
            }
        })
    },
    init (bean) {
      //console.log('bean:', bean)
      this.dataForm = {}
      this.visible = true
      this.clickFlag = false
      if (bean) {
        this.dataForm = JSON.parse(JSON.stringify(bean))
        if (this.dataForm.id) {
          //this.getCameraByResourceId()
        }
      }
    //   else {
    //     this.dataForm.id = id
    //     if (this.dataForm.id) {
    //       this.initResource(x, y, endx, endy)
    //     }
    //   }
      this.dataForm.operatorName = this.info.name
      this.initLineList()
      this.initSubSystemDicList()
      this.initResourceTypeDicList()
      this.initBrandDicList()
      this.initStationMapList()
      this.initParentNode()
    },
    initResource (x, y, endx, endy) {
      this.$http({
        url: this.$http.adornUrl(`/liResource/getId`),
        method: 'get',
        params: { id: this.dataForm.id }
      }).then(data => {
        if (data && data.code === 0) {
          this.dataForm = data.bean
          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(',')
          }

          // this.dataForm.lineId = '0ff691b45da01acb6b5e4b6d8b90cfe5'
          // this.dataForm.lineName = '成都地铁1号线'
          // this.dataForm.stationId = '40bf04d6f2e2ec3bfbb43aa51a7facc8'
          // this.dataForm.stationName = '升仙湖站'
          // this.dataForm.tierId = 'b70eb21104124e559cb078f3a8c7174e'
          // this.dataForm.tierName = '出入口'
          this.dataForm.xpoint = x
          this.dataForm.ypoint = y
          this.initStationList(this.dataForm.lineId)
        }
      })
    },
    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)
          //this.changeImageLayer(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
          //disabled用于禁用选项,初始值都不禁用
          this.systemList.forEach(dic => {
            dic.disabled = false
          })
          // 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.dataForm.dicTypeName = e.name
            }
          })
        }
      }).then(() => {
        // 视频监控：枪机和球机
        // 出入口控制：门禁
        // 入侵报警：照明灯、入侵报警灯、双鉴探测器、振动光纤
        // 安全检查：枪机、球机、安检机、安检门、液体探测器、炸探、一键报警
          //根据资源点类型禁用子系统选项
          this.systemList.forEach(dic => {
            if (['枪机', '球机'].indexOf(this.dataForm.dicTypeName) > -1) {
              if (dic.value === '01' || dic.value === '04') {
                dic.disabled = false
              } else {
                dic.disabled = true
              }
            } else if (this.dataForm.dicTypeName === '门禁') {
              if (dic.value === '02') {
                dic.disabled = false
              } else {
                dic.disabled = true
              }
            } else if (['照明灯', '入侵报警灯', '双鉴探测器', '振动光纤'].indexOf(this.dataForm.dicTypeName) > -1) {
              if (dic.value === '03') {
                dic.disabled = false
              } else {
                dic.disabled = true
              }
            } else if (['安检机', '安检门', '液体探测器', '炸探', '一键报警'].indexOf(this.dataForm.dicTypeName) > -1) {
              if (dic.value === '04') {
                dic.disabled = false
              } else {
                dic.disabled = true
              }
            }
          })
          //给资源点设置初始的子系统编码
          if (!this.dataForm.subCode) {
            if (['枪机', '球机'].indexOf(this.dataForm.dicTypeName) > -1) {
              this.dataForm.subCode = '01'
              this.dataForm.subSystem = '视频监控'
            } else if (this.dataForm.dicTypeName === '门禁') {
              this.dataForm.subCode = '02'
              this.dataForm.subSystem = '出入口控制'
            } else if (['照明灯', '入侵报警灯', '双鉴探测器', '振动光纤'].indexOf(this.dataForm.dicTypeName) > -1) {
              this.dataForm.subCode = '03'
              this.dataForm.subSystem = '入侵报警'
            } else if (['安检机', '安检门', '液体探测器', '炸探', '一键报警'].indexOf(this.dataForm.dicTypeName) > -1) {
              this.dataForm.subCode = '04'
              this.dataForm.subSystem = '安全检查'
            } else {
              this.dataForm.subCode = '01'
              this.dataForm.subSystem = '视频监控'
            }
          }
      })
    },
    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 === 'df5999e2d8784e41111110619b0e3bf' &&
          //       this.dataForm.type === '0a18ad66953647d792e4a28a40050e92') { //安朗杰  门禁 出入口控制
          //       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
          this.tier = a
        }
      })
    },
    // 图标选中
    iconChange (icon) {
      // this.icon = icon
      // this.dataForm.icon = icon.path
    },
    checktable () {
      this.addVisible = true
      this.cFlag = false
      this.initStMapList()
      this.oldCheckCameraList = JSON.parse(JSON.stringify(this.checkCameraList))
    },
    submitCamera () {
      this.addVisible = false
      this.cFlag = true
      this.dataForm.cameraIds = null
      this.dataForm.cameraNames = null
      let cameraIds = []
      let cameraNames = []
      for (let i in this.list) {
          if (this.list[i].active) {
              cameraIds.push(this.list[i].id)
              cameraNames.push(this.list[i].name)
          }
      }
      //关联摄像头只要点击确定按钮,就当作发生改变的数据
      this.dataForm.cameraChange = 'true'
      this.dataForm.cameraIds = cameraIds.join(',')
      this.dataForm.cameraNames = cameraNames.join(',')
    },
    dialogClose () {
        this.addVisible = false
        this.checkCameraList = JSON.parse(JSON.stringify(this.oldCheckCameraList))
    },
    closeC () {
      this.$confirm('确认取消?', '选择摄像头', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.addVisible = false
          this.checkCameraList = JSON.parse(JSON.stringify(this.oldCheckCameraList))
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    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
        }
      }).then(() => {
          let arr = []
          if (this.dataForm.cameraIds) arr = this.dataForm.cameraIds.split(',')
          for (let i in this.list) {
              this.list[i].active = false
              for (let j in arr) {
                  if (arr[j] === this.list[i].id) {
                      this.list[i].active = true
                  }
              }
          }
        this.changeVectorLayer(this.list)
      })
    },
    getCameraByResourceId () {
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl('/liResourceCamera/getByResourceId'),
          method: 'get',
          params: {
            resourceId: this.dataForm.id,
            stationId: this.dataForm.stationId
          }
        }).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) {
              let cameraIds = []
              let cameraNames = []
              for (let 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(',') || '')
            }
          }
        })
      }
    },
    addTips(tips, base, resource) {
        switch (base.type) {
            //枪机 球机 安检机
            case 'b6af764f2a6e454490a6b1b3c9057e57':
            case 'ece0b8b2db27411886254e81134988a3':
            case '303310efddb34a2e9bf269bdff8a7dc5':
                if (!base.addressCode || !base.port || !base.byx1 || base.deleted === 1) {
                    break
                }
                if (base.addressCode === resource.addressCode && base.port === resource.port && base.byx1 === resource.byx1) {
                    //添加到重复提示
                    let tip = '地址码:' + base.addressCode + ' 端口:' + base.port + ' 通道号:' + base.byx1
                    if (tips && !tips.includes(tip)) {
                      tips.push(tip)
                    }
                }
                break
            default:
                if (!base.addressCode || !base.port || base.deleted === 1) {
                    break
                }
                if (base.addressCode === resource.addressCode && base.port === resource.port) {
                    //添加到重复提示
                    let tip = '地址码:' + base.addressCode + ' 端口:' + base.port
                    if (tips && !tips.includes(tip)) {
                      tips.push(tip)
                    }
                }
        }
    },
    // 表单提交
    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) {
                //校验数据重复
                //后台返回的本地是否重复
                let list = this.pList
                let size = list.length
                let tips = []
                if (this.dataForm.parentName) {
                    let n = 0
                    for (let h = 0; h < size; h++) {
                      if (list[h].id === this.dataForm.id) {
                        continue
                      }
                      if (list[h].parentName && list[h].parentName === this.dataForm.parentName) {
                        n++
                      }
                    }

                    if (n >= 2) {
                      this.$message({
                        message: '已有两个子级摄像头选择该父节点，请重新选择！',
                        type: 'warning'
                      })
                      return
                    }
                }

                //添加或修改的数据跟本地比较是否重复
                for (let h = 0; h < size; h++) {
                  const resource = list[h]
                  if (resource.id === this.dataForm.id) {
                    continue
                  }
                  this.addTips(tips, resource, this.dataForm)
                }
                //添加或修改的数据跟数据库是否重复
                this.$http({
                    url: this.$http.adornUrl('/liResource/list'),
                    method: 'post',
                    data: {
                        stationId: localStorage.getItem('stationId')
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                      let list = data.page.rows
                      for (let index = 0; index < list.length; index++) {
                        const resource = list[index]
                        if (resource.id === this.dataForm.id) {
                          continue
                        }
                        this.addTips(tips, resource, this.dataForm)
                      }
                    }
                  })
                // console.log('tips', tips)
                if (tips.length > 0) {
                  let message = ''
                  tips.map(item => {
                    message += (item + '<br>')
                  })
                  // console.log(message)
                  this.$emit('addNotify', message)
                  return
                }
                setTimeout(() => {
                    this.$emit('refreshBean', this.dataForm)
                    this.$emit('refreshdatalist', this.dataForm)
                }, 100)
                this.visible = false
            }
        })
      // this.$refs['dataForm'].validate(valid => {
      //   if (valid) {
      //     this.clickFlag = true
      //     this.dataForm.stationId = localStorage.getItem('stationId')
      //     this.$http({
      //       url: this.$http.adornUrl(
      //         `/liResource/${!this.dataForm.id ? 'save' : 'update'}`
      //       ),
      //       method: 'post',
      //       data: this.dataForm
      //     }).then(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.clickFlag = false
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }
      // })
    },
    //关闭前
    handleClose () {
      this.visible = false
      //this.$emit('refreshBean', this.dataForm)
      this.$refs.dataForm.resetFields()
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', '修改资源点', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.handleClose()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    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) 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 = null
                  if (list[i].active) {
                      style = this.getPointStyle(list[i].imageSrc + '2.png', this.list[i].name, 0.3)
                  } else {
                      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
      }
  }
}
</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;
  }
}
.map-dialog {
   /deep/ .el-dialog__body {
        padding: 0;
    }
}
</style>
