<template>
  <div class="map-content">
    <div class="map-box" id="mapContainer"></div>
    <div class="wei-lan">
      <div class="icon-off" v-if="!fenceShow" @click="openFence">
        <img src="@/assets/images/carPosition/iconOff.png" alt="" />
        <div>围栏</div>
      </div>
      <div class="icon-on" v-if="fenceShow" @click="fenceShow = false">
        <img src="@/assets/images/carPosition/iconOn.png" alt="" />
        <div>围栏</div>
      </div>
      <!-- **********************围栏弹窗******************************** -->
      <div class="fenceDialog" v-if="fenceShow">
        <div class="fence-dialog-modal" v-if="fenceCreateShow"></div>
        <div class="fence-box">
          <div class="close-icon" @click="closeFence">
            <i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
          </div>
          <div class="fence-title">围栏</div>
          <div class="fence-tool">
            <div class="tool" @click="openFenceCreate">创建围栏</div>
            <div class="tool" @click="deleteFence">删除围栏</div>
          </div>
          <div class="fence-select">
            <el-input v-model="fenceSearch" placeholder="请输入" size="small" clearable @change="fenceNameChange"></el-input>
          </div>
          <div class="fence-radio" v-if="fenceList.length > 0">
            <el-checkbox :indeterminate="isIndeterminateFence" v-model="checkAllFence" @change="fenceAllChange">全选</el-checkbox>
            <vue-scroll :ops="{ scrollPanel: { overflowX: false } }">
              <div style="margin: 5px 0"></div>
              <div class="fence-checkbox">
                <el-checkbox-group v-model="checkedFence" @change="fenceCitiesChange">
                  <!-- <div v-for="item in fenceList" :key="item.id">
                    <el-checkbox :label="item.id" :key="item.id">{{ item.fenceName }} </el-checkbox>
                    </div> -->
                  <div class="fence-checkbox-item" v-for="item in fenceList" :key="item.id">
                    <el-checkbox class="fence-checkbox-item-checkbox" @change="fenceCitiesChange($event, item)" :label="item.id" :value="item.id" :key="item.id"
                      >{{ item.fenceName }}
                    </el-checkbox>
                    <div class="fence-checkbox-item-btn">
                      <i class="el-icon-link icon" @click="openWorkerDialog(item)"></i>
                      <i class="el-icon-edit icon" @click="openEditDialog(item)"></i>
                      <i class="el-icon-delete icon icon-delete" @click="deleteFenceInfo(item.id)"></i>
                    </div>
                  </div>
                </el-checkbox-group>
              </div>
            </vue-scroll>
          </div>
          <div v-else style="text-align: center; margin-top: 100px">暂无围栏</div>
        </div>
        <!-- 创建围栏弹窗 -->
        <div class="fenceCreate" v-if="fenceCreateShow">
          <!-- <div class="fence-modal"></div> -->
          <div class="fenceCrete-box">
            <div class="close-icon" @click="closeFenceCreate">
              <i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
            </div>
            <div class="fence-title">{{ addForm.id ? '编辑围栏' : '创建围栏' }}</div>
            <el-form size="medium" :model="addForm" ref="addForm" label-width="80px" :rules="formFenceRules">
              <el-form-item label="围栏名称" prop="fenceName">
                <el-input v-model="addForm.fenceName" placeholder="请输入"></el-input>
              </el-form-item>

              <el-form-item label="范围类型" prop="rangeType">
                <el-radio-group
                  v-model="addForm.rangeType"
                  style="display: flex; justify-content: space-between; padding-top: 10px; padding-right: 10px"
                  @change="changeAreaType"
                >
                  <el-radio :label="1">标准区域</el-radio>
                  <el-radio :label="2">自定义</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="区域半径" prop="areaRadius" v-if="addForm.rangeType === 1">
                <el-input
                  type="number"
                  v-model="addForm.areaRadius"
                  placeholder="请输入"
                  :maxlength="5"
                  @input="areaRadiusChange"
                ></el-input>
              </el-form-item>
              <el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
                <div class="fence-shape">多边形</div>
              </el-form-item>
              <div class="create-footer">
                <el-button class="cancleBtn" @click="handleCancel" icon="el-icon-circle-close" size="medium"
                  >{{ $t('message.alarmValueSet.cancel') }}
                </el-button>
                <el-button type="primary" icon="el-icon-circle-check" @click="submitFence" size="medium"
                  >{{ $t('message.alarmValueSet.save') }}
                </el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <settingDialog :visible.sync="settingDialogVisible" :id="dialogId" />
  </div>
