<template>
  <a-row class="foot-view">
    <a-col :span="12" class="select-view">
      <a-space :size="1">
        <img src="@/assets/bi/logo.png" alt="">
        <a-tree-select v-model="companyValue"
                       :allow-clear="false"
                       :data="companyList"
                       :style="{width:'300px',height:'100%'}"
                       :fieldNames="{ key: 'id', title: 'deptName', children: 'children' }"
                       :filter-tree-node="filterTreeNode" allow-search placeholder="请选择站点"
                       @change="companyChange">
          <template #arrow-icon>
            <icon-caret-down size="18" style="color: white"/>
          </template>
        </a-tree-select>
        <div class="full-btn" @click="toggleFullscreen">
          <img v-if="isFullscreen" src="@/assets/bi/icon-shrink.png" alt="">
          <icon-expand v-else/>
          <text>{{ isFullscreen ? '退出全屏' : '全屏' }}</text>
        </div>
      </a-space>
    </a-col>
    <a-col :span="12">
      <div class="version-view">YunPower EMS Ver 1.0.0</div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import {useFullscreen} from '@/utils/bi/useFullscreen';
import {useCompanyStore} from "@/store";
import {onMounted, ref} from "vue";
import {findById} from "@/utils/ruoyi";
import {useRoute, useRouter} from "vue-router";

const emit = defineEmits(['select'])
const {isFullscreen, toggleFullscreen} = useFullscreen();
const companyStore = useCompanyStore();
const {companyList} = companyStore; // 选择的机构, 机构列表

const companyValue = ref<string | number>('');
const route = useRoute();
const router = useRouter();
/**
 * 站点搜索
 * @param searchValue
 * @param nodeData
 */
const filterTreeNode = (searchValue: any, nodeData: any) => {
  return nodeData.deptName.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
}

const convertToQueryString = (params: Record<string, string | number>) => {
  return Object.entries(params)
      .map(([key, value]) => {
        // 只对键进行转义，而值中的斜杠不转义
        const escapedKey = encodeURIComponent(key);
        const escapedValue = value.toString().replace(/%2F/g, '/');
        return `${escapedKey}=${escapedValue}`;
      })
      .join('&');
};


// 机构下拉框change
const companyChange = (val: any) => {
  // const findData = findById(companyList, val);
  window.location.href = window.location.href.replace(/(stationId=)\d+/, `$1${val}`)
}


onMounted(() => {
  const { stationId } = route.query;
  if (stationId) {
    companyValue.value = Number(stationId);
  }
})
</script>

<style scoped lang="less">
@font-size: 14px;
@font-size-mini: 12px;
@font-size-medium: 16px;
@font-size-large: 22px;
@font-size-title: 18px;
@color-w: white;
@font-family: Source Han Sans;

.foot-view {
  text-align: center;
  align-items: center;
  height: 100%;

  .select-view {
    text-align: start;
    padding-left: 32px;

    img {
      width: 30px;
      height: 30px;
    }

    .full-btn {
      display: flex;
      align-items: center;
      font-size: @font-size-medium;
      margin-left: 26px;

      text {
        margin-left: 5px;
        font-size: @font-size;
      }

      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
    }
  }

  .version-view {
    font-size: 15px;
    text-align: end;
    padding-right: 32px;
  }
}

::v-deep(.arco-select-view) {
  background-color: transparent;
  border-radius: 0;
  border: none;
  color: #FFFFFF !important;

  .arco-select-view-value {
    font-size: 15px;
  }
}
</style>