<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='stationName' )
                            el-input(v-model='dataForm.stationName' placeholder='' readonly)
                        el-form-item(label='资源点编码:' prop='code')
                            el-input(v-model='dataForm.code' 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='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-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: [],
      stationList: [],
      typeList: [],
      systemList: [],
      parentList: [],
      tierList: [],
      tierMap: {},
      tier: {},
      oldCheckCameraList: [],
      checkCameraList: [],
      checkCameraNameList: [],
      brandList: [],
      dataForm: {
        id: 0,
        name: '',
        type: 1,
        stationId: localStorage.getItem('stationId'),
        stationName: '',
        tierId: '',
        cameraNames: '',
        code: '',
        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' }
        ],
        // 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'
          }
        ],
        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.initResourceTypeDicList()
      this.initBrandDicList()
      this.initStationMapList()
    },
    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.xpoint = x
          this.dataForm.ypoint = y
          this.initStationList(this.dataForm.lineId)
        }
      })
    },
    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()
        })
    },
    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
            }
          })
        }
      })
    },
    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
        }
      })
    },
    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>