</template>

<script>
import settingDialog from './components/settingDialog.vue'
import { getHatFenceListApi, deleteHatFenceBatchApi, addHatFenceApi, editHatFenceApi } from '@/assets/js/api/smartSafeHat/smartSafeHat.js'
var mouseTool
var map
export default {
  components: {
    settingDialog
  },
  data() {
    return {
      settingDialogVisible: false,
      dialogId: '',
      fenceShow: false,
      fenceCreateShow: false,
      addForm: {
        areaRadius: 100, //区域半径
        fenceName: '', //围栏名称
        addr: '',
        rangeType: 1,
        locationList: [
          {
            fenceId: 0,
            id: 0,
            latitude: '',
            longitude: '',
            sortNum: 0
          }
        ],
        projectSn: '',
        enterpriseId: ''
      },
      formFenceRules: {
        fenceName: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'blur'
          },
          { min: 1, max: 20, message: this.$t('message.alarmValueSet.message1'), trigger: 'blur' }
        ], // 长度在 1 到 20 个字符
        areaRadius: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'change'
          }
        ]
      },
      fenceList: [],
      checkedFence: [],
      isIndeterminateFence: false,
      checkAllFence: false,
      fenceSearch: '',
      locationList: [],
      map: null,
      geocoder: null,
      auto: null,
      placeSearch: null,
      polygonPath: []
    }
  },
  mounted() {
    this.initMap()
    this.getFenceList()
  },
  methods: {
    openEditDialog(item) {
      this.fenceCreateShow = true
      this.addForm = item
      this.locationList = JSON.parse(item.fenceShapeArr)
    },
    handleCancel() {
      this.fenceCreateShow = false
      this.closeFenceCreate()
    },
    // 围栏定位地图
    initMap() {
      var that = this
      //地图加载
      map = new AMap.Map('mapContainer', {
        resizeEnable: true
      })
      var geocoder = new AMap.Geocoder({})
      //输入提示
      var autoOptions = {
        input: 'tipinput'
      }
      this.auto = new AMap.Autocomplete(autoOptions)
      this.placeSearch = new AMap.PlaceSearch({
        map: map
      }) //构造地点查询类
      AMap.event.addListener(this.auto, 'select', this.select) //注册监听，当选中某条记录时会触发
      mouseTool = new AMap.MouseTool(map)
      mouseTool.on('draw', function (event) {
        // event.obj 为绘制出来的覆盖物对象
        console.log('覆盖物对象绘制完成', event.obj.getPath())

        let overlaysList = map.getAllOverlays('polygon')

        if (overlaysList.length > 1) {
          map.remove(overlaysList[0])
        }

        that.locationList = []
        var pathArr = event.obj.getPath()
        pathArr.forEach(element => {
          that.locationList.push({
            longitude: element.lng,
            latitude: element.lat
          })
        })
      })
      geocoder.getLocation(this.addForm.addr, function (status, result) {
        if (status === 'complete' && result.geocodes.length) {
          var lnglat = result.geocodes[0].location
          console.log(result.geocodes[0])
          // var arr = lnglat.split(',')
          that.locationList = [
            {
              longitude: lnglat.lng,
              latitude: lnglat.lat
            }
          ]
          that.drawCircle()
        } else {
          console.log('获取绘制', status, result)
        }
      })
      map.on('click', e => {
        if (!this.fenceCreateShow) {
          console.log('还未到创建围栏弹窗')
          return
        }
        console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！')
        if (this.addForm.rangeType == 1) {
          this.locationList = []
          this.locationList.push({
            longitude: e.lnglat.getLng(),
            latitude: e.lnglat.getLat()
          })
          var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
          geocoder.getAddress(lnglatXY, function (status, result) {
            console.log(status, result)
            that.addForm.addr = result.regeocode.formattedAddress
          })
          this.drawCircle()
        } else {
          this.locationList.push({
            longitude: e.lnglat.getLng(),
            latitude: e.lnglat.getLat()
          })
        }
        console.log('当前位置列表', this.locationList)
      })
    },
    getFenceList() {
      let data = {
        fenceName: this.fenceSearch,
        projectSn: this.$store.state.projectSn
      }
      getHatFenceListApi(data).then(res => {
        if (res.success) {
          this.fenceList = res.result
          this.circleMapData = res.result.filter(item => item.rangeType === 1)
          this.shapeMapData = res.result.filter(item => item.rangeType === 2)
          console.log('围栏', this.circleMapData, this.shapeMapData)
        }
      })
      //   this.fenceList = this.fenceList.filter(item => item.fenceName.includes(this.fenceSearch))
    },
    fenceNameChange(e) {
      console.log('围栏名称', e)
      this.fenceSearch = e
      this.getFenceList()
    },
    fenceAllChange(val) {
      this.clearFn()
      let nameArr = this.fenceList.map(item => item.id)
      this.checkedFence = val ? nameArr : []
      this.isIndeterminateFence = false
      console.log('全选', val, this.checkedFence)
      if (val) {
        this.drawAllFencePoint()
      }
      this.pointSelectChange()
      map.setFitView()
    },
    fenceCitiesChange(value) {
      this.clearFn()
      let checkedCount = value.length
      this.checkAllFence = checkedCount === this.fenceList.length
      this.isIndeterminateFence = checkedCount > 0 && checkedCount < this.fenceList.length
      this.drawFencePoint()
      this.pointSelectChange()
      // this.circleMapData =
      console.log('选中', value)
    },
    pointSelectChange() {},

    drawAllFencePoint() {
      for (let index = 0; index < this.fenceList.length; index++) {
        const element = this.fenceList[index]
        // console.log('选中某条', currentRecord)
        if (element.rangeType === 1) {
          this.echoCircle(element)
        }
        if (element.rangeType === 2) {
          this.echoDrawPolygon(element)
        }
      }
    },
    select(e) {
      console.log('select', e)
      this.placeSearch.setCity(e.poi.adcode)
      this.placeSearch.search(e.poi.name) //关键字查询查询
    },
    //清空地图
    clearFn() {
      map.clearMap()
    },
    changeAreaType(e) {
      // console.log("切换选项",e);
      if (e === 1) {
        this.drawCircle()
      } else {
        this.drawPolygon()
      }
      this.locationList = []
    },
    //添加点标记
    addMarker() {
      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(25, 34)
        // 图标取图偏移量
        // imageOffset: new AMap.Pixel(-9, -3)
      })
      var marker = new AMap.Marker({
        icon: startIcon,
        position: [this.locationList[0].longitude, this.locationList[0].latitude],
        size: new AMap.Size(25, 34)
        // offset: new AMap.Pixel(-13, -30)
      })
      marker.setMap(map)
    },
    exitEditFn() {
      mouseTool.close()
    },
    //画圆
    drawCircle() {
      if (this.locationList.length == 0) {
        return
      }
      this.clearFn()
      this.addMarker()
      var circle = new AMap.Circle({
        center: [this.locationList[0].longitude, this.locationList[0].latitude],
        radius: this.addForm.areaRadius, //半径
        borderWeight: 2,
        strokeColor: '#6caffc',
        strokeOpacity: 1,
        strokeWeight: 2,
        fillOpacity: 0.6,
        strokeStyle: 'solid',
        // strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: '#6caffc',
        zIndex: 50
      })

      circle.setMap(map)
      // 缩放地图到合适的视野级别
      map.setFitView([circle])
    },
    //绘制多边形
    drawPolygon() {
      this.clearFn()
      console.log('自定义绘制')
      mouseTool.polygon({
        strokeColor: '#6caffc',
        strokeOpacity: 1,
        strokeWeight: 2,
        // strokeOpacity: 0.2,
        fillColor: '#6caffc',
        fillOpacity: 0.6,
        // 线样式还支持 'dashed'
        strokeStyle: 'solid'
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      })
    },
    // 圆
    echoCircle(item) {
      // console.log("画圆",item)
      // 创建纯文本标记
      let text = new AMap.Text({
        text: item.fenceName,
        anchor: 'center', // 设置文本标记锚点
        // draggable: true, // 是否拖拽
        cursor: 'pointer',
        angle: 10,
        style: {
          padding: '10px',
          'border-radius': '10px',
          'background-color': 'white',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
          'text-align': 'center',
          'font-size': '20px',
          color: 'blue'
        },
        position: [item.longitude, item.latitude]
      })

      let circle = new AMap.Circle({
        center: [item.longitude, item.latitude],
        radius: item.areaRadius, //半径
        borderWeight: 2,
        strokeColor: '#6caffc',
        strokeOpacity: 1,
        strokeWeight: 2,
        fillOpacity: 0.6,
        strokeStyle: 'solid',
        // strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: '#6caffc',
        zIndex: 50
      })
      text.setMap(map)
      circle.setMap(map)
      // 缩放地图到合适的视野级别
      map.setFitView([circle])
    },
    echoDrawPolygon(item) {
      // console.log("画多边形",item)
      let polygonPath = []
      let polygonArr = JSON.parse(item.fenceShapeArr)
      for (let index = 0; index < polygonArr.length; index++) {
        const element = polygonArr[index]
        polygonPath.push([element.longitude, element.latitude])
      }
      // console.log("多边形位置",polygonPath)

      // let path = [
      //   [116.403322, 39.920255],
      //   [116.410703, 39.897555],
      //   [116.402292, 39.892353],
      //   [116.389846, 39.891365]
      // ]
      let path = polygonPath

      // 创建纯文本标记
      let text = new AMap.Text({
        text: item.fenceName,
        anchor: 'center', // 设置文本标记锚点
        // draggable: true, // 是否拖拽
        cursor: 'pointer',
        angle: 10,
        style: {
          padding: '10px',
          'border-radius': '10px',
          'background-color': 'white',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
          'text-align': 'center',
          'font-size': '20px',
          color: 'blue'
        },
        position: path[0]
      })

      let polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#FF33FF',
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50
      })
      text.setMap(map)
      map.add(polygon)
      // 缩放地图到合适的视野级别
      map.setFitView([polygon])
    },

    drawFencePoint() {
      for (let index = 0; index < this.checkedFence.length; index++) {
        const element = this.checkedFence[index]
        let currentRecord = this.fenceList.filter(item => item.id === element)[0]
        // console.log('选中某条', currentRecord)
        if (currentRecord.rangeType === 1) {
          this.echoCircle(currentRecord)
        }
        if (currentRecord.rangeType === 2) {
          this.echoDrawPolygon(currentRecord)
        }
      }
    },
    areaRadiusChange() {
      if (this.addForm.locationList?.length === 1) {
        this.drawCircle()
      }
    },
    submitFence() {
      if (this.locationList.length == 0) {
        this.$message.error('未设置围栏区域!')
        return
      }
      this.addForm.locationList = this.locationList
      console.log('新增围栏', this.addForm)
      let latitude = ''
      let longitude = ''
      let fenceShape = ''
      if (this.addForm.locationList.length === 1) {
        latitude = this.addForm.locationList[0].latitude
        longitude = this.addForm.locationList[0].longitude
      }
      if (this.addForm.locationList.length > 1) {
        for (let index = 0; index < this.addForm.locationList.length; index++) {
          const element = this.addForm.locationList[index]
          let currentStr = element.latitude + '|' + element.longitude
          if (this.addForm.locationList.length - 1 > index) {
            currentStr = currentStr + ','
          }
          fenceShape = fenceShape + currentStr
        }
      }
      console.log('多边形', fenceShape)
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          let params = {
            fenceName: this.addForm.fenceName,
            areaRadius: this.addForm.areaRadius,
            fenceShapeArr: JSON.stringify(this.addForm.locationList),
            fenceShape: fenceShape,
            latitude: latitude,
            longitude: longitude,
            rangeType: this.addForm.rangeType,
            projectSn: this.$store.state.projectSn,
            id: this.addForm.id
          }
          // params.alarmPushWorkerId = this.addForm.alarmPushWorkerId.join(',');
          const api = this.addForm.id ? editHatFenceApi : addHatFenceApi
          console.log('新增信息', params)
          api(params).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.getFenceList()
            }
          })
          this.closeFenceCreate()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 打开创建围栏弹窗
    openFenceCreate() {
      this.fenceCreateShow = true
    },
    deleteFence() {
      if (this.checkedFence.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择删除围栏'
        })
        return
      }
      console.log('删除围栏', this.checkedFence)
      let idString = ''
      for (let index = 0; index < this.checkedFence.length; index++) {
        const element = this.checkedFence[index]
        if (this.checkedFence.length - 1 > index) {
          idString = idString + element + ','
        } else {
          idString = idString + element
        }
      }
      this.deleteFenceInfo(idString)
    },
    // 删除围栏
    deleteFenceInfo(idGroups) {
      console.log('删除id', idGroups)
      let data = {
        ids: idGroups
      }

      this.$confirm('此操作将永久删除该围栏, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteHatFenceBatchApi(data).then(res => {
            if (res.success) {
              this.getFenceList()
              this.checkedFence = ''
              this.fenceCitiesChange(this.checkedFence)
              this.$message.success('删除成功')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    openWorkerDialog(item) {
      console.log('打开绑定人员弹窗', item)
      this.dialogId = item.id
      this.settingDialogVisible = true

    },
    // 关闭创建围栏弹窗
    closeFenceCreate() {
      this.fenceCreateShow = false
      this.addForm = {
        areaRadius: 100, //区域半径
        fenceName: '', //围栏名称
        addr: '',
        rangeType: 1,
        locationList: [
          {
            fenceId: 0,
            id: 0,
            latitude: '',
            longitude: '',
            sortNum: 0
          }
        ],
        projectSn: '',
        enterpriseId: ''
      }
      this.exitEditFn()
      this.clearFn()
    },
    // 打开围栏弹窗
    openFence() {
      this.fenceShow = true
    },
    // 关闭围栏弹窗
    closeFence() {
      this.fenceShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.map-content {
  width: 100%;
  height: 100%;
  position: relative;
}
#mapContainer {
  width: 100%;
  height: 100%;
}
.wei-lan {
  //   position: absolute;
  //   left: 1%;
  //   top: 8%;
  //   width: 100%;
  //   height: 0;
  .icon-off {
    position: absolute;
    padding-top: 5px;
    top: 8%;
    left: 1%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    font-size: 14px;
    background: #ffffff;
    text-align: center;
    border-radius: 2px 2px 2px 2px;
    img {
      width: 20px;
      height: 20px;
      margin: 0 auto;
    }
  }
  .icon-on {
    position: absolute;
    padding-top: 5px;
    top: 8%;
    left: 1%;
    text-align: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    font-size: 14px;
    background: #ffffff;
    color: #5181f6;
    border-radius: 2px 2px 2px 2px;
    img {
      width: 20px;
      height: 20px;
      margin: 0 auto;
    }
  }
}

// 围栏弹窗
.fenceDialog {
  position: absolute;
  background: #fff;
  box-sizing: border-box;
  padding: 25px;
  left: 5%;
  top: 20px;
  width: 330px;
  height: 380px;
  z-index: 1;
  .fence-dialog-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 3;
    background: rgba(39, 45, 69, 0.5);
  }
  .close-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
  }
  .fence-title {
    border-left: 4px solid #5c81ee;
    font-size: 15px;
    color: #272d45;
    padding-left: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: Source Han Sans CN, Source Han Sans CN;
  }
}
.fenceCreate {
  position: absolute;
  background: #fff;
  box-sizing: border-box;
  padding: 25px;
  width: 330px;
  height: 380px;
  left: 40px;
  top: 40px;
  z-index: 5;
  // .fence-modal {
  //   position: absolute;
  //   width: 330px;
  //   height: 90px;
  //   top: -90px;
  //   left: 0%;
  //   background: rgba(39, 45, 69, 0.5);
  // }
  .fenceCrete-box {
    position: relative;
    .create-footer {
      margin: 100px 0 0 50px;
    }
  }
}
.fence-box {
  position: relative;
  .fence-tool {
    display: flex;
    justify-content: space-around;
    padding: 0 25px;
    .tool {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 33px;
      font-size: 14px;
      cursor: pointer;
      background: #ffffff;
      color: #5181f6;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #5181f6;
    }
  }
  .fence-select {
    margin: 15px 0;
  }
  .fence-radio {
    height: 160px;
  }
}
.fence-checkbox {
  width: 100%;
  .fence-checkbox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .fence-checkbox-item-checkbox {
    max-width: 200px;
    overflow: hidden;
  }
  .fence-checkbox-item-btn {
    flex: 1;
    // min-width: 80px;
    flex-shrink: 0;
    text-align: right;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    .icon {
      cursor: pointer;
      font-size: 14px;
      color: #5181f6;
    }
    .icon-delete {
      color: #f56c6c;
    }
  }
}
</style>
