<template lang="pug">
  <div class="patrol_line">
    <el-container style='padding-left:0px;'>
      <el-aside width='333px' style='height:758px'>
          <el-card>
            <div class="patrol_line_left_top">
              <div class="patrol_line_left_topL">
                <div :class="[activeName==1?'on':'']" @click="handleClick(1)">线路列表</div>
              </div>
              <div class="patrol_line_left_topR">
                <el-button v-if="isAuth('patrol:line:save')" type="primary" size='mini' icon='el-icon-plus' @click="addLine" style="margin-right:10px;">新增</el-button>
              </div>
            </div>
            <div class="left_list">
              <div :class="{ 'left_list_row_on': item.on, 'left_list_row': true }" v-for="(item, index) in leftListData" @click="leftListRowClick(item,index)">
                //- <div class="left_list_row_name">{{item.name}}</div>
                el-tooltip(v-if="item.name.replace(/[\u0391-\uFFE5]/g,'aa').length>20" :content="item.name" effect="light" placement="top")
                  div.left_list_row_name {{item.name | ellipsis}}
                div.left_list_row_name(v-else) {{item.name | ellipsis}}
                <div class="left_list_row_size" v-if="item.count === 0">
                  <el-button v-if="isAuth('patrol:line:update')" type="text" @click="editClick(item)" icon="el-icon-edit" size="small"></el-button>
                  <el-button v-if="isAuth('patrol:line:delete')" type="text" @click="deleteClick(item)" icon="el-icon-delete" size="small"></el-button>
                </div>
              </div>
            </div>
          </el-card>
      </el-aside>

      <el-main style="padding:0px;" onselectstart="return false;">
        <el-card>
          <div class="patrol_line_right_button">
            <el-row style="padding-bottom:15px;" :span="24">
                <el-col :md='18' :sm="5" class='tier-btn'>
                    <el-button type="primary" size="small" plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin-left:10px;" v-for="item in mapList" :key='item.id' @click="changeMap(item)">{{item.name}}</el-button>
                </el-col>
                <el-col :md='6' :sm="5">
                    <div style="float:right; margin-right:10px;">
                      <el-button type="primary" v-if="!edirStatus && isAuth('patrol:line:update')" @click="updateClick" size="small" :disabled="planCount>0?true:false" style="float:left;margin:10px 0 0 10px;">编辑</el-button>
                      <el-button type="primary" v-if="edirStatus && isAuth('patrol:line:update')" @click="saveClick" size="small" style="float:left;margin:10px 0 0 10px;" >保存</el-button>
                      <el-button type="primary" v-if="edirStatus" @click="cancelClick" size="small" style="float:left;margin:10px 0 0 10px;" >取消</el-button>
                    </div>
                </el-col>
            </el-row>
          </div>
          <el-row style="padding-bottom:15px;height:708px;background:#fff;" :span="24" v-loading="loading">
              <el-col class="resource-container" :style="obj" ref="drag">
                <div id="map" style="width: 100%;height: 680px;position: relative;"></div>
              </el-col>
          </el-row>
        </el-card>
      </el-main>
      <query-detail ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
    </el-container>
  </div>

</template>

