<template>
  <div class="indexBox" :class="macChange ? 'macChange' : ''">
    <!-- <BdMap /> -->
    <!-- 头部 -->
    <Header @maxChange="maxChangeFn" />
    <!-- 左侧 -->
    <div class="main-box">
      <div class="leftBox">
        <!-- 基础数据 -->
        <Statistics :obj="jcsjStatisticsData" />
        <!-- 数据统计 -->
        <CountData />
      </div>
      <div :class="macChange ? 'center' : 'centers'">
        <!-- 地图 -->
        <BigMap />
        <!-- 底部4个公司 -->
        <!-- <div class="bottom-gs">
        <ul class="ul-gs">
          <li>复烤公司</li>
          <li>贵安新区公司</li>
          <li>烟科院</li>
          <li>投资公司</li>
        </ul>
      </div> -->
      </div>
      <!-- 右侧 -->
      <div class="rightBox">
        <!-- 运行控制 -->
        <Opcontrol />
        <!-- 数据统计 -->
        <CountDatas />
        <!-- <CountData /> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "./components/header.vue";
import Statistics from "./components/statistics.vue";
import Opcontrol from "./components/opcontrol.vue";
import CountData from "./components/countData.vue";
import CountDatas from "./components/countData2.vue";
import BigMap from "@/components/Map/index.vue";
import emitter from "@/utils/eventBus.js";
import { onMounted, ref, onUnmounted } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
const macChange = ref(false);
const BGcolor = ref(getItem("ZtColor") ? getItem("ZtColor") : 'rgba(4, 128, 134, 1)');
const jcsjStatisticsData = ref({
  //基础数据
  title: "基础数据",
  list: [
    {
      title: "企业数量",
      item: [
        {
          val: 0,
          name: "总数"
        },
        {
          val: 0,
          name: "三级分公司"
        }
      ]
    },
    {
      title: "物流配送中心",
      item: [
        {
          val: 0,
          name: "总数"
        },
        {
          val: 0,
          name: "中转站"
        }
      ]
    },
    {
      title: "复烤公司数量",
      item: [
        {
          val: 0,
          name: "总数"
        }
      ]
    },
    {
      title: "烟叶收购站（点）",
      item: [
        {
          val: 0,
          name: "总数"
        }
      ]
    }
  ]
});
onMounted(() => {
  //点击某个行政区
  emitter.on("clickAreaPoint", (res) => {
    const code = String(res.adcode).substring(0, 4);
    getApi({ code }, "/mosty-jcgl/placeJwd/getPlaceJwd").then((res) => {
      emitter.emit("showSitePoint", res);
    });
  });

  getQyslTool(); //企业数量总数
  getWlpTool(); //物流配送
  getFkTool(); //复烤厂
  getYyTool(); //烟叶收购
  // const html = document.documentElement;
  // html.style.setProperty("--el-color-primary", BGcolor.value)
  // html.style.setProperty("--el-button-bg-color", BGcolor.value)
  // html.style.setProperty("--el-bg-color", BGcolor.value)
  // // const match = BGcolor.value.match(/\(([^)]+)\)/)[1].split(',');
  // const match = BGcolor.value.substring(5, BGcolor.value.indexOf(")")).split(",")
  // if (match) {
  //   const boderColor = `rgba(${match[0]}, ${match[1]}, ${match[2]}, ${0.75})` // 更新第四个参数的值
  //   const tabbackgroundColor = `rgba(${match[0]}, ${match[1]}, ${match[2]}, ${0.2})` // 更新第四个参数的值
  //   html.style.setProperty("--el-table-border-color", boderColor)
  //   html.style.setProperty("--el-border-color-lighter", boderColor)
  //   html.style.setProperty("--el-table-row-hover-bg-color", boderColor)
  //   html.style.setProperty("--el-table-cell-bmx-backgroundcolor", tabbackgroundColor)
  // } else {
  //   return 1; // 如果匹配失败，返回默认值
  // }
});
onUnmounted(() => {
  emitter.off("clickAreaPoint");
});
// 获取基础数据总数的函数
const getVal = (title, name, data) => {
  jcsjStatisticsData.value.list.forEach((num) => {
    if (num.title === title) {
      num.item.forEach((i) => {
        if (i.name === name) {
          i.val = data;
        }
      });
    }
  });
};

// 获取企业数量数据(已改)
const getQyslTool = () => {
  getApi({}, "/mosty-jcgl/basicData/dataStatistics").then((res) => {
    getVal("企业数量", "总数", res.countyCompanyCount + res.cityCompanyCount);
    getVal("企业数量", "三级分公司", res.countyCompanyCount);
  });
};

// 获取物流配送中心
const getWlpTool = () => {
  getApi({}, "/mosty-jcgl/basicData/logisticsCount").then((res) => {
    getVal("物流配送中心", "总数", res.logisticsCount + res.transStationCount);
    getVal("物流配送中心", "中转站", res.transStationCount);
  });
};

// 获取复烤厂
const getFkTool = () => {
  getApi({}, "/mosty-jcgl/basicData/fkCompanyCount").then((res) => {
    getVal("复烤公司数量", "总数", res);
  });
};
// 获取烟叶收购
const getYyTool = () => {
  getApi({}, "/mosty-jcgl/basicData/tobaccoStationCount").then((res) => {
    getVal("烟叶收购站（点）", "总数", res);
  });
};

// 窗口最大化切换
function maxChangeFn(val) {

  macChange.value = val;
}
</script>

<style lang="scss">
.indexBox {
  height: calc(100% - 42px);
  width: 100%;
  // position: absolute;
  color: aliceblue;
  z-index: 999;
  transition: 1s;
}

.macChange {
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  transition: 1s;
  z-index: 999;
  background: #fff;
}

.main-box {
  display: flex;
  justify-content: space-between;
}

/* 左侧盒子 */
.leftBox {
  width: 430px;
  height: 100%;
  /* height: 886px; */
  background-color: #fff;
}

/* 右侧盒子 */
.rightBox {
  width: 430px;
  height: 100%;
  background-color: #fff;
}

// 地图盒子
.centers {
  width: calc(100% - 860px);
}

.center {
  width: calc(100% - 860px);
}

.bottom-gs {
  width: calc(100% - 1036px);
  height: 200px;
  position: absolute;
  bottom: -40px;
  left: 50%;
  background: rgb(33, 64, 60);
  border: 4px solid rgb(32, 196, 153);
  transform: translateX(-50%);
}

.ul-gs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 60px;

  li {
    border: 2px solid rgb(32, 196, 153);
    font-size: 20px;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
  }
}
</style>
