<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: '南湖汇水区',
    easeTo: { center: [114.39293842299662, 30.482790194236813], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '南湖片区三维污水',
    value: '2',
    values: '龙王嘴污水系',
    easeTo: { center: [114.39293842299662, 30.482790194236813], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  },
  {
    label: '豹澥片区三维雨水',
    value: '3',
    values: '豹澥湖汇水区',
    easeTo: { center: [114.45895478865708, 30.459740968619386], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17 },
  },
  {
    label: '豹澥片区三维污水',
    value: '4',
    values: '豹澥污水系统',
    easeTo: { center: [114.45895478865708, 30.459740968619386], zoom: 13.25419672401314, pitch: 45.95516160507156 },
  },
]);
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: 'https://supermap10.wh-nf.cn:8090/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://supermap10.wh-nf.cn:8090/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://supermap10.wh-nf.cn:8090/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://supermap10.wh-nf.cn:8090/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://supermap10.wh-nf.cn:8090/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://supermap10.wh-nf.cn:8090/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://supermap10.wh-nf.cn:8090/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://supermap10.wh-nf.cn:8090/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';
    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>