<script>
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'
// 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 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 {
  name: 'sys-user',
  filters: {
    ellipsis1(value, len) {
      if (!value) return ''
      if (value.length > len) {
        return value.slice(0, len) + '...'
      }
      return value
    },
    ellipsis(value) {
      // console.log(value)
      if (!value) return ''
      let len = value.length
      let realLength = 0
      for (var i = 0; i < len; i++) {
        let charCode = value.charCodeAt(i)
        if (charCode >= 0 && charCode <= 128) {
          realLength += 1
        } else {
          realLength += 2
        }
        if (realLength > 20) {
          return value.slice(0, i) + '...'
        }
      }
      return value
    }
  },
  data() {
    return {
      systemList: [],
      imgLayerList: [],
      controlList: [],
      lineArr: [
        // [-639.46, 441.91],
        // [-264.16, 223.53],
        // [314.96, 218.68]
      ], //线坐标集合
      idArr: [
        // '559a476a81b941f78ef6dca88e48f2bb',
        // 'cfc9e32598124401b09bbdea4ab59ea3',
        // '4afc3bd2307b4ef18336556a8ea1bd0d'
      ],
      lineFeature: null,
      iconClass: 'el-icon-xungengdian',
      loading: false,
      planCount: 0,
      edirStatus: false,
      leftListData: [],
      urlPath: window.CONFIG.urlPath,
      leftListOnData: null,
      leftListIndex: '' || 0,
      transformationSta: 1,
      isCollapse: true,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      queryDetailVisible: false,
      treeData: [],
      spotData: [],
      spotDataList: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        level1: 'level'
      },
      nodeKey: 'id',
      station: {}, //当前选择的站点
      mapList: [], //当前站点的所有层
      stationMap: {}, //当前选择的层
      resource: {}, //当前选择的资源点
      checkedData: {
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId'),
        subCode: '02'
      },
      currentNode: {},
      dragAble: false,
      list: [],
      obj: 'pointer-events:initial',
      editable: false,
      activeName: '1',
      searchInput: '',
      leftItem: null//左侧选择的线路
    }
  },
  components: {
    QueryDetail
  },
  created() {
    that = this
    this.initTreeStationMap()
  },
  methods: {
    // 初始化地图
    initMap(url) {
      let mapList = this.mapList
      this.imgurl = url
      // 计算静态地图映射到地图上的范围
      let extent = [-1100, 110, 1460, 820]

      let projection = new Projection({
        // 投影
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      })
      if (mapList.length > 0) {
        for (var i = 0; i < mapList.length; i++) {
          let layerItem = new ImageLayer({
            id: mapList[i].id,
            source: new ImageStatic({
              url: mapList[i].readPath, //这里添加静态图片的地址
              projection: projection,
              imageExtent: extent
            }),
            visible: false
          })
          this.imgLayerList.push(layerItem)

          let controlItem = new overviewmap({
            className: 'ol-overviewmap myOverview', //鹰眼控件样式
            // 在鹰眼中加载相同坐标系下不同数据源的图层
            layers: [
              new ImageLayer({
                source: new ImageStatic({
                  url: mapList[i].readPath, //这里添加静态图片的地址
                  projection: projection,
                  imageExtent: extent
                })
              })
            ],
            // layers:this.controlList,
            collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
            label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
            collapsed: false //初始为展开方式
          })
          this.controlList.push(controlItem)
        }
      }
      let zoomControl = new Zoom({
        delta: 0.2,
        zoomInTipLabel: '',
        zoomOutTipLabel: ''
      })
      // 大图
      this.map = new Map({
        target: 'map',
        layers: this.imgLayerList,
        controls: [zoomControl],
        view: new View({
          projection: projection,
          center: getCenter([0, 0, 0, 0]), // 获取范围的中心坐标。
          zoom: 2.5,
          maxZoom: 5.0,
          minZoom: 1.5,
          extent: [-1100, -100, 2000, 1000] //[minX, minY, maxX, maxY] 控制拖动
        })
      })
      // 删除默认的双击事件
      const dblClickInteraction = this.map
        .getInteractions()
        .getArray()
        .find((interaction) => {
          return interaction instanceof DoubleClickZoom
        })
      this.map.removeInteraction(dblClickInteraction)
      this.changeVectorLayer(this.list) //

      //将鹰眼控件加载到map中
      this.map.addControl(this.controlList[0])

      //点击事件
      this.map.on('click', function (evt) {
        let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function (
          feature
        ) {
          return feature
        })
        let coordinate = evt.coordinate //鼠标单击点的坐标
        if (feature && that.edirStatus) {
          console.log('feature:', feature)
          let idIndex = that.idArr.indexOf(feature.id_)
          if (idIndex < 0) {
            that.idArr.push(feature.id_) //id集合
            // console.log(feature.geometryChangeKey_.target.flatCoordinates);

            let aArr = feature.geometryChangeKey_.target.flatCoordinates //坐标
            let xyArr = [Number(aArr[0]), Number(aArr[1])]
            that.lineArr.push(xyArr)
            if (that.lineArr.length > 1) {
              that.drawLine(that.lineArr)
            }
          } else {
             that.lineArr.splice(idIndex, 1)
             that.idArr.splice(idIndex, 1)
              if (that.lineArr.length > 0) {
                that.drawLine(that.lineArr)
              } else {
                that.drawLine([])
                that.lineArr = []
              }
          }

          // console.log(that.list,'****集合');
          for (let i in that.list) {
            //true弹出详情页面
            that.mapClick(feature, that.list[i], true)
          }
        }

        // if (that.iconStyle === null || !that.editable) {

        // } else {
        //   let bean = that.addPoint(coordinate)
        //   that.list.push(bean)
        //   that.iconStyle = null
        // }
      })
    },
    getPointStyle(src, name, zoom) {
      let style = new OlStyleStyle({
        image: new OlStyleIcon({
          anchor: [0.5, 0.5],
          scale: zoom || 0.8,
          //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
    },
    changeVectorLayer(list) {
      if (list) {
        this.list = list
      } else {
        return
      }
      if (this.map) {
        this.map.removeLayer(this.vectorLayer)
        this.map.removeLayer(this.lineVectorLayer)
        this.map.removeInteraction(this.modify)
      } else {
        return
      }

      this.lineVectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: []
        }),
        style: new OlStyleStyle({
          stroke: new Stroke({
            color: '#409EFF',
            width: 3
          })
        })
      })
      this.map.addLayer(this.lineVectorLayer)

      let featuresArr = []
      for (let i in list) {
        if (list[i].byx2) {
          featuresArr.push(
            this.getFeature(list[i].coordinateX, list[i].coordinateY)
          )
          let style = this.getPointStyle(
            list[i].byx2 + '.png',
            this.list[i].name
          )
          featuresArr[i].setStyle(style)
          featuresArr[i].setId(list[i].id)
        } else {
          continue
        }
      }

      this.vectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: featuresArr
        })
      })
      this.map.addLayer(this.vectorLayer)
      //将点和线的Feature对象 ，放在一个数组里面
      let modifyFeatures = this.lineVectorLayer
        .getSource()
        .getFeatures()
        .concat(this.vectorLayer.getSource().getFeatures())
      // this.modify = new Modify({
      //       source: this.vectorLayer.getSource()
      //   })
      this.modify = new Modify({
        source: new OlSourceVector({
          features: modifyFeatures
        })
      })
      this.modify.on('modifyend', (e) => {
        let pixel = this.map.getEventPixel(e.mapBrowserEvent.originalEvent)
        //获取当前拖拽的feature对象，该feature没有id，
        let feature = e.mapBrowserEvent.map.forEachFeatureAtPixel(
          pixel,
          function (feature) {
            return feature
          }
        )
        if (feature) {
          //feature与features数组对象比较Geometry对象的坐标是否相等可得出当前拖拽的feature的对象
          for (let i in that.list) {
            //根据id获取feature对象
            let feature_ = that.vectorLayer
              .getSource()
              .getFeatureById(that.list[i].id)
            //新增的feature对象没保存，是没有id通过，key获取feature对象
            let featureKey = that.vectorLayer
              .getSource()
              .getFeatureById(that.list[i].key)
            //红外探测器和振动光纤的第二点同过key+'end'获取feature对象
            let featureEnd = that.vectorLayer
              .getSource()
              .getFeatureById(that.list[i].key + 'end')
            if (feature_ || featureKey || featureEnd) {
              //获取坐标
              let coordinate
              if (feature_) coordinate = feature_.getGeometry().flatCoordinates
              if (featureKey) { coordinate = featureKey.getGeometry().flatCoordinates }
              if (
                coordinate.toString() ===
                feature.getGeometry().flatCoordinates.toString()
              ) {
                that.list[i].coordinateX = parseFloat(coordinate[0]).toFixed(2)
                that.list[i].coordinateY = parseFloat(coordinate[1]).toFixed(2)
                break
              }
              if (featureEnd) { coordinate = featureEnd.getGeometry().flatCoordinates }
              if (
                coordinate.toString() ===
                feature.getGeometry().flatCoordinates.toString()
              ) {
                that.list[i].xpoint = parseFloat(coordinate[0]).toFixed(2)
                that.list[i].ypoint = parseFloat(coordinate[1]).toFixed(2)
                break
              }
            }
          }
        }
      })

      if (this.editable) {
        //添加拖拽监听事件
        this.map.addInteraction(this.modify)
      }
    },
    getFeature(x, y) {
      return new OlFeature({
        type: 'icon',
        geometry: new OlGeomPoint([x, y])
      })
    },
    // 改变层级和鹰眼图
    changeImgControl(id) {
      let srcIndex = this.imgLayerList.findIndex((e) => {
        return e.values_.id == id
      })
      if (!this.controlList || this.controlList.length <=0) {
        return
      }
      this.map.removeControl(this.controlList[srcIndex])
      this.map.addControl(this.controlList[srcIndex])
      for (var k = 0; k < this.imgLayerList.length; k++) {
        if (this.imgLayerList[k].values_.id == id) {
          // that.imgurl=map.readPath
          this.imgLayerList[k].setVisible(true)
        } else {
          this.imgLayerList[k].setVisible(false)
        }
      }
    },
    mapClick(feature, item, flag) {
      //默认样式
      let style = this.getPointStyle(item.byx2 + '.png', item.name)
      //选中样式
      let style2 = this.getPointStyle(item.byx2 + '1.png', item.name, 0.3)
      //获取feature对象
      let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
      if (feature_) {
        if (feature_ === feature) {
          //修改选中样式

          if (this.edirStatus) {
            feature_.setStyle(style2)
            //console.log('当前选中', item)
          }
          // if(!this.editable) this.openAddOrUpdate(item)  //未编辑状态下 点击查看
          // if (flag) this.openAddOrUpdate(item)
        } else {
          //清除选中以外的样式
          feature_.setStyle(style)
        }
      }
      //  else {
      //     //获取新增的feature对象
      //     let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)

      //     if (newFeature) {
      //         if (newFeature === feature ) {
      //             newFeature.setStyle(style2)
      //         console.log(222);

      //             // if (flag) this.openAddOrUpdate(item) //查看
      //           //  if (flag)   this.$refs.queryDetail.init(item, false)

      //         } else {
      //             //清除选中以外的样式
      //             newFeature.setStyle(style)

      //         }
      //     }
      // }
    },
    handleClick(tab) {
      //左侧tab切换
    },
    addLine() {
      //console.log(this.checkedData.sId, '新增站点的id')
      this.$refs.queryDetail.init(this.checkedData.sId)
    },

    //初始化站点下的资源点
    initTreeStationMap() {
      this.spotDataList = []
      this.spotData = []
      this.mapList = []
      this.epPatrolPointList()
    },
    epPatrolLineList() {
      this.$http({
          url: this.$http.adornUrlEq('/epPatrolLine/list'),
          method: 'post',
          data: {
              stationId: this.checkedData.sId
          }
      }).then((data) => {
              if (data && data.code === 0) {
                  this.leftListData = data.nodes

                  if (!this.leftItem) {
                      this.leftListData[0].on = true
                      this.leftItem = this.leftListData[0]
                      this.lineArr = this.leftListData[0].coordinate || []
                      this.idArr = this.leftListData[0].optionIds || []
                      this.planCount = this.leftListData[0].count
                      this.leftListOnData = this.leftListData[0]
                  } else {
                      for (let i in this.leftListData) {
                          if (this.leftItem.id === this.leftListData[i].id) {
                              this.leftListData[i].on = true
                              this.leftItem = JSON.parse(JSON.stringify(this.leftListData[i]))
                              // console.log(this.leftItem)
                              this.lineArr = this.leftItem.coordinate || []
                              this.idArr = this.leftItem.optionIds || []
                              break
                          }
                      }
                  }
                  // console.log('leftItem:', this.leftItem)
                  // console.log('spotData:', this.spotData)
                  if (this.leftItem.layerId) {
                    this.checkedData.tierId = this.leftItem.layerId
                  } else {
                    this.checkedData.tierId = this.mapList[0].id
                  }
                  if (this.leftItem.children) {
                      this.list = this.leftItem.children
                  } else {
                    this.spotData.forEach((spotRes) => {
                      if (this.checkedData.tierId == spotRes.id) {
                        this.list = spotRes.children || []
                      }
                    })
                  }
                  // console.log('list:', this.list)
                  if (!this.checkedData.tierId) {
                    return
                  }
                  if (!this.mapList || this.mapList.length <=0 ) {
                    return
                  }
                  if (!this.map) {
                      this.initMap()
                  } else {
                      this.changeVectorLayer(this.list)
                  }
                  this.changeImgControl(this.checkedData.tierId)

                  if (this.lineArr.length > 0) this.drawLine(this.lineArr)
              }
      })
    },
    epPatrolPointList() {
      this.$http({
        url: this.$http.adornUrlEq('/epPatrolPoint/list'),
        method: 'post',
        data: {
          stationId: this.checkedData.sId
        }
      }).then((data) => {
        if (data && data.code === 0) {
          data.nodes.forEach(element => {
            element.readPath = this.urlPath + element.filePath
          })
          this.spotDataList = data.nodes
          this.spotData = JSON.parse(JSON.stringify(this.spotDataList))
          this.mapList = data.nodes
        }
      }).then(data => {
          this.epPatrolLineList()
      })
    },

    //切换层级
    changeMap(map) {
      if (this.leftItem.layerId && !this.edirStatus) {
        return
      }

      // console.log(map.id)
      //图层缩放级别设置为默认
      this.map.getView().setZoom(1)
      if (map.id) {
        this.changeImgControl(map.id)
        this.idArr = []
        this.lineArr = []
        this.checkedData.tierId = map.id
        this.checkedData.layerId = map.id
        this.checkedData.tierName = map.name
        this.stationMap = map
        this.leftListData.forEach((res) => {})

        if (this.leftItem.children && !this.edirStatus) {
          this.list = this.leftItem.children
        } else {
          this.spotData.forEach((spotRes) => {
            if (this.checkedData.tierId == spotRes.id) {
              this.list = spotRes.children || []
            }
          })
        }
        this.changeVectorLayer(this.list)
        if (map.id === this.leftItem.layerId) {
            this.idArr = this.leftItem.optionIds
            this.lineArr = this.leftItem.coordinate
            this.drawLine(this.lineArr)
        }
      }
    },
    //详情
    transformation(now) {
      //2D3D转换
      this.transformationSta = now
    },
    closeQueryDetailVisible() {
      this.initTreeStationMap()
    },
    treeDataEditClick(node) {
      this.$refs.queryDetail.init(node)
    },
    treeDataDeleteClick(node) {},
    editClick(item) {
      this.$http({
        url: this.$http.adornUrlEq('/epPatrolLine/checkLine'),
        method: 'post',
        data: {
          id: item.id,
          stationId: this.checkedData.sId,
          name: item.name,
          byx1: item.byx1
        }
      }).then((data) => {
        if (data && data.code === 0) {
          this.$nextTick(() => {
            this.$refs.queryDetail.init(this.checkedData.sId, item)
          })
        }
      })
    },
    saveClick() {
      if (this.idArr.length === 0) {
          this.$message.error('当前图层线路不能为空！')
          return
      }
      this.$confirm('此操作只保存当前图层线路，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          this.loading = true
          if (this.idArr) {
              this.$http({
                  url: this.$http.adornUrlEq('/epPatrolLine/savePoint'),
                  method: 'post',
                  data: {
                      id: this.leftListOnData.id,
                      pointIds: this.idArr,
                      tierId: this.checkedData.tierId,
                      stationId: this.checkedData.sId
                  }
              }).then(data => {
                  this.loading = false
                  if (data && data.code === 0) {
                      this.edirStatus = false
                      this.$message.success('保存成功')
                      this.initTreeStationMap()

                      this.idArr = []
                      this.lineArr = []
                  } else {
                      this.$message.error(data.msg)
                  }
              })
          } else {
              this.loading = false
          }
      }).catch(() => {

      })
    },
    cancelClick() {
      this.$confirm('确认取消修改?', '退出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.edirStatus = false
          this.initTreeStationMap()
        })
        .catch(() => {

        })
    },
    // 画线
    drawLine(lineArr) {
      if (this.lineFeature) {
        let f = this.lineVectorLayer.getSource().getFeatureById('line')
        if (f) {
            this.lineVectorLayer.getSource().removeFeature(f)
        }
      }
      if (lineArr && this.lineVectorLayer) {
          //自定义绘制线
          this.lineFeature = new OlFeature(new LineString(lineArr))
          this.lineFeature.setId('line')
          this.lineVectorLayer.getSource().addFeature(this.lineFeature)
      }
    },
    // 编辑
    updateClick() {
      if (this.leftItem !== null) {
        this.edirStatus = true
        this.list = []
        this.spotData.forEach((spotRes) => {
          if (this.checkedData.tierId == spotRes.id) {
            this.list = spotRes.children || []
          }
        })
        this.changeVectorLayer(this.list)
        this.changeImgControl(this.checkedData.tierId)
        this.idArr = []
        this.lineArr = []
        this.idArr = this.leftItem.optionIds || []
        this.lineArr = this.leftItem.coordinate || []
        if (this.lineArr) {
            this.drawLine(this.lineArr)
        }
      } else {
         this.$message.error({
           message: '请选择要编辑的线路',
           showClose: true,
           duration: 2000
         })
      }
    },
    deleteClick(item) {
      this.$confirm('确认删除该巡查线路?', '删除巡查线路', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrlEq('/epPatrolLine/delete'),
          method: 'post',
          data: {
            id: item.id,
            stationId: this.checkedData.sId
          }
        }).then((data) => {
          if (data && data.code === 0) {
            this.$message.success('删除成功')
            this.leftItem = null
            this.lineArr = []
            this.idArr = []
            this.initTreeStationMap()
          } else {
            this.$message.error('删除失败')
          }
        })
      })
    },

    leftListRowClick(item, index) {
      if (this.edirStatus) {
        return
      }
      this.list = []
      this.leftListIndex = index
      //是否禁用编辑按钮
      this.planCount = item.count
      if (item.layerId) {
        this.checkedData.tierId = item.layerId
      } else {
        this.checkedData.tierId = this.mapList[0].id
      }

      this.leftItem = item
      this.spotData = JSON.parse(JSON.stringify(this.spotDataList))
      // console.log('item:', item)
      if (item.children) {
        this.list = item.children
      } else {
        this.spotData.forEach((spotRes) => {
          if (this.checkedData.tierId == spotRes.id) {
            this.list = spotRes.children || []
          }
        })
      }
      this.leftListData.forEach((res, i) => {
        if (index == i) {
          Vue.set(res, 'on', true)
          this.leftListOnData = res
        } else {
          Vue.set(res, 'on', false)
        }
      })
      // console.log('list:', this.list)
      this.changeVectorLayer(this.list)
      this.changeImgControl(this.checkedData.tierId)
      this.idArr = []
      this.lineArr = []
      this.idArr = this.leftListData[index].optionIds || []
      this.lineArr = this.leftListData[index].coordinate || []
      if (this.lineArr) {
          this.drawLine(this.lineArr)
      }
    }
  }
}
</script>
<style>
.inputWidth {
  width: 210px;
}
</style>
<style lang='scss' scoped>
</style>
<style lang='scss'>
.inputWidth {
  width: 130px;
}

