<template>
  <div class="common-page device-manage">
    <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">
            <el-tab-pane label="装车点" name="first">
              <el-cascader v-model="entruckingValue1" :options="entruckingData" @change="handleChange1"></el-cascader>
              <div class="button-box">
                <el-button size="mini" type="primary">保存</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="控制点" name="second">
              <label class="el-form-item-label" style="font-weight: 500">控制点名称</label>
              <el-input v-model="query.name" clearable size="small" placeholder="请输入控制点名称" style="width: 180px"/>
            </el-tab-pane>
            <el-tab-pane label="卸车点" name="third">
              <el-cascader v-model="detrainingValue2" :options="detrainingData" @change="handleChange2"></el-cascader>
              <div class="button-box">
                <el-button size="mini" type="primary">保存</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</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:[],
      //选择关键点类型
      activeName: "",
      //装卸车点名称
      entruckingValue1: [],
      detrainingValue2: [],
    };
  },
  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;
          })  
				};
			})
    },
    //修改初始值
    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.addKeyPointsAble = true;
      this.$refs.mars3dViewerMapMethod.btnStartDraw();
    },
    handleChange1() {
      console.log(this.entruckingValue1);
    },
    handleChange2() {

    },
    // 地图构造完成回调
		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;
}

.device-manage {
  .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 {
      width: 1700px;
      height: 300px;
      //background: red;
      display: flex;
      display: -webkit-flex;
      -webkit-flex-direction: row;
    }
    .content-within {
      
    }
    .content-right {
      width: 450px;
      .button-box {
        width: 300px;
        height: 200px;
        position: relative;
        bottom: -160px;
      }
      //background: yellow;
    }
  }
  .contentRight{
    width: 300px;
    position: absolute;
    right: 3vw;
    .button-box {
        width: 300px;
        height: 200px;
        position: relative;
        bottom: -160px;
      }
  }
}
.mapcontainer3 {
  height: 50vh;
  width: 750px;
  overflow: hidden;
  margin-bottom: 10px;
}
.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>