<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], zoom: 16.592513889307796, pitch: 30.499999999999996 },
  },
  {
    label: '锦绣良缘',
    value: '2',
    easeTo: { center: [114.36116641690938, 30.465031212461284], zoom: 15.969306941187698, pitch: 30.499999999999996 },
  },
  {
    label: '赵家池明渠',
    value: '3',
    easeTo: { center: [114.37933973676917, 30.448914882223832], zoom: 14.934192090823457, pitch: 46.999999999999986 },
  },
  {
    label: '三维雨水管道',
    value: '4',
  },
  {
    label: '三维污水管道',
    value: '5',
  },
]);
const bengzhanArr = ref([
  {
    label: '五家湖排江泵站',
    value: '1',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.60260472329406, 30.55206252978222], zoom: 16.215094024814835, pitch: 44.000000000000036 },
  },
  {
    label: '光谷转盘鲁磨路泵站',
    value: '2',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.39394626017497, 30.508365555418536], zoom: 16.445198377466205, pitch: 46.999999999999986 },
  },
  {
    label: '谷转盘珞喻路泵站',
    value: '3',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.40368321715408, 30.507588862101528], zoom: 16.59661056553436, pitch: 46.999999999999986 },
  },
  {
    label: '光谷一路泵站',
    value: '4',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.43310730417937, 30.49480696122025], zoom: 16.097541520554135, pitch: 44.000000000000036 },
  },
  {
    label: '汤逊湖泵站',
    value: '5',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.22475599481544, 30.451261386294632], zoom: 15.830580617276702, pitch: 30.499999999999996 },
  },
  {
    label: '江南泵站',
    value: '6',
    values: 'rain_water_pump_station_info',
    easeTo: { center: [114.26307620050528, 30.49894807151594], zoom: 16.34294610016813, pitch: 28.95516160507152 },
  },
]);
const guanxianArr = ref([
  {
    label: '南湖片区三维雨水',
    value: '1',
    values: '南湖汇水区',
    easeTo: { center: [114.39293842299662, 30.482790194236813], zoom: 14.127553460727091, pitch: 45.95516160507156 },
  },
  {
    label: '南湖片区三维污水',
    value: '2',
    values: '龙王嘴污水系',
    easeTo: { center: [114.39293842299662, 30.482790194236813], zoom: 14.127553460727091, pitch: 45.95516160507156 },
  },
  {
    label: '豹澥片区三维雨水',
    value: '3',
    values: '豹澥湖汇水区',
    easeTo: { center: [114.45895478865708, 30.459740968619386], zoom: 13.25419672401314, pitch: 45.95516160507156 },
  },
  {
    label: '豹澥片区三维污水',
    value: '4',
    values: '豹澥污水系统',
    easeTo: { center: [114.45895478865708, 30.459740968619386], zoom: 13.25419672401314, pitch: 45.95516160507156 },
  },
]);
const changjingArr = ref([
  {
    label: '江南泵站',
    value: '1',
    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: '2',
    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: '3',
    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 },
  },
]);
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;
    background: linear-gradient(0deg, rgba(37, 61, 101, 0.8) 0%, rgba(37, 61, 101, 0.1) 100%);
    border-radius: 15px;
    border: 1px solid #8196b9;
    color: #8fbffe;
    margin-left: 10px;
    font-size: 12px;

    &.active {
      background: linear-gradient(0deg, rgba(81, 136, 176, 0.8) 0%, rgba(126, 214, 255, 0.1) 100%);
      border-radius: 15px;
      border: 1px solid #7ed6ff;
      color: #ffffff;
    }
  }
}
</style>