.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;
  // .span-box {
  //   height: 48px;
  //   width: 60px;
  //   font-size: 12px;
  //   border-radius: 5px;
  //   /* border: 1px solid red; */
  //   position: absolute;
  //   // left: 0;
  //   // top: 0;
  // }
  .span-box {
    height: 48px;
    width: 60px;
    font-size: 12px;
    border-radius: 5px;
    position: absolute;
    // left: 0;
    // top: 0;
    .span-info {
      line-height: 0px;
      display: inline-block;
      width: 100px;
      transform: translate(-17px, -10px);
    }
  }
  .span-box.el-icon-wq-qiangji1 {
    height: 60px;
    width: 72px;
  }
  .span-box.el-icon-wq-qiuji1 {
    height: 60px;
    width: 72px;
  }
  .active {
    background-color: #fd949d;
  }
}

.tier-btn {
  .active-tier {
    background-color: #409eff;
    color: #ffffff;
  }
}
.patrol_line {
  .left_list {
    margin-top: 20px;
    .left_list_row_on {
      background-color: #35aff8 !important;
      color: #fff;
      font-size: 14px;
      .el-button--text {
        color: #fff;
      }
    }
    .left_list_row {
      cursor: pointer;
      width: 90%;
      height: 40px;
      border-radius: 20px 0 0 20px;
      background: #fff;
      padding: 0 20px;
      margin-bottom: 10px;
      .left_list_row_name {
        float: left;
        widows: 65%;
        line-height: 40px;
        font-size: 14px;
      }
      .left_list_row_size {
        float: right;
        widows: 25%;
        padding-top: 7px;
      }
    }
  }
  .el-tree {
    background: #f4f4f4;
    font-size: 12px;
    overflow: auto;
  }
  .el-card__body {
    padding: 0;
  }
  .el-card {
    height: 99%;
    background: #f4f4f4;
  }
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #f4f4f4 !important;
    color: #fff !important;
    .el-button--text {
      color: #fff;
    }
    .custom-tree-node {
      background-color: #35aff8 !important;
    }
  }

  .patrol_line_left_top {
    height: 50px;
    background: #e1edf4;
    padding-left: 10px;
    .patrol_line_left_topL {
      height: 40px;
      padding-top: 10px;
      float: left;
      div {
        height: 40px;
        float: left;
        padding: 0 10px 0 10px;
        line-height: 40px;
        cursor: pointer;
        font-size: 14px;
        span {
          color: #35aff8;
        }
      }
      div.on {
        background: #fff;
        border: 1px solid #c3c3c3;
        border-bottom: none;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
    }
    .patrol_line_left_topR {
      float: right;
      margin-top: 10px;
      .el-input {
        width: 109px;
      }
    }
  }
  .patrol_line_right_button {
    height: 50px;
    width: 100%;
    background: #e3e4e6;
    patrol_line_right_button_l {
      margin-left: 20px;
    }
    .el-button--primary.is-plain {
      margin-top: 10px;
      background: #ced1d6;
      border: none;
      color: #656565;
    }
    .tier-btn .active-tier {
      background-color: #409eff;
      color: #ffffff;
    }
    .el-button.is-plain:hover {
      background: #fff;
      border-color: #32a5ea;
      color: #32a5ea;
    }
    .patrol_line_right_button_r {
      float: right;
      margin-top: 10px;
      width: 95px;
      height: 26px;
      font-size: 12px;
      line-height: 25px;
      overflow: hidden;
      border-radius: 13px;
      background: #ced1d6;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
        0px 2px 4px 0px rgba(0, 0, 0, 0.1);
      div {
        width: 46px;
        height: 24px;
        float: left;
        text-align: center;
        cursor: pointer;
      }
      div.on {
        background: #45b5f8;
        color: #fff;
        border-radius: 13px;
        border: 1px solid rgba(23, 41, 71, 0.5);
        box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
          0px 2px 0px 0px rgba(255, 255, 255, 0.15);
      }
    }
  }
}
.ol-overviewmap .ol-overviewmap-map{
  height: 110px!important;
}
</style>
