<template>
  <!-- 水务资产  右侧 -->
  <div class="centerbottmBox">
    <div class="TOP_Title shuziluansheng">
      <div class="flex_sbc p56 pbottom">
        <div class="top-title">数字孪生</div>
        <div class="tabData flex">
          <div
            class="eachClick"
            :class="active == item.value ? 'active' : ''"
            v-for="item in rightTabArr"
            :key="item.value"
            @click="tabClick(item)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="luanshengBottom">
      <div
        class="bottomitem"
        :class="bottomactive == item.value ? 'active' : ''"
        @click="bottomClick(item)"
        v-for="item in bottomshowArr"
        :key="item"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script setup name="shuziluanshengBox">
import bus from '@/bus';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
import { getImageUrl } from '@/utils/ruoyi';
const rightTabArr = ref([
  {
    label: '三维社区',
    value: '1',
  },
  {
    label: '三维泵站',
    value: '2',
  },
  {
    label: '三维管线',
    value: '3',
  },
  {
    label: '三维场景',
    value: '4',
  },
]);

const bottomshowArr = ref();

const shequArr = ref([
  {
    label: '水蓝郡',
    value: '1',
    easeTo: { center: [114.37237559831908, 30.465690931728275],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '锦绣良缘',
    value: '2',
    easeTo: { center: [114.36116641690938, 30.465031212461284],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '赵家池明渠',
    value: '3',
    easeTo: { center: [114.37933973676917, 30.448914882223832], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '三维雨水管道',
    value: '4',
  },
  {
    label: '三维污水管道',
    value: '5',
  },
]);
const bengzhanArr = ref([
  {
    label: '五家湖排江泵站',
    value: '1',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.60260472329406, 30.55206252978222],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '光谷转盘鲁磨路泵站',
    value: '2',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.39394626017497, 30.508365555418536], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '谷转盘珞喻路泵站',
    value: '3',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.40368321715408, 30.507588862101528], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '光谷一路泵站',
    value: '4',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.43310730417937, 30.49480696122025], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  }
]);
const guanxianArr = ref([
  {label: "东湖汇水区", value: '1', values: "建筑1,建筑2,道路1,道路2,东湖汇水区,东湖汇水区1,东湖汇水区2,东湖汇水区3", easeTo: { center: [114.550323492775,30.5382720884578], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "严东湖汇水区", value: '2', values: "建筑1,建筑2,道路1,道路2,严东湖汇水区,严东湖汇水区1,严东湖汇水区2,严东湖汇水区3", easeTo: { center: [114.550323492775,30.5382720884578], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "严家湖车墩湖汇水区", value: '3', values: "建筑1,建筑2,道路1,道路2,严家湖车墩湖汇水区,严家湖车墩湖汇水区1,严家湖车墩湖汇水区2,严家湖车墩湖汇水区3", easeTo: { center: [114.600745064958,30.4978300454143], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "严西湖汇水区", value: '4', values: "建筑1,建筑2,道路1,道路2,严西湖汇水区,严西湖汇水区1,严西湖汇水区2,严西湖汇水区3", easeTo: { center: [114.49332785646534,30.548416502857624], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "南湖汇水区", value: '5', values: "建筑1,建筑2,道路1,道路2,南湖汇水区,南湖汇水区1,南湖汇水区2,南湖汇水区3", easeTo: { center: [114.389327654337,30.4883642972675], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "汤逊湖汇水区", value: '6', values: "建筑1,建筑2,道路1,道路2,汤逊湖汇水区,汤逊湖汇水区1,汤逊湖汇水区2,汤逊湖汇水区3", easeTo: { center: [114.4203037656968,30.458920133194635], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "牛山湖汇水区", value: '7', values: "建筑1,建筑2,道路1,道路2,牛山湖汇水区,牛山湖汇水区1,牛山湖汇水区2,牛山湖汇水区3", easeTo: { center: [114.50442891370781,30.348485541669035], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "豹澥湖汇水区", value: '8', values: "建筑1,建筑2,道路1,道路2,豹澥湖汇水区,豹澥湖汇水区1,豹澥湖汇水区2,豹澥湖汇水区3", easeTo: { center: [114.52707636588052,30.442010640580566], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "龙王嘴污水系统", value: '9', values: "建筑1,建筑2,道路1,道路2,龙王嘴污水系统,龙王嘴污水系统1,龙王嘴污水系统2,龙王嘴污水系统3", easeTo: { center: [114.389327654337,30.4883642972675], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "左岭污水系统", value: '9', values: "建筑1,建筑2,道路1,道路2,左岭污水系统,左岭污水系统1,左岭污水系统2,左岭污水系统3", easeTo: { center: [114.59265937188802,30.51014055424194], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "汤逊湖污水系统", value: '10', values: "建筑1,建筑2,道路1,道路2,汤逊湖污水系统,汤逊湖污水系统1,汤逊湖污水系统2,汤逊湖污水系统3", easeTo: { center: [114.41668398629858,30.44452547927234], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "王家店污水系统", value: '11', values: "建筑1,建筑2,道路1,道路2,王家店污水系统,王家店污水系统1,王家店污水系统2,王家店污水系统3", easeTo: { center: [114.4771334436482,30.515588753000188], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "花山污水系统", value: '12', values: "建筑1,建筑2,道路1,道路2,花山污水系统,花山污水系统1,花山污水系统2,花山污水系统3", easeTo: { center: [114.51976369655115,30.54552602357337], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
  {label: "豹澥污水系统", value: '13', values: "建筑1,建筑2,道路1,道路2,豹澥污水系统,豹澥污水系统1,豹澥污水系统2,豹澥污水系统3", easeTo: { center: [114.51211452644844,30.38805844036268], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17}},
]);
const changjingArr = ref([
/*  {
    label: '江南泵站',
    value: 'q1',
    values: '江南泵站',
    url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v1.json',
    easeTo: { center: [114.26285547941757, 30.49905022989863], zoom: 17.5, pitch: 60.137987545556804, bearing: 108.7 },
  },
  {
    label: '汤逊湖泵站',
    value: 'q2',
    values: '汤逊湖泵站',
    url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v2.json',
    easeTo: { center: [114.22880212973843, 30.45179545680257], zoom: 17.5, pitch: 64.69055791957466, bearing: 108.7 },
  },
  {
    label: '白沙洲长江大桥',
    value: 'q3',
    values: '白沙洲长江大桥',
    url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v3.json',
    easeTo: { center: [114.25047535415115, 30.48219212521819], zoom: 17.5, pitch: 76.24070062592385, bearing: 108.7 },
  },
  {
    label: '管网',
    value: '管网',
    values: '管网',
    url: 'http://localhost:9992/WSL12191440/3dtiles/tileset.json',
    easeTo: {"zoom": 16.59407171571377, "center": [114.390913858453,30.4432351724798], "pitch": 64.9999999999998, "bearing": 0},
  },*/
  {
    label: '龙王嘴污水处理厂',
    value: '龙王嘴污水处理厂',
    values: '龙王嘴污水处理厂',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/1fenqu/tileset.json',
    easeTo: {"zoom": 16.59407171571377, "center": [114.3705429075477, 30.492439863093296], "pitch": 64.9999999999998, "bearing": 0},
  },
  {
    label: '洪山高级中学',
    value: '洪山高级中学',
    values: '洪山高级中学',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/2fenqu/tileset.json',
    easeTo: {"zoom": 17.81287927129665, "center": [114.38089058306196, 30.49322975938621], "pitch": 73.1403666953906, "bearing": 29.79517258244755},
  },
  {
    label: '中南民族大学',
    value: '中南民族大学',
    values: '中南民族大学',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/3fenqu/tileset.json',
    easeTo: {"zoom": 17.233580151793813, "center": [114.38786465157301, 30.49109786555684], "pitch": 64.99999999999974, "bearing": -14.399999999999864},
  },
  {
    label: '武汉纺织大学南湖校区',
    value: '武汉纺织大学南湖校区',
    values: '武汉纺织大学南湖校区',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/4fenqu/tileset.json',
    easeTo: {"zoom": 18.116267047007025, "center": [114.3927768535928, 30.48824237671211], "pitch": 71.44305293120455, "bearing": 37.51014089090722},
  },
  {
    label: '中建大公馆',
    value: '中建大公馆',
    values: '中建大公馆',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/5fenqu/tileset.json',
    // url: 'http://localhost:9992/1214/3dtile-x/5fenqu/tileset.json',
    easeTo: {"zoom": 17.251138347641298, "center": [114.4020023147911, 30.484443483567972], "pitch": 66.99999999999989, "bearing": -25.600000000000136},
  },
  {
    label: '保利国际中心',
    value: '保利国际中心',
    values: '保利国际中心',
    // url: 'http://localhost:9992/1214/3dtile-x/6fenqu/tileset.json',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/6fenqu/tileset.json',
    easeTo: {"zoom": 17.687188362054506, "center": [114.40307345195083, 30.493463072026188], "pitch": 71.99999999999976, "bearing": -38.39999999999998},
  },
  {
    label: '北辰光谷里',
    value: '北辰光谷里',
    values: '北辰光谷里',
    // url: 'http://localhost:9992/1214/3dtile-x/7fenqu/tileset.json',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/7fenqu/tileset.json',
    easeTo: {"zoom": 17.06523812182194, "center": [114.41040402249132, 30.484048091956765], "pitch": 59.4999999999999, "bearing": -37.36697917780225},
  },
  {
    label: 'K11Select',
    value: 'K11Select',
    values: 'K11Select',
    // url: 'http://localhost:9992/1214/3dtile-x/8fenqu/tileset.json',
    url: 'https://dhgx10.wh-nf.cn:7081/resource/3dtiles/gxq/batch_1/8fenqu/tileset.json',
    easeTo: {"zoom": 16.779971941533105, "center": [114.40929977258014, 30.492555333756428], "pitch": 65.17673025474492, "bearing": 50.399999999999864},
  }
]);
const active = ref(1);
const bottomactive = ref(1);

const tabClick = item => {
  active.value = item.value;
  switch (item.value) {
    case '1':
      bottomshowArr.value = shequArr.value;
      bottomactive.value = '1';
      break;
    case '2':
      bottomshowArr.value = bengzhanArr.value;
      bottomactive.value = '1';
      break;
    case '3':
      bottomshowArr.value = guanxianArr.value;
      bottomactive.value = '1';
      break;
    case '4':
      bottomshowArr.value = changjingArr.value;
      bottomactive.value = '1';
      break;
  }
};
const bottomClick = item => {
  bottomactive.value = item.value;
  if (active.value == '4') return operationScene(item);
  [...bengzhanArr.value, ...guanxianArr.value]
    .map(i => (i.values || '').split(','))
    .flat()
    .forEach(key => operationLayer(key, false));
  (item.values || '').split(',').forEach(key => operationLayer(key, true));
  item.easeTo && newfiberMap.map.easeTo(item.easeTo);
};

const operationScene = item => {
  bus.emit('load3DTiles', { id: item.label, url: item.url });
  item.easeTo && newfiberMap.map.easeTo(item.easeTo);
};

const events_params = {
  setHighlight: { key: 'setHighlight' },
  setLayerVisible: { key: 'setLayerVisible' },
};
const operationLayer = (name, visible) => {
  const { setLayerVisible, setHighlight } = events_params;
  bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
};

function change3Dtiles(e) {
  // bus.emit('change3Dtiles');
}

onMounted(() => {
  bottomshowArr.value = shequArr.value;

  bus.on('changeThreedimensional', e => {
    console.log('收到来自语音调度的修改', e);
    change3Dtiles(e);
  });
});

onBeforeUnmount(() => {
  bus.off('changeThreedimensional');

  [...bengzhanArr.value, ...guanxianArr.value]
    .map(i => (i.values || '').split(','))
    .flat()
    .forEach(key => operationLayer(key, false));

  bus.emit('remove3Dtiles');
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/WaterAssets.scss';

.luanshengBottom {
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  overflow-x: auto;
  padding-top: 15px;
  padding-left: 15px;

  .bottomitem {
    cursor: pointer;
    width: 136px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 10px;
    background: linear-gradient(180deg, #0c2156 0%, #2291e1 100%);
    border-radius: 15px;
    border: 1px solid #2291e1;
    // border-image: linear-gradient(0deg, #308fee, #2abffa, #308fee) 10 10;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 14px;
    color: #e0e5fa;

    &.active {
      background: linear-gradient(0deg, #0c3f57 0%, #1dd0c7 100%);
      border-radius: 15px;
      border: 1px solid #27f1c6;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>