<template>
  <div>
    <div class="module-title">编码显示</div>
    <div class="module-item"><label>检查井标识码</label><el-switch v-model="wellpipeId"></el-switch></div>
    <div class="module-item"><label>管道标识码</label><el-switch v-model="cubepipeId"></el-switch></div>
    <div class="module-item"><label>检查井PBS编码</label><el-switch v-model="wellpbscode"></el-switch></div>
    <div class="module-item"><label>管道PBS编码</label><el-switch v-model="cubepbscode"></el-switch></div>
  </div>
</template>

<script>
import Config from './config.json'
export default {
    name:"CodeShow",//编码显示
    props:{
        apiurl:{}
    },
    data() {
      return {
        wellpipeId:false,
        cubepipeId:false,
        wellpbscode:false,
        cubepbscode:false,
      }
    },
    computed:{
      _apiurl: function () {
          return this.apiurl;
      },
      config:function(){
          return Config
      }
    },
    watch:{
        wellpipeId(n,o){
        	if(n){
               this.addCodeLabel("point", "PIPE_ID");
            }else{
               this.removeLabels();
            }
        },
        cubepipeId(n,o){
        	if(n){
               this.addCodeLabel("line", "PIPE_ID");
            }else{
               this.removeLabels();
            }
        },
        wellpbscode(n,o){
        	if(n){
               this.addCodeLabel("point", "CODE");
            }else{
               this.removeLabels();
            }
        },
        cubepbscode(n,o){
        	if(n){
               this.addCodeLabel("line", "CODE");
            }else{
               this.removeLabels();
            }
        },
    },
    mounted(){
        this._customDataSource = new Cesium.CustomDataSource('displayControlCodeShow');
        window.viewer.dataSources.add(this._customDataSource);
    },
    methods:{
        /**
         * 该方法用于添加
         * @param geotype
         * @param field 
         */
        addCodeLabel(geotype, field) {
            const layers = window.viewer.scene.layers;
            const datasetNames = [];
            this.config.pipe.forEach(item => {
                if (item.geometryType !== geotype) return true;
                const layer = layers.find(item.name);
                if (!layer) return true;
                if (item.geometryType === "line") {
                    datasetNames.push(item.datasource + ":" + item.dataset);
                } else {
                    datasetNames.push(item.datasource + ":" + item.tubewelldataset);
                }
            })
            const url = this._apiurl.sjfw;
            const whereclause = "1=1";
            const that = this;
            const onQueryComplete = function (result) {
                const features = result.originResult.features;
                features.map(feature => {
                    const code = feature.fieldValues;
                    const position = feature.geometry.position;
                    const card3 = Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z);
                    const entity = new Cesium.Entity({
                        position: card3,
                        label: {
                            font: '20px sans-serif',
                            text: code[0],
                            showBackground: true,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 300)
                        }
                    })
                    that._customDataSource.entities.add(entity);
                })
            }
            const onFailed = function (err) {
                console.log(err);
            }
            let options={
                url: url,
                datasetNames: datasetNames,
                fields: [field],
                whereclause: whereclause,
                completed: onQueryComplete,
                failed: onFailed
            }
            this.$emit("getFeaturesByAttribute",options)
        },
        removeLabels() {
            if (Cesium.defined(this._customDataSource)) {
                this._customDataSource.entities.removeAll();
            }
        },
        removeSource(){
            this.removeLabels()
            window.viewer.dataSources.remove(this._customDataSource)
        }
    }
}
</script>

<style lang="scss" scoped>
    .module-title{
        padding: 8px 20px;
        text-align: center;
        font-size: 1.0rem;
        background:#99c3e8;
    }
    .module-item{
        padding: 8px 20px;
        display: flex;
        justify-content: space-between;
        label{
            vertical-align: middle;
        }
    }
</style>