<template>
  <div id="Tool-level">
    <div class="Tool-level">
      <div class="Tool-Header"><span class="title-dialog">图层列表</span></div>
      <div class="Tool-Border">
        <li v-for="item, index in itemForAll.data" :key="item.name"
          :style="item.click ? 'color:#F8E403' : 'color:#CCE6FF'" @click="chlickLi(item)">
          <div>
            <i class="Tool-ioc"></i>
            <span>{{ item.name }}</span>
          </div>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tools'
}
</script>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
import bus from '@/utils/bus'
import { setBoat } from "@/utils/map/Boat";
import { addLayer, clearMap, setOpacity } from "@/utils/map/ArcgisUtil";
import { addLayerByName } from '@/utils/map/Layer'
import { setVideoCamera } from '@/utils/map/Common'
import { GetUserPrivilege } from "@/utils/user";

onMounted(() => {
  GetUserPrivilege(itemForAll.value)
})

const props = defineProps(['shipinRonghe'])

onBeforeUnmount(() => {
})
const itemForAll = ref({
  data: [{ name: '船舶', indexName: 'cb', click: false },
  { name: '视频融合', indexName: 'sprh', click: false },
  { name: '码头泊位', indexName: 'mt', click: false },
  { name: '客运码头', indexName: 'kymt', click: false },
  { name: '危险品码头', indexName: 'wxpmt', click: false },
  { name: '两岸精模', indexName: 'jm', click: false },
  { name: '两岸白模', indexName: 'bm', click: false },
  { name: '航道', indexName: 'hd', click: false },
  { name: '锚地', indexName: 'md', click: false },
  { name: '掉头区', indexName: 'dtq', click: false },
  { name: '警戒区', indexName: 'jjq', click: false },
  { name: '水上绿色综合服务区', indexName: 'sszh', click: false },
  { name: '航标', indexName: 'hb', click: false },
  { name: '水下地形', indexName: 'sxdx', click: false }
  ]
})
const emit = defineEmits(['showView', 'hiddenView'])

watch(props, (n, o) => {
  if (!props.shipinRonghe) {
    itemForAll.value.data[1].click = false
  }
})

function chlickLi(item) {
  if (item.click) {
    item.click = false
    if (item.indexName == 'cb') {
      setBoat(false)
    }
    addLayerByName(item.indexName, false)
    if (item.indexName == 'sxdx') {
      // 操作水下地形
      bus.emit('changeYuJiNum', 1)
      bus.emit('toggle_sxdx', false)
      bus.emit('hiddenWater')
      setOpacity(1)
    }
    //视频融合
    if (item.indexName == 'sprh') {
      emit('hiddenView')
    }

  }
  else {
    item.click = true
    if (item.indexName == 'cb') {
      setBoat(true)
    }
    if (item.indexName == 'sxdx') {
      bus.emit('toggle_sxdx', true)
      bus.emit('changeYuJiNum', 2)
      setOpacity(0.4)
    }
    if (item.indexName == 'sprh') {
      setVideoCamera()
      emit('showView')
    }
    addLayerByName(item.indexName, true)
  }
}

</script>

<style lang="scss" scoped>
#Tool-level {
  position: absolute;
  bottom: -300px;
  left: calc(82% - 100px);
  transform: translateX(-50%);
  align-items: center;
  top: 10vh;
  z-index: 30;

  .Tool-level {
    height: 760px;
    width: 290px;
    background: url('../../../../assets/imgs/header/tclbbg.png') no-repeat;
    background-size: 100% 100%;

    .Tool-Header {
      padding-top: 20px;
      height: 40px;
      width: 100%;
      text-align: left;
      position: relative;
      padding-left: 20px;
    }

    .Tool-Border {
      height: 430px;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;

      li {
        padding-top: 3%;
        height: 40px;
        list-style: none;
        width: 100%;
        padding-left: 5%;

        div {
          padding-left: 3%;
          padding-bottom: 10px;
          line-height: 25px;
          width: 80%;
          background: url('@/assets/imgs/header/tczsx.png') no-repeat;
          background-position: bottom;
          background-size: 90% 5px;
          display: flex;

          .Tool-ioc {
            height: 25px;
            width: 10%;
            background: url('@/assets/imgs/header/tcx.png') no-repeat;
            background-size: 80%;
            background-position: center;
          }

          span {
            padding-left: 1%;
            height: 25px;
            font-size: 15px;
            text-align: left;
            width: 90%;
          }
        }
      }
    }
  }
}
</style>