<template>
  <div class="wrapper">
    <div class="wrapper-title-left-tree" :key="showKey">
      <div v-for="item in treeData" :key="item.id" class="primaryNode">
        <div
          class="top"
          @click="showBottom(item)"
          :class="item.show ? 'topSelect' : ''"
        >
          {{ item.name }}
          ({{ item.channelCount }})
          <DownOutlined v-show="!item.show" />
          <UpOutlined v-show="item.show" />
        </div>
        <div class="bottom" v-show="item.show">
          <div v-for="val in item.children" :key="val.id" class="item">
            <div
              class="up"
              :class="selectId == val.id ? 'select' : ''"
              @click="showDown(item, val), onSelect(item, val)"
            >
              <div>
                <svg
                  t="1654068878091"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2156"
                  width="0.25rem"
                  height="0.25rem"
                  v-show="selectId == val.id"
                >
                  <path
                    d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
                    p-id="2157"
                    fill="#0058e1"
                  ></path>
                </svg>
                <span class="name">{{ val.name }}({{ val.channelCount }})</span>
              </div>
              <span v-if="item.children.length < 0">{{ val.total }}</span>
              <span v-else>
                <down-outlined v-show="!val.show" />
                <up-outlined v-show="val.show" />
              </span>
            </div>
            <div class="down" v-show="val.show">
              <div
                v-for="child in val.children"
                :key="child.id"
                class="child"
                :class="selectId == child.id ? 'select2' : ''"
                @click="onSelect(item, child, child)"
              >
                <div>
                  <svg
                    t="1654068878091"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2156"
                    width="0.25rem"
                    height="0.25rem"
                    v-show="selectId == child.id"
                  >
                    <path
                      d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
                      p-id="2157"
                      fill="#0058e1"
                    ></path>
                  </svg>
                  <span class="name">
                    {{ child.name }}
                  </span>
                </div>
                <span>{{ child.channelCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, ref, watch } from 'vue'
  import { getCameraAllOrgan } from '@/api/videoSurveillance'
  import { getCameraInfoByAreaId } from '@/api/file'
  import mybus from '@/myplugins/mybus'
  import { useRouter } from 'vue-router'
  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
  import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'

  export default defineComponent({
    setup() {
      const router = useRouter()
      const whoShow1 = ref(whoShow)
      const showKey = ref(0)
      const treeData = ref([])
      const selectId = ref('')

      // 初始化
      const init = async () => {
        treeData.value = []
        console.log(
          'router.currentRoute.value.query.select',
          router.currentRoute.value.query.select
        )
        let select =
          router.currentRoute.value.query.select ||
          DETAIL_PAGE_CONTENT_DEFAULT_TAB
        if (select === '123') {
          select = ''
        }
        console.log(
          '获取url中的select=====================>',
          router.currentRoute.value.query.select
        )
        if (select == '基础设施') {
          let res = {}
          if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
            res = await getCameraAllOrgan({
              parentId: 'S4NbecfYB1DBH8HNULGS34',
            })
          } else {
            // 西海岸
            res = await getCameraInfoByAreaId({
              areaId: '70be8c5b664f4bcf869d82f2e8335051',
            })
          }
          treeData.value = (res.data && res.data.data) || []
          // 只有一个，默认展开到二级菜单
          if (res.data && res.data.data.length == 1) {
            showBottom(treeData.value[0])
          }
        }
      }
      mybus.on('getDeptList', () => {
        init()
      })

      const onSelect = async (item, val, child) => {
        console.log('item--------onSelect---->', item)
        console.log('val------onSelect------>', val)
        console.log('child-----onSelect------->', child)
        mybus.emit('getCameraByParentId', {
          id: val.id,
        })
        mybus.emit('getListByParentId', val.id)
        let res = {}
        if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
          res = await getCameraAllOrgan({ parentId: val.id })
        } else {
          // 西海岸
          res = await getCameraInfoByAreaId({ areaId: val.id })
        }
        treeData.value.map((treeDataItem, index) => {
          if (item.id == treeDataItem.id) {
            treeData.value[index].children.map((childItem, childIndex) => {
              if (childItem.id == val.id) {
                treeData.value[index].children[childIndex].children =
                  res.data.data
              }
            })
          }
        })
        if (child) {
          selectId.value = child.id
        }
      }

      watch(selectId, (newVal) => {
        if (newVal == '') {
          mybus.emit('getCameraByParentId', {
            id: '',
          })
          mybus.emit('getListByParentId', '')
        }
      })

      const showBottom = async (item) => {
        item.show = !item.show
        let res = {}
        if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
          res = await getCameraAllOrgan({ parentId: item.id })
        } else {
          // 西海岸
          res = await getCameraInfoByAreaId({ areaId: item.id })
        }

        treeData.value.map((treeDataItem, index) => {
          if (item.id == treeDataItem.id) {
            treeData.value[index].children = (res.data && res.data.data) || []
            console.log('treeData.value.[index]', treeData.value[index])
          }
        })
      }
      const showDown = (item, val) => {
        selectId.value = val.id
        console.log('item---showDown--------->', item)
        console.log('val----showDown-------->', val)
        if (item.children) {
          val.show = !val.show
          // 取消选中
          if (!val.show) {
            selectId.value = ''
          }
        }
      }
      return {
        treeData,
        showKey,
        onSelect,
        showBottom,
        showDown,
        selectId,
      }
    },
    beforeUnmount() {
      mybus.off('getDeptList')
      console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
    },
    components: {
      UpOutlined,
      DownOutlined,
    },
  })
</script>
<style lang="less" scoped>
  .primaryNode {
    .top {
      width: 100%;
      height: 0.4rem;
      background: rgba(0, 135, 225, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.1rem;
      margin-top: 0.08rem;
    }

    .top:hover {
      cursor: pointer;
      // 0058e1 透明度 0.5
      background: rgba(0, 88, 225, 0.8);
      color: white;

      :deep(.anticon) {
        color: white;
      }
    }

    .topSelect {
      background: #0058e1;
      color: white;

      :deep(.anticon) {
        color: white;
      }
    }

    .bottom {
      width: 100%;
      background: rgba(244, 245, 248, 0.8);
      padding: 0 0.1rem;

      // margin-bottom: .08rem;
      .up {
        cursor: pointer;
        height: 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 0.01rem solid #ccc;
        padding: 0 0.1rem;

        & > div {
          display: flex;
          justify-content: flex-start;
        }

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }

      .up:hover {
        .name {
          color: #0058e1;
          font-weight: 600;
        }

        span {
          color: #0058e1;
          font-weight: 600;
        }
      }

      .select {
        padding: 0 0.1rem 0 0;

        .name {
          width: 1.7rem;
          color: #0058e1 !important;
          font-weight: 600;
        }

        span {
          color: #0058e1;
          font-weight: 600;
        }
      }

      .item:nth-of-type(1) .up {
        border-top: none;
      }

      .down {
        width: 100%;

        .child {
          cursor: pointer;
          height: 0.4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.1rem;

          & > div {
            display: flex;
            justify-content: flex-start;
          }

          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }

        .child:hover {
          .name {
            color: #0058e1;
            font-weight: 600;
          }

          span {
            color: #0058e1;
            font-weight: 600;
          }
        }

        .select2 {
          .name {
            width: 1.7rem;
            color: #0058e1;
            font-weight: 600;
          }

          span {
            color: #0058e1;
            font-weight: 600;
          }

          padding: 0 0.1rem 0 0;
        }
      }
    }
  }
</style>