<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__fadeInUp"
    leave-active-class="animate__fadeOutDown"
  >
    <div class="widget-SectorToolbar" ref="widget-SectorToolbar">
      <transition
        appear
        name="animate__animated animate__move"
        enter-active-class="animate__rotateInDownRight"
        leave-active-class="animate__rotateOutDownRight"
      >
        <div class="innerFan" v-if="isShowChildTool">
          <div class="innerFan-item" v-for="item of innerToolList" :key="item.name" v-show="isFold">
            <el-tooltip effect="dark" :content="item.name" placement="right">
              <div class="innerFan-content" @click="activeEvent(item)">
                <img v-if="item.name == '数据面板'" :src="dataPanelImg" />
                <el-popover v-if="item.name == '基础地图'" placement="left" trigger="hover">
                  <div class="baseMapChangePanel">
                    <div
                      class="baseMapItem"
                      v-for="item of baseMapList"
                      :key="item.name"
                      :class="selectTdtType === item.TdtType ? 'layerselected' : ''"
                    >
                      <el-checkbox
                        v-model="labelOn"
                        class="baseMapItemLabel"
                        label="注记"
                        @change="layerLabelCheckChange(item.TdtType, item.PoiType, $event)"
                        :class="{ baseMapItemLabelHide: selectTdtType !== item.TdtType }"
                      ></el-checkbox>
                      <div class="baseMapItemName">{{ item.name }}</div>
                      <el-image
                        class="baseMapItemImage"
                        :src="item.url"
                        fit="cover"
                        @click="layerItemClick(item.TdtType, item.PoiType)"
                      ></el-image>
                    </div>
                  </div>
                  <img slot="reference" :src="item.imgUrl" />
                </el-popover>
                <img v-if="item.name !== '基础地图' && item.name !== '数据面板'" :src="item.imgUrl" />
              </div>
            </el-tooltip>
          </div>
        </div>
      </transition>
      <transition
        appear
        name="animate__animated animate__move"
        enter-active-class="animate__rotateInUpRight"
        leave-active-class="animate__rotateOutUpRight"
      >
        <div class="outerFan" v-if="isShowChildTool">
          <div class="outerFan-item" v-for="item of outerToolList" :key="item.name" v-show="isFold">
            <el-tooltip effect="dark" :content="item.name" placement="right" transition="el-zoom-in-center">
              <div class="outerFan-content" @click="activeEvent(item)">
                <img v-if="item.name !== '属性查看'" :src="item.imgUrl" />
                <el-popover v-if="item.name == '属性查看'" placement="top" trigger="hover">
                  <div class="propertiesViewPanel">
                    <el-button
                      type="primary"
                      size="small"
                      v-for="item of propertiesList"
                      :key="item.name"
                      @click="activeProperties(item.key)"
                      >{{ item.name }}</el-button
                    >
                  </div>
                  <img slot="reference" :src="item.imgUrl" />
                </el-popover>
              </div>
            </el-tooltip>
          </div>
        </div>
      </transition>
      <div class="foldBtn" @click="isShowChildTool = !isShowChildTool">
        <el-tooltip effect="dark" content="工具栏" placement="right" transition="el-zoom-in-center">
          <img :src="require('@/views/groupPage/images/工具栏/初视点.png')" />
        </el-tooltip>
      </div>
      <div class="roam-panel" v-show="isRoaming">
        <ViewManagement :show="isRoaming" />
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ViewManagement from '@/views/groupPage/districtPageModules/customTools/viewManagement.vue'
import monitorTree from '@/views/groupPage/districtPageModules/customTools/monitorTree.vue'
import layerControl from '@/views/groupPage/districtPageModules/customTools/layerControl.vue'
import PropertiesView from '@/views/groupPage/districtPageModules/commonModules/PropertiesView.vue'
const Cesium = (window as any).Cesium
const viewMemoryType = {
  none: 'none',
  pre: 'pre',
  after: 'after'
} //记录视图
//扇形工具栏
@Component({ name: 'SectorToolbar', components: { ViewManagement } })
export default class SectorToolbar extends Vue {
  baseMapList: Array<any> = [
    {
      name: '电子地图',
      url: require('@/views/groupPage/images/工具栏/电子地图.png'),
      TdtType: 'vec_w',
      PoiType: 'cva_w'
    },
    {
      name: '影像地图',
      url: require('@/views/groupPage/images/工具栏/影像地图.png'),
      TdtType: 'img_w',
      PoiType: 'cia_w'
    },
    //{ name: '大屏地图', url: require('@/views/groupPage/images/工具栏/大屏地图.png'), TdtType: 'bs_w', PoiType: '' }
  ]
  labelOn: boolean = true
  selectTdtType = 'vec_w'
  innerToolList: Array<any> = [
    { name: '数据面板' },
    { imgUrl: require('@/views/groupPage/images/工具栏/俯视.png'), name: '俯视' },
    { imgUrl: require('@/views/groupPage/images/工具栏/初始范围.png'), name: '初始范围' },
    { imgUrl: require('@/views/groupPage/images/工具栏/基础地图.png'), name: '基础地图' }
  ]
  outerToolList: Array<any> = [
    { imgUrl: require('@/views/groupPage/images/工具栏/搜索栏.png'), name: '搜索栏' },
    { imgUrl: require('@/views/groupPage/images/工具栏/属性查看.png'), name: '属性查看' },
    { imgUrl: require('@/views/groupPage/images/工具栏/图层控制.png'), name: '图层控制', com: layerControl },
    { imgUrl: require('@/views/groupPage/images/工具栏/设备监测树.png'), name: '设备监测树', com: monitorTree },
    { imgUrl: require('@/views/groupPage/images/工具栏/漫游.png'), name: '漫游' }
  ]
  propertiesList: Array<any> = [
    { name: '点选查看', key: 'point' },
    { name: '框选查看', key: 'rect' },
    { name: '构件查看', key: 'component' },
    { name: '清除', key: 'clear' }
  ]
  dataPanelImg = null
  unfoldUrl = require('@/views/groupPage/images/工具栏/展开.png')
  foldUrl = require('@/views/groupPage/images/工具栏/收起.png')
  isFold: boolean = true
  isShowChildTool: boolean = true //子工具集
  isRoaming: boolean = false //漫游面板
  g_preViews = [] //前一视图
  g_afterViews = [] //后一视图
  g_viewType = viewMemoryType.none //前或后视图
  propertiesViewCom = null //属性查看组件
  viewer
  get mapConfig() {
    return this.$store.state.bigScreen.mapConfig
  }
  get isInitViewer() {
    return this.$store.state.bigScreen.isInitViewer
  }
  get isDataPanelShow() {
    return this.$store.state.bigScreen.currentActive
  }
  @Watch('isInitViewer')
  onChangeMethod(val) {
    if (val) {
      this.viewer = (window as any).viewer
      this.layerItemClick('img_w', 'cia_w')
      this.cameraMoveEvent()
    }
  }
  @Watch('isDataPanelShow', { immediate: true })
  onShowMethod(n) {
    if (n != '') {
      this.dataPanelImg = require('@/views/groupPage/images/工具栏/收起-面板.png')
    } else {
      this.dataPanelImg = require('@/views/groupPage/images/工具栏/展开-面板.png')
    }
  }
  mounted() {
    let target = this.$refs['widget-SectorToolbar'] as any
    target.style.setProperty('--right', '2.291667rem')
    target.style.setProperty('--bottom', '0.052083rem')
  }
  activeEvent(item) {
    let type = item.name
    switch (type) {
      case '初始范围':
        this.initPosition()
        break
      case '俯视':
        this.lookDown()
        break
      case '漫游':
        this.roaming()
        break
      case '数据面板':
        this.activePanel()
        break
      case '搜索栏':
        this.$store.state.bigScreen.isShowSearchBox = !this.$store.state.bigScreen.isShowSearchBox
        break
      case '图层控制':
        this.$store.dispatch('bigScreen/changeToolList', item)
        break
      case '设备监测树':
        this.$store.dispatch('bigScreen/changeToolList', item)
        break
    }
  }
  activePanel() {
    if (this.$store.state.bigScreen.currentActive != ''&&this.$store.state.bigScreen.currentActive != null) {
      this.$store.state.bigScreen.currentActive = ''
    } else {
      this.$store.state.bigScreen.currentActive = 'ProjectPanoramic'
    }
  }
  //初始位置
  initPosition() {
    // this.viewer.camera.setView(this.$store.state.bigScreen.initView)
    this.viewer.camera.flyTo({ ...this.$store.state.bigScreen.initView })
  }
  //地图视图移动事件
  cameraMoveEvent() {
    this.viewer.camera.moveStart.addEventListener((e) => {
      const camera = this.viewer.camera
      const pos = Cesium.Cartesian3.clone(camera.position)
      const heading = camera.heading
      const pitch = camera.pitch
      const roll = camera.roll
      const view = {
        destination: pos,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      }
      if (this.g_viewType === viewMemoryType.none) {
        this.g_afterViews.length = 0
        this.g_afterViews = []
        if (this.g_preViews && this.g_preViews.length === 10) {
          this.g_preViews.shift()
        }
        this.g_preViews.push(view)
      } else if (this.g_viewType === viewMemoryType.pre) {
        if (this.g_afterViews && this.g_afterViews.length === 10) {
          this.g_afterViews.shift()
        }
      } else {
        if (this.g_preViews && this.g_preViews.length === 10) {
          this.g_preViews.shift()
        }
      }
      this.g_viewType = viewMemoryType.none
    })
  }
  //俯视
  lookDown() {
    const camera = this.viewer.camera
    camera.flyTo({
      destination: camera.position,
      orientation: {
        // 视角
        heading: 0,
        pitch: Cesium.Math.toRadians(-90),
        roll: camera.roll
      }
    })
  }
  //漫游面板操作
  roaming() {
    this.isRoaming = true
  } //地图选择面板点击事件
  layerItemClick(layerType, poiType) {
    // this.$message.info('网络安全原因，暂时无法切换！')
    // return
    if (layerType === this.selectTdtType) return
    this.initTianditu(layerType, poiType)
    this.labelOn = true
    this.selectTdtType = layerType
  }
  //切换加载天地图
  initTianditu(layerType, poiType) {
    const layerName = layerType.split('_')[0]
    const poiName = poiType.split('_')[0]
    //地形影像高级别无图
    const maximumLevel = layerType === 'ter_w' ? 13 : 17
    const token = this.$store.state.bigScreen.tdttoken
    const url =
      'https://t{s}.tianditu.gov.cn/' +
      layerType +
      '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
      layerName +
      '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
      token
    const poiurl =
      'https://t{s}.tianditu.gov.cn/' +
      poiType +
      '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
      poiName +
      '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
      token
    const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
    const imagelayers = this.viewer.imageryLayers
    const layerlen = imagelayers.length
    //清除所有底图
    const removedLayers = []
    for (let i = 0; i < layerlen; i++) {
      const layer = imagelayers.get(i)
      const provider = layer.imageryProvider
      if (
        provider.credit &&
        (provider.credit.html === 'tianditu_base' ||
          provider.credit.html === 'tianditu_poi' ||
          provider.credit.html === 'chinavec2d')
      ) {
        removedLayers.push(layer)
      }
    }
    removedLayers.forEach((item) => {
      imagelayers.remove(item)
    })
    //添加大屏底图
    if (layerType == 'bs_w') {
      this.initBigScreenBaseMap()
      return
    }
    //添加图层
    const imglayer = new Cesium.WebMapTileServiceImageryProvider({
      //影像底图
      url: new Cesium.Resource({
        url: url,
        headers: {
          Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
        }
      }),
      subdomains,
      credit: 'tianditu_base',
      layer: 'tdtVecLayer',
      style: 'default',
      maximumLevel: maximumLevel,
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
      show: true
    })

    const poilayer = new Cesium.WebMapTileServiceImageryProvider({
      url: new Cesium.Resource({
        url: poiurl,
        headers: {
          Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
        }
      }),
      subdomains: subdomains,
      credit: 'tianditu_poi',
      layer: 'tdtCvaLayer',
      style: 'default',
      format: 'image/jpeg',
      maximumLevel: maximumLevel,
      tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
      show: true
    })
    imagelayers.addImageryProvider(imglayer, 1)

    imagelayers.addImageryProvider(poilayer, 2)
  }
  //注记勾选事件
  layerLabelCheckChange(layerType, poiType, event) {
    const token = this.$store.state.bigScreen.tdttoken
    const poiName = poiType.split('_')[0]
    const poiurl =
      'https://t{s}.tianditu.gov.cn/' +
      poiType +
      '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
      poiName +
      '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
      token
    const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
    const imagelayers = this.viewer.imageryLayers
    const check = event
    if (check) {
      const poilayer2 = new Cesium.WebMapTileServiceImageryProvider({
        url: new Cesium.Resource({
          url: poiurl,
          headers: {
            Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
          }
        }),
        subdomains: subdomains,
        credit: 'tianditu_poi',
        layer: 'tdtCvaLayer',
        style: 'default',
        format: 'image/jpeg',
        maximumLevel: 17,
        tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
        show: true
      })
      imagelayers.addImageryProvider(poilayer2, 2)
    } else {
      for (let i = 0; i < imagelayers.length; i++) {
        const layer = imagelayers.get(i)
        const provider = layer.imageryProvider
        if (provider.credit && provider.credit.html === 'tianditu_poi') {
          imagelayers.remove(layer)
          break
        }
      }
    }
  }
  //初始化加载大屏底图
  initBigScreenBaseMap() {
    // this.layerItemClick('vec_w', 'cva_w')
    const imagelayers = this.viewer.imageryLayers
    const url = this.mapConfig.gisResource.img.config['chinavec2d'].url
    const imglayer = new Cesium.SuperMapImageryProvider({
      url: url,
      credit: 'chinavec2d'
    })
    imagelayers.addImageryProvider(imglayer, 1)
  }
  //属性查看内容
  activeProperties(key) {
    if (!this.propertiesViewCom) {
      const PropertiesViewConstructor = Vue.extend(PropertiesView)
      this.propertiesViewCom = new PropertiesViewConstructor({
        store: this.$store
      }).$mount()
    }
    switch (key) {
      case 'point':
        this.propertiesViewCom.pipeUnitInfo('point')
        break
      case 'rect':
        this.propertiesViewCom.pipeUnitInfo('rect')
        break
      case 'component':
        this.propertiesViewCom.activeViewComponent()
        break
      case 'clear':
        this.propertiesViewCom.destroyLastOperation()
        break
    }
  }
}
</script>
<style lang="scss">
.baseMapChangePanel {
  display: flex;
  .baseMapItem {
    margin: 0 0.03125rem; /* 6/192 */
    width: 0.416667rem /* 80/192 */;
    height: 0.416667rem /* 80/192 */;
    position: relative;
  }
  .baseMapItem.layerselected {
    border: 1px solid rgba(51, 133, 255, 1);
  }
  .baseMapItemLabel {
    width: 100%;
    position: absolute;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
  }
  .baseMapItemLabelHide {
    display: none;
  }
  .baseMapItemImage {
    height: 100%;
    width: 100%;
  }
  .baseMapItemName {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
  }
}
.propertiesViewPanel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.052083rem /* 10/192 */;
  place-items: center start;
  .el-button {
    margin-left: 0;
    width: 100%;
  }
}
</style>
<style lang="scss" scoped>
.animate__fadeInUp,
.animate__fadeOutDown {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-SectorToolbar {
  z-index: 2;
  //position
  bottom: var(--bottom); //0.052083rem /* 10/192 */;
  margin-right: var(--right); //2.291667rem /* 440/192 */;
  position: absolute;
  right: 0;
  //size
  //background
  color: #eee;
  //font
  font-family: Source Han Sans CN;
  .foldBtn {
    position: absolute;
    width: 0.260417rem /* 50/192 */;
    height: 0.260417rem /* 50/192 */;
    border-radius: 100% 0 0 0;
    background-color: rgba(126, 201, 255, 0.18);
    bottom: 0;
    right: 0;
    img {
      height: 0.125rem /* 24/192 */;
      width: 0.125rem /* 24/192 */;
      object-fit: contain; //保持原有尺寸比例。内容被缩放。
      position: absolute;
      bottom: 0.041667rem /* 8/192 */;
      right: 0.041667rem /* 8/192 */;
    }
  }
  .innerFan {
    // padding-top: 0.260417rem /* 50/192 */;
    // padding-left: 0.260417rem /* 50/192 */;
    // border-top: 0.15625rem /* 30/192 */ solid;
    // border-left: 0.15625rem /* 30/192 */ solid;
    // border-top-color: rgba(29, 48, 65, 0.8);
    // border-left-color: rgba(29, 48, 65, 0.8);
    display: inline-block;
    border-radius: 2.083333rem /* 400/192 */ 0 0 0;
    pointer-events: none;
  }
  .outerFan {
    padding-top: 0.260417rem /* 50/192 */;
    padding-left: 0.260417rem /* 50/192 */;
    border-top: 0.3125rem /* 60/192 */ solid;
    border-left: 0.3125rem /* 60/192 */ solid;
    border-top-color: rgba(21, 35, 50, 0.7);
    border-left-color: rgba(21, 35, 50, 0.7);
    display: inline-block;
    pointer-events: none;
    border-radius: 2.083333rem /* 400/192 */ 0 0 0;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }

  .innerFan-item,
  .outerFan-item {
    img {
      height: 0.09375rem /* 18/192 */;
      width: 0.09375rem /* 18/192 */;
      object-fit: contain; //保持原有尺寸比例。内容被缩放。
    }
  }
  .innerFan-item {
    position: absolute;
    padding-bottom: 0.260417rem /* 50/192 */;
    padding-left: 0.260417rem /* 50/192 */;
    right: 0;
    bottom: 0;
    transform-origin: right bottom;
    border-radius: 2.083333rem /* 400/192 */ 0 0 0;
    cursor: pointer;
  }
  .outerFan-item {
    position: absolute;
    padding-bottom: 0.416667rem /* 80/192 */;
    padding-left: 0.416667rem /* 80/192 */;
    right: 0;
    bottom: 0.010417rem /* 2/192 */;
    transform-origin: right bottom;
    border-radius: 2.083333rem /* 400/192 */ 0 0 0;
    cursor: pointer;
  }

  .innerFan-item:nth-child(1) {
    transform: rotate(0deg);
  }

  .innerFan-item:nth-child(2) {
    transform: rotate(-22.5deg);
  }

  .innerFan-item:nth-child(3) {
    transform: rotate(-45deg);
  }

  .innerFan-item:nth-child(4) {
    transform: rotate(-67.5deg);
  }
  //
  .outerFan-item:nth-child(1) {
    transform: rotate(0deg);
  }

  .outerFan-item:nth-child(2) {
    transform: rotate(-18deg);
  }

  .outerFan-item:nth-child(3) {
    transform: rotate(-36deg);
  }

  .outerFan-item:nth-child(4) {
    transform: rotate(-54deg);
  }
  .outerFan-item:nth-child(5) {
    transform: rotate(-72deg);
  }

  .innerFan-content {
    position: absolute;
    font-size: 0.104167rem /* 20/192 */;
    color: green;
    left: 0.15625rem /* 30/192 */;
    top: -0.130208rem /* 25/192 */;
    pointer-events: initial;
  }
  .outerFan-content {
    position: absolute;
    font-size: 0.104167rem /* 20/192 */;
    color: green;
    left: 0.28125rem /* 54/192 */;
    top: -0.104167rem /* 20/192 */;
    pointer-events: initial;
  }
  .innerFan-content:hover,
  .outerFan-content:hover {
    img {
      height: 0.104167rem /* 20/192 */;
      width: 0.104167rem /* 20/192 */;
    }
  }

  .roam-panel {
    position: absolute;
    width: 1.354167rem /* 260/192 */;
    height: 1.546875rem /* 297/192 */;
    border: 1px solid rgba(43, 174, 253, 0.34);
    background: rgba(43, 174, 253, 0.34);
    bottom: 0;
    right: 0.625rem /* 120/192 */;
  }
}
</style>