<template>
  <div class="common-page device-manage controlPointAllView">
    <div class="panel-bottom page-row">
      <div class="ctin-box" style="height:81vh">
        <div class="content-within">
          <div class="head-container">
            <!-- 搜索 -->
            <span>设置初始值：</span>
            <label class="el-form-item-label" style="font-weight: 500"><span style="color:red">* </span>装车平均时长(分钟)</label>
            <el-input-number v-model="query.loading" :precision="2" :step="0.1" :min="0" :max="9999" @change="inputInitialFn()"></el-input-number>

            <label class="el-form-item-label" style="font-weight: 500"><span style="color:red">* </span>卸车平均时长(分钟)</label>
            <el-input-number v-model="query.unload" :precision="2" :step="0.1" :min="0" :max="9999" @change="inputInitialFn()"></el-input-number>

            <label class="el-form-item-label" style="font-weight: 500"><span style="color:red">* </span>路径系数</label>
            <el-input-number v-model="query.coefficient" :precision="2" :step="0.1" :min="0" :max="9999" @change="inputInitialFn()"></el-input-number>
            <el-button size="mini" type="success" @click="addKeyPoints()" :disabled="addKeyPointsAble">添加路径关键点</el-button>
            <div style="width:62vw;height: 72vh;overflow: hidden;margin-top: 1vh;">
              <mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod"/>
            </div>
          </div>
        </div>
        <div class="contentRight">
          <el-tabs v-model="activeName" @tab-click="handleClick1">
            <el-tab-pane name="first">
              <span slot="label">
                <img src="../../../assets/images/cutGraph/zhuangchedian1.png" height="25" style="vertical-align: -7px;">
                <span>装车点</span>
              </span>
              <el-cascader v-model="entruckingValue1" :options="entruckingData" placeholder="请选择装车点名称" :disabled="transmitWay == 'edit'"></el-cascader>
              <div class="button-box">
                <el-button size="mini" type="primary" @click="entruckingServeFn()">保存</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="entruckingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label">
                <img src="../../../assets/images/cutGraph/kongzhidian1.png" height="25" style="vertical-align: -7px;">
                <span>控制点</span>
              </span>
              <label class="el-form-item-label" style="font-weight: 500">控制点名称</label>
              <el-input v-model="controlPointValue3" clearable size="small" placeholder="请输入控制点名称" style="width: 180px" :disabled="transmitWay == 'edit'"/>
              <div style="margin:1vh 0px 1vh;">选择连接的控制点</div>
              <div class="connectPointView">
                <div class="connectPointView_son1">
                  <el-checkbox-group v-model="selectConnectPointArray">
                    <el-checkbox v-for="(item,index) in controlPointData" :label="item.end" :key="index" style="margin-bottom:10px;">
                      <div style="font-size: 15px;">
                        {{item.end}}
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="connectPointView_son2">
                  <div v-for="(item,index) in controlPointData" :key="index">
                    <input type="number" style="width:3vw;margin-bottom:4.2px;" min="0" v-model="item.weight">分钟
                  </div>
                </div>
              </div>
              <div>
                <el-button size="mini" type="primary" @click="controlPointServeFn()">保存</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="controlPointDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane name="third">
              <span slot="label">
                <img src="../../../assets/images/cutGraph/xiechedian1.png" height="25" style="vertical-align: -7px;">
                <span>卸车点</span>
              </span>
              <el-cascader v-model="detrainingValue2" :options="detrainingData" placeholder="请选择卸车点名称" :disabled="transmitWay == 'edit'"></el-cascader>
              <div class="button-box">
                <el-button size="mini" type="primary" @click="detrainingServeFn()">保存</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="detrainingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import mars3dViewerMap from '../../../components/mars3d/Map4.vue' //地图


