<template>
  <div class="widget-baseimageopacity">
    <el-input type="number" min="0" step="10" max="100" v-model="opacity">
      <template slot="prepend">透明度:</template>
      <template slot="append"><span style="color: #006ed4">%</span></template>
    </el-input>
  </div>
</template>
<script>
export default {
  name: "BaseImageOpacity",
  props:{
      isInit:false//三维场景是否初始化
  },
  data() {
    return {
      opacity: 0,
      disvisiblelayers:["Config"],
      g_modelTransparent:false
    };
  },
  watch:{
      opacity(newVal){
          this.changeOpacity(newVal)
      },
      isInit(){
        this.viewer=window.viewer;
      }
  },
  methods:{
      changeOpacity(newVal){
          const val=parseFloat(newVal);
            const alpha=parseFloat((1-val/100).toString());
            const layers=this.disVisibleLayers;
            if(this.g_modelTransparent && layers.length>0){
                this.viewer.scene.layers.layerQueue.forEach(layer=>{
                    if(_.indexOf(layers,layer.name)!==-1){
                        layer.style3D.fillForeColor.alpha=alpha;
                    } 
                })
            }
            this.viewer.scene.globe.globeAlpha=1 - val/100;
            for (var i = 0; i < this.viewer.scene.imageryLayers.length; i++) {
                var ly = this.viewer.scene.imageryLayers.get(i);
                ly.alpha =alpha;
            }      
      }
  }
};
</script>
<style lang="scss" scoped>
.widget-baseimageopacity {
  border-radius: 5px;
  position: absolute;
  font-family: Arial;
  left: 654px;
  padding-left: 4px;
  padding-right: 5px;
  color: #fff;
  font-size: 12px;
  z-index: 100;
  top: 13px;
  height: 36px;
  ::v-deep .el-input__inner {
    width: 35px;
    height: 36px;
    padding: 0;
    border: none;
    color: #006ed4;
  }
  ::v-deep .el-input {
    .el-input-group__append,
    .el-input-group__prepend {
      font-size: 0.875rem;
      color: #666666;
      padding: 0.275rem 0.45rem;
      background-color: #fff;
      border: none;
      font-family: Source Han Sans CN;
    }
  }
}
</style>