<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\content\top.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:30:31
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
  <div class="content-left">
    <el-row>
      <el-col :span="6">
        <gateway ref="gateway1" :title="t('messages.QiCheCommunication')" @click="toLegionProducts(5,t('messages.QiCheLegion'))"> </gateway>
      </el-col>
      <el-col :span="6">
        <gateway ref="gateway2" :title="t('messages.FuZhuangCommunication')" @click="toLegionProducts(3,'服装军团')"> </gateway>
      </el-col>
      <el-col :span="6">
        <gateway ref="gateway3" :title="t('messages.JiaFangCommunication')" @click="toLegionProducts(4,'家纺军团')"> </gateway>
      </el-col>
      <el-col :span="6">
        <gateway ref="gateway4" :title="t('messages.YiFangCommunication')" @click="toLegionProducts(15,'医防军团')"> </gateway>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import gateway from "./chart/gateway.vue";
//   import { getnoiseData } from "@/http/environment";
import { gatewayOfCorps } from "@/http/InPlantProducts";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
const store = useInPlantProductsStore();
import { useRouter } from "vue-router";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const router = useRouter()
let props = defineProps<{
  width: number;
  height: number;
}>();

watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);

//内容dom-------------------------
let gateway1 = ref();
let gateway2 = ref();
let gateway3 = ref();
let gateway4 = ref();

//---------------------------

//---------------------------

function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;
  gatewaybox(val.width, val.height);
}

const gatewaybox = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 4, 0);
  //   a.oHeight=a.oHeight
  //修改高度
  gateway1.value.setchartWH(a.oWidth, a.oHeight);
  gateway2.value.setchartWH(a.oWidth, a.oHeight);
  gateway3.value.setchartWH(a.oWidth, a.oHeight);
  gateway4.value.setchartWH(a.oWidth, a.oHeight);
};
watch(
  () => store.gatewayOfCorps,
  (newVal, oldVal) => {
    setdata(newVal);
  },
  { deep: true, flush: "post" }
);
async function gatewayOfCorpsfun() {
  let result: any = await gatewayOfCorps();

  if (result.code == 200) {
    store.changegatewayOfCorps(result.data);
    // refnoise.value.setData(result.data)
    // setData(room,year,result.title)
  }
}
function setdata(val: any) {
  console.log(val,"ddd");
  
  val.forEach((res) => {
    if (res.name == '汽车军团') {
      gateway1.value.setData(
        res.status == "true" ? 1 : 0,
        "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
        res.counts
      );
    }
    if (res.name == '家纺军团') {
      gateway3.value.setData(
        res.status == "true" ? 1 : 0,
        "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
        res.counts
      );
    }
    if (res.name == '服装军团') {
      gateway2.value.setData(
        res.status == "true" ? 1 : 0,
        "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
        res.counts
      );
    }
    if (res.name == '医防军团') {
      gateway4.value.setData(
        res.status == "true" ? 1 : 0,
        "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
        res.counts
      );
    }
  });
}

function toLegionProducts(deptId,title) {
  router.push({
    name:'legionProducts',
    params:{
      deptId:deptId
    },
    query:{
      title:title
    }
  })
}
onMounted(() => {
  gatewayOfCorpsfun();
});
</script>

<style scope>
.content-left {
  width: 100%;
}
</style>