export default {
  name: "RegionalPathMap",
  components: {
		mars3dViewerMap,
	},
  data() {
    const basePathUrl = window.basePathUrl || ''
    return {
      //地图数据
			configUrl: basePathUrl + 'config/config.json',
      //初始值数据
      query: {
        id:1,
        loading:0,
        unload:0,
        coefficient:0,
      },
      //添加路径关键点按钮可否使用
      addKeyPointsAble:false,
      //装车点数据
      entruckingData:[],
      //卸车点数据
      detrainingData:[],
      //控制点数据
      controlPointData:[],
      //选择关键点类型
      activeName: "",
      //装卸车点名称
      entruckingValue1: [],
      detrainingValue2: [],
      controlPointValue3:'',
      //保存时判断为添加还是修改
      transmitWay:'add',
      //暂存修改删除时的id
      faControlPointId:0,
      //选择连接点数据
      selectConnectPointArray:[],
    };
  },
  mounted(){
    this.loadData();
  },
  methods: {
    //获取数据
    loadData(){
      //获取初始值
			HttpReq.truckDispatching.apiRatioQuery().then((res) => {
				if(res.code == 200){
					this.query.id = res.data.content[0].id;
					this.query.loading = res.data.content[0].loadAvgTime;
					this.query.unload = res.data.content[0].unloadAvgTime;
					this.query.coefficient = res.data.content[0].pathRatio;
				}
			})
      //获取装卸点数据
      HttpReq.truckDispatching.RegionalInformationQuery({size:9999}).then((res) => {
				if(res.code == 200){
          let caiqu1 = [];
          let xiequ1 = [];
					res.data.content.forEach((item,index)=>{
              if(item.areaclass == '采区'){
                  caiqu1.push(item);
              }else if(item.areaclass == '卸区'){
                  xiequ1.push(item);
              }
          });
          this.$nextTick(()=>{
              let caiquCenArr1 = [];
              caiqu1.forEach((item1,index1)=>{
                  let caiquCenObj1 = {};
                  caiquCenObj1.value = item1.name;
                  caiquCenObj1.label = item1.name;
                  HttpReq.truckDispatching.RegionalCaiDianQuery({size:9999,areaName:item1.name}).then((res1) => {
                      if(res1.code == 200 && res1.data.totalElements != 0){
                          let caiquCenArr2 = [];
                          res1.data.content.forEach((item2,index2)=>{
                              let caiquCenObj2 = {};
                              caiquCenObj2.value = item2.name;
                              caiquCenObj2.label = item2.name;
                              caiquCenArr2.push(caiquCenObj2);
                          })
                          caiquCenObj1.children = caiquCenArr2;
                      };
                      caiquCenArr1.push(caiquCenObj1);
                  })
              });
              let xiequCenArr1 = [];
              xiequ1.forEach((item1,index1)=>{
                  let xiequCenObj1 = {};
                  xiequCenObj1.value = item1.name;
                  xiequCenObj1.label = item1.name;
                  xiequCenArr1.push(xiequCenObj1);
              });
              this.entruckingData = caiquCenArr1;
              this.detrainingData = xiequCenArr1;
          })  
				};
			})
      //获取各个点的数据
      HttpReq.truckDispatching.apiCpointQuery({size:9999}).then((res) => {
				if(res.code == 200){
          let arr1 = [];
          res.data.content.forEach((item,index)=>{
            let obj1 = {};
            obj1.end = item.name;
            obj1.weight = 0;
            arr1.push(obj1);
          })
          this.controlPointData = arr1;
          this.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content);
				}
			})
    },
    //修改初始值
    inputInitialFn(){
      let lastData = {};
      lastData.id = this.query.id;
      lastData.loadAvgTime = this.query.loading;
      lastData.unloadAvgTime = this.query.unload;
      lastData.pathRatio = this.query.coefficient;
      HttpReq.truckDispatching.apiRatioUpdate(lastData).then((res) => {})
    },
    //添加关键点
    addKeyPoints(){
      this.transmitWay = 'add';
      this.addKeyPointsAble = true;
      this.entruckingValue1 = [];
      this.detrainingValue2 = [];
      this.controlPointValue3 = '';
      this.$refs.mars3dViewerMapMethod.btnStartDraw();
    },
    //保存装点
    entruckingServeFn(){
      if(this.entruckingValue1.length == 0){
        this.$notify({
					title: '未选择装车点名称！',
					type: 'error',
					duration: 2500
				})
      }else if(this.entruckingValue1.length == 1){
        this.$refs.mars3dViewerMapMethod.uploaded(this.entruckingValue1[0],'装车点',this.transmitWay);
      }else{
        this.$refs.mars3dViewerMapMethod.uploaded(this.entruckingValue1[0] + '/' + this.entruckingValue1[1],'装车点',this.transmitWay);
      }
    },
    //删除装点
    entruckingDelFn(){
      let delname = '';
      if(this.entruckingValue1.length == 1){
        delname = this.entruckingValue1[0];
      }else{
        delname = this.entruckingValue1[0] + '/' + this.entruckingValue1[1];
      }
      HttpReq.truckDispatching.apiPathmapQuery({size:9999,end:delname}).then((res1) => {
        if(res1.code == 200){
          let idArr1 = [];
          res1.data.content.forEach((item1,index1)=>{
            idArr1.push(item1.id);
          })
          //删除
          HttpReq.truckDispatching.apiPathmapDel(idArr1).then((resDel1) => {
            HttpReq.truckDispatching.apiCpointDel([this.faControlPointId]).then((res) => {
              this.$notify({
                title: '删除成功,即将重新加载，请勿操作！',
                type: 'success',
                duration: 2500
              });
              setTimeout(function (){
                window.location.reload();
              },2000);
            })
          })
        }
      })
    },
    //保存卸点
    detrainingServeFn(){
      if(this.detrainingValue2.length == 0){
        this.$notify({
					title: '未选择卸车点名称！',
					type: 'error',
					duration: 2500
				})
      }else if(this.detrainingValue2.length == 1){
        this.$refs.mars3dViewerMapMethod.uploaded(this.detrainingValue2[0],'卸车点',this.transmitWay);
      }else{
        this.$refs.mars3dViewerMapMethod.uploaded(this.detrainingValue2[0] + '/' + this.detrainingValue2[1],'卸车点',this.transmitWay);
      }
    },
    //删除卸点
    detrainingDelFn(){
      let delname = '';
      if(this.detrainingValue2.length == 1){
        delname = this.detrainingValue2[0];
      }else{
        delname = this.detrainingValue2[0] + '/' + this.detrainingValue2[1];
      }
      HttpReq.truckDispatching.apiPathmapQuery({size:9999,end:delname}).then((res1) => {
        if(res1.code == 200){
          let idArr1 = [];
          res1.data.content.forEach((item1,index1)=>{
            idArr1.push(item1.id);
          })
          //删除
          HttpReq.truckDispatching.apiPathmapDel(idArr1).then((resDel1) => {
            HttpReq.truckDispatching.apiCpointDel([this.faControlPointId]).then((res) => {
              this.$notify({
                title: '删除成功,即将重新加载，请勿操作！',
                type: 'success',
                duration: 2500
              });
              setTimeout(function (){
                window.location.reload();
              },2000);
            })
          })
        }
      })
    },
    //保存控制点
    controlPointServeFn(){
      if(this.controlPointValue3 == ''){
        this.$notify({
					title: '未输入控制点名称！',
					type: 'error',
					duration: 2500
				})
      }else{
        let arr1 = [];
        this.selectConnectPointArray.forEach((item,index)=>{
          this.controlPointData.forEach((item1,index1)=>{
            if(item == item1.end){
              let obj1 = {};
              obj1.start = this.controlPointValue3;
              obj1.end = item1.end;
              obj1.weight = item1.weight;
              arr1.push(obj1);
              return;
            }
          })
        })
        this.$nextTick(()=>{
          this.$refs.mars3dViewerMapMethod.uploaded(this.controlPointValue3,'控制点',this.transmitWay,arr1);
        })
      }
    },
    //删除控制点
    controlPointDelFn(){
      //获取起点为该控制点的数据
      HttpReq.truckDispatching.apiPathmapQuery({size:9999,start:this.controlPointValue3}).then((res1) => {
        if(res1.code == 200){
          let idArr1 = [];
          res1.data.content.forEach((item1,index1)=>{
            idArr1.push(item1.id);
          })
          //获取终点为该控制点的数据
          HttpReq.truckDispatching.apiPathmapQuery({size:9999,end:this.controlPointValue3}).then((res2) => {
            if(res2.code == 200){
              res2.data.content.forEach((item2,index2)=>{
                idArr1.push(item2.id);
              })
              //删除
              HttpReq.truckDispatching.apiPathmapDel(idArr1).then((resDel1) => {
                HttpReq.truckDispatching.apiCpointDel([this.faControlPointId]).then((resDel2) => {
                  this.$notify({
                    title: '删除成功,即将重新加载，请勿操作！',
                    type: 'success',
                    duration: 2500
                  });
                  setTimeout(function (){
                    window.location.reload();
                  },2000);
                })
              })
            }
          })
        }
      })

      

    },
    //点击关键点获取对应数据
    clickPointFn(item){
      this.transmitWay = 'edit';
      this.faControlPointId = item.id;
      if(item.type == '装车点'){
        this.activeName = 'first';
        let text1 = item.name + '';
        this.entruckingValue1 = text1.split('/');
      }else if(item.type == '卸车点'){
        this.activeName = 'third';
        let text1 = item.name + '';
        this.detrainingValue2 = text1.split('/');
      }else{
        this.activeName = 'second';
        this.controlPointValue3 = item.name;
        let arr1 = [];
        //重置所有连接点时间为0
        this.controlPointData.forEach((items,indexs)=>{
          this.controlPointData[indexs].weight = 0;
        })
        //获取已该点为起点的数据
        HttpReq.truckDispatching.apiPathmapQuery({size:9999,start:this.controlPointValue3}).then((res) => {
          if(res.code == 200){
            res.data.content.forEach((item2,index)=>{
              let obj1 = {};
              obj1.end = item2.end;
              obj1.weight = item2.weight;
              arr1.push(obj1);
            });
            //获取已该点为终点的数据
            HttpReq.truckDispatching.apiPathmapQuery({size:9999,end:this.controlPointValue3}).then((res1) => {
              if(res1.code == 200){
                res1.data.content.forEach((item1,index1)=>{
                  let obj2 = {};
                  obj2.end = item1.start;
                  obj2.weight = item1.weight;
                  arr1.push(obj2);
                });
                //刷新展示连接点数据
                let arr2 = [];
                arr1.forEach((item3,index3)=>{
                  arr2.push(item3.end);
                  this.controlPointData.forEach((item4,index4)=>{
                    if(item3.end == item4.end){
                      this.controlPointData[index4].weight = item3.weight;
                    }
                  })
                })
                this.selectConnectPointArray = arr2;
              }
            })
          }
        })
        
      }
    },
    handleClick1(tab, event){
      if(this.transmitWay == 'edit'){
        this.entruckingValue1 = [];
        this.detrainingValue2 = [];
        this.controlPointValue3 = '';
        this.transmitWay = 'add';
        this.selectConnectPointArray = [];
        this.controlPointData.forEach((items,indexs)=>{
          this.controlPointData[indexs].weight = 0;
        })
      }
    },
    // 地图构造完成回调
		onMapload(map) {
			// 以下为演示代码

			// 创建entity图层
			const graphicLayer = new this.mars3d.layer.GraphicLayer()
			map.addLayer(graphicLayer)

			// 2.在layer上绑定监听事件
			graphicLayer.on(this.mars3d.EventType.click, function (event) {
				console.log('监听layer，单击了矢量对象', event)
			})
			graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
				console.log('监听layer，鼠标移入了矢量对象', event)
			})
			graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
				console.log('监听layer，鼠标移出了矢量对象', event)
			})
			// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
			graphicLayer.bindPopup('我是layer上绑定的Popup', {
				anchor: [0, -10]
			})
			// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
			graphicLayer.bindContextMenu([
				{
					text: '删除对象',
					iconCls: 'fa fa-trash-o',
					callback: function (e) {
						const graphic = e.graphic
						if (graphic) {
						graphicLayer.removeGraphic(graphic)
						}
					}
				}
			])
		},
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}

.controlPointAllView{
  .panel-bottom {
    .el-button {
      margin: 2px 0;
      padding: 6px 15px;
      font-size: 14px;
    }
    .btn-groub2 {
      display: inline-block;
      .el-button {
        margin: 2px 0;
        padding: 6px 15px;
        font-size: 15px;
      }
      .el-button--warning {
        background-color: #e6a23c;
        border-color: #e6a23c;
      }
      .el-button--warning:focus,
      .el-button--warning:hover {
        background: #ebb563;
        border-color: #ebb563;
      }
    }
    .ctin-box {
      height: 300px;
      //background: red;
      display: flex;
      display: -webkit-flex;
      -webkit-flex-direction: row;
    }
    .content-right {
      width: 450px;
      .button-box {
        width: 300px;
        height: 200px;
        position: relative;
        bottom: -160px;
      }
      //background: yellow;
    }
  }
  .contentRight{
    width: 320px;
    position: absolute;
    right: 3vw;
    .button-box {
        width: 300px;
        height: 40vh;
        position: relative;
        bottom: -30vh;
      }
  }
}
.mapcontainer3 {
  height: 50vh;
  width: 750px;
  overflow: hidden;
  margin-bottom: 10px;
}
.connectPointView{
  display: flex;
  justify-content: space-between;
  margin-bottom: 1vh;
  border-radius: 5px;
  border: 1px solid gainsboro;
  height: 40vh;
  width: 99%;
  padding: 1vh 1vw;
  box-sizing: border-box;
  overflow-y: scroll;
}
.connectPointView_son1{
  width: 49%;
}
.connectPointView_son2{
  width: 49%;
}
.checkboxViews {
  padding-left: 10px;
  box-sizing: border-box;
  width: 490px;
  height: 120px;
  border: 1px gainsboro solid;
  overflow-y: scroll;
  overflow-x: hidden;
}
.ecahrt1-dialog {
  display: flex;
  align-items: center;
  .el-dialog {
    margin-top: inherit !important;
    display: table !important;
    width: fit-content;
    .el-form-item {
      margin-right: 0;
    }
  }

  .el-dialog__header {
    height: 0;
    padding: 0;
    display: block;
  }
  .form-body {
    border: 1px solid #999;
    width: 800px;
    height: 500px;
    position: relative;
    > div {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
  }
}
</style>